JavaScript Code works inline, but src= reference doesn't

Question

I have a javascript function that has been driving me nuts. This is the latest variation on the problem. If I put the code in line after the end of the form (i.e. after the tag, the code works just fine; but if I put a script reference to the code, it loads but doesn't execute.

This works:

<script type="text/javascript">
    var matchFieldName = 'dotmatch';
    var resultFieldName = 'dotnumber';
    var lookupURL = "/AutoSuggestJSTest/AutoSuggest.asmx/DOTFind";
    var labelFieldName = "JobTitle";
    var valueFieldName = "DOTNumber";
    $('#' + matchFieldName).autocomplete({
        source: function(request, response) {
            $.ajax({
                type: "POST",
                url: lookupURL,
                contentType: 'application/json',
                dataType: "json",
                data: JSON.stringify({ prefixText: request.term, count: 20 }),
                success: function(data) {
                    var output = jQuery.parseJSON(data.d);
                    //                        var output = eval(data.d);
                    response($.map(output, function(item) {
                        var lbl = "item." + labelFieldName + " (item." + valueFieldName + ")";
                        var val = "item." + valueFieldName;
                        return {
                            //                                label: lbl,
                            //                                value: val
                            //                                label: eval('item.' + lableFieldName + '(item.' + valueFieldName + ')'),
                            //                                value: eval('item.' + valueFieldName)
                            label: item.JobTitle + "( " + item.DOTNumber + ")",
                            value: item.DOTNumber
                        }
                    }));
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        minLength: 2,
        select: function(event, ui) {
            $('#' + resultFieldName).val(ui.item.value);
            return ui.item.label;
        }
    });
</script>

</div>

But this doesn't:

</form>
    <div>

<script type="text/javascript" src="js/DOTAutocomplete.js" />

    </div>
</body>

The only contents of the .js file are the lines that work.

ARGH!!!

Answer 1

Self-closing <script> tags aren't valid, this:

<script type="text/javascript" src="js/DOTAutocomplete.js" />

should be:

<script type="text/javascript" src="js/DOTAutocomplete.js"></script>

Also note that since you're using a selector $('#' + matchFieldName), the file should either be included after that element is present, or wrap your code in a document.ready handler, for example:

$(function() {
  //your code...
});