Help with JQuery post function

JavaScript
1

I’m trying to process a form with php via the jquery post function. The first part, with serializing the data is working. I’m alerting out the data and everything looks good. But I’m not getting a response back from php. To debug this I have tried just simply echoing back a text message and that is not even working. What am I doing wrong?

Here is my query:


$(document).ready(function(){
     
  $(".vote_btn").click(function() {                          
   
    var formData = $('#form').serialize();
    alert(formData); // this is alerting the correct info
    $.post('scripts/proc_form2.php', formData, processResponse);
  });

  function processResponse(data){
    alert(data); // the alert never triggers
  }
          
}); // end doc.ready

Here is the simplified php file


<?php
echo "made it to php and back!!!!";

?>
2

Is the URL okay? Depending on where you are on the website, you might have to change the URL of your script to [color=red]/[/color]scripts/proc_form2.php

Also, take a look at the Net(work) panel in Firebug / Chrome Development Tools to see what’s happening with the request (request headers, response headers, etc).

3

I tried both with and without the ‘/’ in front of scripts. The php file is in a script folder. The script folder is at the same level as the index file with the form. I think the path should be ok though because I can use the same path in the forms action attribute and the php runs.

I’m not really sure what to look for in the network panel. I really only use the elements and console panels. I see a post method with status 200 / ok is that what you mean?

4

That’s what I meant, yes. So that part seems to be okay as well. To be honest, I’m kinda stumped. The only think I can think of is that normally you don’t pass a function identifier but an anonymous function to $.post. I don’t think it’ll matter, but for arguments sake could you try the following?


$(document).ready(function() {
  $(".vote_btn").click(function() {
    var formData = $('#form').serialize();
    alert(formData); // this is alerting the correct info
    $.post('scripts/proc_form2.php', formData, function(data) {
        alert(data); // the alert never triggers
    });
  });
});

PS. I don’t know which jQuery version you’re on, but if you’re on >= 1.7 it’s more efficient to use $(document).on('click', '.vote_btn', function() {...}) instead of $('.vote_btn').click(function() {...});. This is known as event delegation. See for example http://mark-story.com/posts/view/speed-up-javascript-event-handling-with-event-delegation-and-bubbling for an explanation.

5

Thanks again for the help. I tried ur snipped of code and still no luck. I’m using jquery 1.7.2

6

Very weird. I’m clueless as to why that doesn’t work :-/
Someone else maybe? @paul_wilkins ; maybe?

7

No worries. I ended up not using query to process the form. I am still curious as to why though. But no need to spend any more time on my part. Thanks for your efforts though.