CODEWITHSUNDEEP
javascriptjquery
calebds
calebds

Reputation: 26228

jQuery event handler only works in Firefox

I'm creating a simple web-based lookup utility for a board game called Rail Baron. There are two text inputs that are wired up to jQuery autoComplete, which appears to be working great. On any change event from the inputs, a dollar amount is displayed -- representing the payoff for a trip between two cities.

The change() event handler is called in Firefox, but not other browsers. Doesn't work in IE so I don't think this is a webkit issue. Looking for a work-around or to understand why this is happening. Full application available at http://paislee.net/railbaron. Thanks!

Dependencies, loaded in <head>: 

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

Relevant markup:

<form id="payoffForm" action="#">
                <fieldset>
                    <legend>
                        <strong>Payoff Lookup</strong>
                    </legend>
                    <label for="from">From:</label>
                    <input id="from" type="text">
                    <label for="to">To:</label>
                    <input id="to" type="text">
                    <div id="result">$</div>
                </fieldset>             
            </form>

My JavaScript, loaded just before closing </body> tag:

<script type="text/javascript">
            var chart; // small csv file in memory

            // this updates the dollar amount displayed
            function updatePayoff() {

                var result;
                var from = $("#from").val();
                var to = $("#to").val();

                var from_i = chart[0].indexOf(from);
                var to_i = chart[0].indexOf(to);
                result = chart[to_i + 1][from_i] * 1000;

                $("#result").html( result ? "$" + result : "$");

            }

            // attach event handlers
            $("#from").change(function() {
                updatePayoff();
            });

            $("#to").change(function() {
                updatePayoff();
            });

            // entry point
            $(document).ready(function() {
                $.ajax({
                    url : "./payoffs.csv",
                    cache : false,
                    success : function(result) {
                        chart = CSVToArray(result);
                        $("#from").autocomplete({
                            source : chart[0]
                        });
                        $("#to").autocomplete({
                            source : chart[0]
                        });
                    }
                });
            });

            // parsing my csv file into autocomplete array
            function CSVToArray(strData, strDelimiter) {
                // ..implementation..
            }

</script>

Full application available at http://paislee.net/railbaron. Thanks!

Upvotes: 0

Views: 203

Answers (3)

Adam Rackis
Adam Rackis

Reputation: 83358

It looks like your input tags are not closed.

<input id="to" type="text">

I believe this is invalid for some (all?) doctypes - try closing them and see if that fixes things

<input id="to" type="text" />

It also looks like your script tag is outside of your body, which I don't think is valid. Try moving it to the end of your body, but still inside.

Upvotes: 1

Ayman Safadi
Ayman Safadi

Reputation: 11552

Look into the jQuery UI Autocomplete's select callback. This is completely untested, but try this:

        /* REMOVE
        $("#from").change(function() {
            updatePayoff();
        });

        $("#to").change(function() {
            updatePayoff();
        });
        */

        $(document).ready(function() {
            $.ajax({
                url : "./payoffs.csv",
                cache : false,
                success : function(result) {
                    chart = CSVToArray(result);
                    $("#from").autocomplete({
                        source : chart[0],
                        select: function() {
                            updatePayoff();
                        }
                    });
                    $("#to").autocomplete({
                        source : chart[0],
                        select: function() {
                            updatePayoff();
                        }
                    });
                }
            });
        });

Upvotes: 1

bpeterson76
bpeterson76

Reputation: 12870

This seems very similar to a problem that I had when tweaking the dom and running click / change handlers. For me, the .on() functionality fixed the problem. FYI, .on() is the newer version of .live()

Upvotes: 1

Related Questions