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!!!

score 10 · Accepted Answer · answered Dec 02 '10 at 19:34

10

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

answered Dec 02 '10 at 19:34

Nick Craver

623,446
136
1,297
1,155

YES! Thank you, Nick. You nailed it. I made both changes and it work. – Bob Jones Dec 02 '10 at 19:45
Relevant: [Why Don't Self Closing Script Tags Work](http://stackoverflow.com/questions/69913/why-dont-self-closing-script-tags-work) – Matt Dec 02 '10 at 19:52

score 1 · Answer 2 · answered Dec 02 '10 at 19:35

1

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.

answered Dec 02 '10 at 19:35

Surreal Dreams

26,055
3
46
61

Oh, I see it now, Nick's nailed it. I either skipped the `src=` code or else it wasn't posted yet. – Surreal Dreams Dec 02 '10 at 19:37
This answer did solve my "file_tree is not a function" and "lightSlider is not a function. But, only partially. I did find that my paths were wrong. Once I made the corrections, my library functions worked. But the solution isn't perfect. I had to put my script lines near the bottom of my html. Putting the exact same scripts in the head didn't work, "...is not a function" happens again. What is being overlooked here and the other answers is that successive scripts, especially the libraries relying on jQuery, seem to step on each other in unpredictable ways (guessing duplicate function names). – TARKUS Apr 07 '16 at 13:22
As @Nick Craver pointed out, jQuery code should nearly always be wrapped in a document ready block. This ensures that the important page assets have loaded before script execution. This lets you put your scripts and references in the head (where they should be) without worry about timing. – Surreal Dreams Apr 07 '16 at 13:44
Yes, but even when my "jQuery widget" calls (file tree, lightSlider, etc) are wrapped in `$(document).ready(function(){ ... call function here })` they don't work. The only difference between whether they work or don't work is where I place the `` in the document. When that happens, I suspect these libraries are overwriting functions or function names. – TARKUS Apr 07 '16 at 18:39

Mark At Ramp51 · Answer 3 · 2010-12-02T19:44:07.347

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

this will make sure the DOM has loaded prior to executing this code. the problem you were likely having is code was executing before the elements involved had actually be integrated into the DOM. — Mark At Ramp51, Dec 02 '10 at 19:37
yeah... copy and paste error. Fixed: Updated, since scripts tags shouldn't be in an external js include at all, despite my obvious mistake of sticking a script tag on line 2. — Mark At Ramp51, Dec 02 '10 at 19:41

score 0 · Answer 4 · edited May 23 '17 at 12:25

0

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.

edited May 23 '17 at 12:25

Community

1
1

answered Dec 02 '10 at 19:38

Chris B. Behrens

6,255
8
45
71

There is a good reason. Elements that have, or have the ability to have, inner-text use a closing tag, elements that cannot have inner text should be a single element. An img or an input are single tags, a div or a script use closing tags. – mwilcox Dec 02 '10 at 22:06
I understand that that's the case, but I don't consider that a good reason. The spec should support both configurations - it's perfectly clear semantically what I intend when I use a self-closing JS tag...that's why this problem crops up so often.

The essential problem is that you can't do it both ways, and you should be able to. The limitation is a technical, not a logical one. – Chris B. Behrens Dec 03 '10 at 17:41

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

4 Answers4