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

Nick Craver · Accepted Answer · 2010-12-02 19:34:37Z

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 2, 2010 at 19:34

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bob Jones Over a year ago

YES! Thank you, Nick. You nailed it. I made both changes and it work.

Matt Over a year ago

Relevant: Why Don't Self Closing Script Tags Work

Surreal Dreams · Accepted Answer · 2010-12-02 19:35:14Z

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 2, 2010 at 19:35

Surreal Dreams

26.4k4 gold badges49 silver badges61 bronze badges

4 Comments

Surreal Dreams Over a year ago

Oh, I see it now, Nick's nailed it. I either skipped the src= code or else it wasn't posted yet.

TARKUS Over a year ago

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

Surreal Dreams Over a year ago

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.

TARKUS Over a year ago

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 <script src=""></script> in the document. When that happens, I suspect these libraries are overwriting functions or function names.

Mark At Ramp51 · Accepted Answer · 2010-12-02 19:44:07Z

1

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

edited Dec 2, 2010 at 19:44

answered Dec 2, 2010 at 19:37

Mark At Ramp51

5,5311 gold badge27 silver badges31 bronze badges

3 Comments

Mark At Ramp51 Over a year ago

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.

Nick Craver Over a year ago

you shouldn't have <script> tags inside a JavaScript function :)

Mark At Ramp51 Over a year ago

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.

Community · Accepted Answer · 2017-05-23 12:25:36Z

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, 2017 at 12:25

CommunityBot

11 silver badge

answered Dec 2, 2010 at 19:38

Chris B. Behrens

6,2938 gold badges49 silver badges74 bronze badges

2 Comments

mwilcox Over a year ago

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.

Chris B. Behrens Over a year ago

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.<br /><br />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.

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

4 Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related