$.post fails with error "...is not a function"

Question

Here is my code:

var jqxhr = $.post("mypage.php", {url:pageurl}, function() {
      alert("fetching...");
})
.success(function() { alert("fetch complete!"); })
.error(function() { alert("error!"); })
.complete(function() { alert("complete"); });

// Set another completion function for the request above
jqxhr.complete(function(){ alert("second complete"); });

I get the alert("Fetching...") dialog box, but the rest of the code does not complete. I get the error: Error: $.post("sec_fetch_report.php", function () {alert("fetching...");}).success is not a function

I thought maybe I might be missing the jquery libs, but I have another function that calls $.post and it runs just fine. Is there a syntax error I'm missing somewhere or what? Thanks

Solution 1

Your syntax is broken. What you're attempting to do is call the .success property of the $.post() method, which obviously doesnt exist. It looks like you also need to be using the $.ajax method instead of $.post:

 $.ajax({
     type: 'POST',
     url: 'mypage.php',
     data: { url: pageurl },
     beforeSend: function()
     {
         alert('Fetching....');
     },
     success: function()
     {
         alert('Fetch Complete');
     },
     error: function()
     {
         alert('Error');
     },
     complete: function()
     {
         alert('Complete')
     }
 });

Solution 2

That syntax is only supported in jQuery 1.5+ (with the introduction of deferreds). It sounds like you're using a earlier version of jQuery. If you aren't able to upgrade, pass the success/error/complete handlers as methods of the options object (like in Tejs's example).

Solution 3

The jqxhr object is chainable from v1.5. Make sure you have this version or later.

Ref: jQuery 1.5 released, now with Deferred Objects