CODEWITHSUNDEEP
javascriptphpjquerywordpress
user1852176
user1852176

Reputation: 455

jquery POST error with wordpress

I'm trying to use POST to retrieve some scripts on a wordpress site but I'm getting the following error

Uncaught TypeError: Cannot call method 'post' of undefined

Basically I load an external javascript file which loads a couple of scripts, then calls back to a function on the original page to execute a POST call to retrieve some data.

I've used this exact same script on a "regular" HTML based site, so I know it works elsewhere. jQuery is loaded as you can see, because I use .getScript to retrieve another file (which does load)

Now for the function retrieve_window(); located on the template file.

//template file that initially loads
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://localhost/Project1/js/retrieve_scripts.js"></script>
<div class="reserve_wrapper " id="resere_wrapper"></div>
<script>

    function retrieve_window(){

        $.post("http://localhost/Project1/windows/serve_window",function(data) {
            $('#reserve_wrapper').html(data);
            display_window();
        });
    }
</script>

Here's the get_scritps file that is loaded

//retrieve_scripts.js
jQuery(document).ready(function ($) {   
    $.getScript("http://localhost/project1/js/date.js", function() { }); //this script loads
    retrieve_window(); //calls back to template file to make POST request
});

So basically the retrieve_window is a callback function to ensure the date.js script is properly loaded

Upvotes: 0

Views: 120

Answers (2)

marteljn
marteljn

Reputation: 6526

A few issues here:

1) Keep it simple for now and structure your code like this:

$(document).ready(function () {   
    $.getScript("http://localhost/project1/js/date.js", function() { }); //this script loads
});

2) AJAX is ASYNC so you put your callback in the succees callback of getScript

 $(document).ready(function () {   
        $.getScript("http://localhost/project1/js/date.js", function() { 
           retrieve_window();
         }); //this script loads
    });

or

 $(document).ready(function () {   
            $.getScript("http://localhost/project1/js/date.js", retrieve_window); //this script loads
        });

Upvotes: 1

Mike Edwards
Mike Edwards

Reputation: 3771

The $ variable referenced in the retrieve_scripts.js file is the first argument passed into your .ready(function( $ ) {}). This is consistent with jQuery usage.

The $ referenced in your inline script tag refers to a global $ variable since there are no other variables in scope with that name.

Somewhere in code that is running but not in your excerpt the global $ reference to jQuery is getting removed, probably by calling jQuery.noConflict().

Presumably at the time your inline script executes and defines the retrieve_window() function the global reference is still present. This is a hack, but I'm guessing will work:

(function( $ ) {
    // we are in a closure but want this function to be global, so assign it globally
    retrieve_window = function() {
        // your code here
        $.post() etc. etc.
    };
} ( $ )); // capture a reference to the global value of $ now before it is removed

Upvotes: 1

Related Questions