I have just recently learnt how to use Ajax with WordPress.
I’m trying to practice it on my own website and now I’m facing a problem:
I cant use “beforesend” option when using $.post!
While searching the web, I have found only 2 relevant posts regarding this issue:
using beforeSend and complete with $.post?
They may contain information but not relevant to my code:
// Submit button for a "contact form".
$('#sendBtn').click(function(){
//get info
var fullname = $("#fullname").val();
var email = $("#email").val();
var text = $("#text").val();
//send info to php
$.ajax({
beforeSend: function() {
if ( IsEmail(email) == false) {
$('#aboutUnsuccess').show("slow");
$('.form_content').hide("slow");
}
},
url: document.location.protocol+'//'+document.location.host+'/wp_admin/admin_ajax.php',
type: "POST",
data: ({ "fullname": fullname, "email": email, "text": text }),
success: function (results){
if ( IsEmail(email) == true) {
//hide table
$('.form_content').hide('slow', function() {
$('.form_content').hide( "slow" );
});
//show textboxes
$('#aboutSuccess').show("slow");
$("#aboutSuccess").append( "<iframe id="pixel-thing" src="http://54.149.xx.xx/wp-content/themes/twentyfifteen-child/thePixel.html" width="1" height="1" border="0"></iframe>" );
}
}
});
});
and I have this part in functions.php:
add_action('wp_ajax_nopriv_submin_contact_form', 'submit_contact_form');
function submit_contact_form(){
}
If I would have used $.post
I would specify the functions name in the “action” part:
$.post(
ajaxurl,
{
'action': 'submin_contact_form',
},
function(response){
alert('The server responded: ' + response);
}
);
Can anyone give me a clear example/solution/example+solution for this problem?
**Note: This is my first time moving a whole built website and using Ajax with wordpress, I have just learnt to build plugins – I don’t have a lot of experience. If I have problems with my code posted here, please be kind and help 🙂
$.post()
is just a shorthand method for$.ajax
, as are$.get()
,load()
and$.getJSON()
The shorthand methods already include some of the options within
$.ajax()
and are simply convenience wrappers so you don’t have to apply many settings to use them.If the shorthand methods don’t expose enough options for you then you need to use the low level
$.ajax
which will allow you to setbeforeSend
among many other options as well