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;