1

I've used this basic, simplified ajax script a hundred times already, now I've been working my brains out what is wrong with it this time, why I get no response:

$('#btn-submit').click(function() {

var str = $("#form-submit").serialize();
alert(str); //alert pops up

$.ajax({
  type: "POST",
  url: "ajax-submit.php",
  data: str,
  success: function(msg) {
      alert(msg); //does not show
      if(msg==0) {
            alert(0); //does not show
          }
      }
});

alert('i come after ajax'); //alert pops up
});

jQuery files inlcuded before this script, and path is right (double checked and there is no error in firebug).

Also the path to ajax-submit.php is OK, the content is <?php echo "test"; ?>.

Has anybody an idea why this does not work?

Helmut
  • 1,377
  • 1
  • 15
  • 25
  • What happens when you debug this in something like FireBug? Is the request sent to the server? How does the server respond? If the request isn't sent, step through the code and find out if it's even getting to that point. – David Sep 28 '12 at 19:01
  • @david: the console in firebug does not say anything... it is just empty – Helmut Sep 28 '12 at 19:07
  • @j08691: like said, console in firebug does not say anything... – Helmut Sep 28 '12 at 19:07
  • 1
    @Helmut:check the net tab,too, and click on persist, so your ajax calls and their responses don't get lost along the way. As soon as you see the request being sent, check the headers and double check the path it's being sent too, check the actual data that is being sent, and add an `error` callback to the ajax call,just to be safe – Elias Van Ootegem Sep 28 '12 at 19:08
  • What about the network tab of the dev tools? Does it show the request being sent and anything coming back? – j08691 Sep 28 '12 at 19:09
  • try adding error block and check.. error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); } – Amitd Sep 28 '12 at 19:13
  • @EliasVanOotegem: thx Elias, did that.. nothing (xhr) shows in the net-tab either... I've added an `alert(1)` to the `error` callback, it fires... what can I do to get more details about why? – Helmut Sep 28 '12 at 19:15
  • @Amitd: the first alert shows `0` the second one is empty - what does it mean? – Helmut Sep 28 '12 at 19:17
  • are both your webpages on the same server?read more here.. http://stackoverflow.com/questions/5005960/xmlhttprequest-status-0-responsetext-is-empty – Amitd Sep 28 '12 at 19:21
  • @Amitd: thx, yes, even same folder... – Helmut Sep 28 '12 at 19:22
  • hmm strange.. are they placed or deployed on a webserver? – Amitd Sep 28 '12 at 19:25
  • sorry to all... just found out the really stupid mistake (see my own answer below...) thank you to everyone for the help! – Helmut Sep 28 '12 at 19:29
  • in the error callback, do `console.log(arguments)` – Kevin B Sep 28 '12 at 19:30

1 Answers1

0

I finally found the really stupid mistake: I used type="submit" for the button, so the form got submitted each time before the ajax could be called...

Helmut
  • 1,377
  • 1
  • 15
  • 25
  • 5
    To be more consistent, you should use `type="submit"`, then bind the submit event of the `
    ` [with `event.preventDefault()` in order not to refresh the page], and not just a button.
     – moonwave99 Sep 28 '12 at 19:33
  • @moonwave99: oh, thank you for that tip! will consider this in the future, thx! – Helmut Sep 28 '12 at 20:13
  • @moonwave99 nice point.. but what if one wants to submit the form? need different button? – Amitd Sep 30 '12 at 07:20
  • You handle the submission in the js callback. – moonwave99 Sep 30 '12 at 16:45