Home/ Questions/Q 6975819
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T17:25:04+00:00

I’m creating a simple web-based lookup utility for a board game called Rail Baron.

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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();
                        }
                    });
                }
            });
        });
    • 0