calling js function in another .js file

Question

In the success callback function of my AJAX post, I'm trying to call a function that's in another JS file

page1.html contains:

<head>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/page2.js" type="text/javascript"></script>
    <script>
        $.ajax({
            type: 'post',
            url: '/dev/new/scripts/search.php',
            dataType: 'json',
            data: {"search_1":"<?php echo $item1; ?>","search_2":"<?php echo $item2; ?>"},
            success: searchResults()
        });
    </script>
</head>

$.ajax({
    type: 'post',
    url: '/dev/new/scripts/search.php',
    dataType: 'json',
    data: {"search_1":"<?php echo $item1; ?>","search_2":"<?php echo $item2; ?>"},
    success: searchResults()
});

page2.js contains:

$(document).ready(function() {

    function searchResults () {
        stuff...
    }

});

The error firebug is giving me is: "ReferenceError: searchResults is not defined"

I don't think you should put your function in $(document).ready — Ringo
– Ringo, Commented Dec 4, 2013 at 6:06
Because searchResults is inside your ready function, hidden from the global scope. — Joe Simmons
– Joe Simmons, Commented Dec 4, 2013 at 6:06
Why does page1.js file contain html? If you want to call js, you must include the js in html file using script src="/url/to/js/file" — khattam
– khattam, Commented Dec 4, 2013 at 6:06
@khattam - page1 is actually an html page, not JS...changed my question to reflect it. — Dan w
– Dan w, Commented Dec 4, 2013 at 6:16

jfriend00 · Accepted Answer · 2013-12-04 06:06:55Z

1

When you pass a function as the success handler, it needs to be specified like this:

success: searchResults

not like this:

success: searchResults()

When you put the parens after it, it instructs the JS interpreter to call it now. When you don't put the parens after it, it is a function reference that can be called later by whomever has the reference.

Further, the searchResults() function is defined locally inside your document.ready handler and is NOT available outside that function (it is local to your ready callback). If you want it available globally so you can call it from another context, you will have to define it globally.

answered Dec 4, 2013 at 6:06

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

Comments

yohannan_sobin · Accepted Answer · 2013-12-04 06:09:06Z

1

It is because you have put the function definition inside document ready. Try after putting it outside.

answered Dec 4, 2013 at 6:09

yohannan_sobin

9171 gold badge9 silver badges17 bronze badges

Comments

Ayush · Accepted Answer · 2013-12-04 06:07:12Z

-1

There are two problems with your code:

In page2.js, function searchResults is only defined after the DOM is ready. But the same is not applicable for the ajax call in page1.js. Which is why, when page1 looks for searchResults it does not find it. Wrap the ajax call in $(document).ready() as well, or remove both from $(document).ready().
When you do success: searchResults(), searchResults gets evaluated, and it's return value is assigned to success which is not what you want. Do success: searchResults instead (without the parenthesis).

answered Dec 4, 2013 at 6:07

Ayush

42.5k52 gold badges169 silver badges243 bronze badges

1 Comment

jfriend00 Over a year ago

It's not that the searchResults() function is only defined after the DOM is ready. It's that the searchResults() function is defined locally within the dom ready function callback and is ONLY available inside that callback function. It is not available globally.

Collectives™ on Stack Overflow

calling js function in another .js file

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related