1

I'm trying to get my head around ajax requests in Wordpress and am finding it hard to understand. Basically I have a form that has a number of steps and you move through these requests using ajax, posting the data each time and hiding and showing the div for the different steps that generally have form fields. Currently have a form that is executed in a plugin with a shortcode. This makes a ajax request in the following way:

function callAjaxsubmit() {
  $("#form").serialize();
  $.ajax({
     type: "POST",
     url: "/confirm.php",
     data: $("#confirm").serialize(),
     success: function(data) {
         $( ".page-error-message" ).remove();
         $("#step3").html(data); 
         $("#step2").empty(data);
         $('html, body').animate({ scrollTop: 0 }, 'slow');
     }
  });
  return false;
}

I am trying to do this in the frontend, I have looked at this: http://codex.wordpress.org/AJAX_in_Plugins and many tutorials but just not sure how to apply that to this. I guess I need to call a function rather then a url?

Update: well, got it triggering the fucntion now, though having problems with the post data. I have a lot of fields and before I was doing toe ajax the proper wordpress way i was using serialize() to get all form data, but that doesn't seem to work properly, it seems to output it into one long string. is there a special way to serialize() the post data?

Update2: sorted the serialize issue with the following:

var formData =  'action=wordpress_function&' + jQuery("#form").serialize();
  jQuery.ajax({
    type: "POST",
    url: MyAjax.ajaxurl,
    data: formData,
        success: function(data) {  
            //do stuff
        }
  });
  return false;
2

In Wordpress Ajax works this way:

First, you register the ajax action and the function you want to use to serve that action, of course, you have to write that function.

All the request go to the same URL wp-admin/admin-ajax.php, what it changes is the action, and depending on the action, a different function is called.

The function you call, returns the result, which you get as the response in the ajax request.

If you have any doubts of any step just ask.

  • Hi, so when you say first you register the ajax action is that the form as well as the ajax javascript? So you put the html and javascript in a fucntion? – David Aug 15 '14 at 9:27
  • You can put the HTML in the functon, it echoes the HTML you want to retrieve. But the javascript isn't included as it's used to make the ajax call in the client-side. All you do in Wordpress with Javascript is adding the file when you generate the page where the AJAX call is going to be done. You can add the file or print it as an inline script. And that script is the one you posted in your question, it's lacking a "action" propery in the data object, as that action is used by wordpress to determine which function should be called to generate the response to that request. – Tomás Cot Aug 15 '14 at 11:31
  • ok cool, think I got it now, though when I make the request it returns a 0 which is what I get if I navigate to the wp-admin\/admin-ajax.php url, so assuming it's not getting my request. Based what I wrote on: inkthemes.com/how-to-use-ajax-in-wordpress-for-data-insertion/… what I'm trying to do is pass some post values using ajax from a form to another form that I load in the function. In the functuion that I'm passing the post values to can I load html? My plugin excutes on a page via a shortcode. – David Aug 15 '14 at 13:33
  • well, got it triggering the fucntion now, though having problems with the post data. I have a lot of fields and before I was doing the ajax the proper wordpress way i was using serialize() to get all form data, but that doesn't seem to work properly, it seems to output it into long one string. is there a special way to serialize() the post data? – David Aug 15 '14 at 15:07
  • @David did you solve the problem? I just read this comment, sorry – Tomás Cot Aug 17 '14 at 22:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.