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

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开发者_C百科 + " (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!!!

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...
});

Chances are that you're not targeting the file correctly. You're using type="text/javascript", right? If it works inline but not with a src reference, it's almost certainly that you're not nailing the path to the file.

Try this, put this code back into an external file, make sure you have a valid script include tag, per Nick's post.

$(function(){
    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; 
        } 
    }); 
}); 

As noted above by Mr. Craver, self-closing Javascript tags are no good. Here's a discussion on why:

Why don't self-closing script tags work?

There's no satisfying reason why - it's just that the SCRIPT tag isn't marked as having a content model of EMPTY in the spec - probably because the src attribute was added later.