jQuery AJAX call response WordPress
- SOLVED
I have a snippet of jQuery JS which I use to make an AJAX request back to the server within a WP Plugin and displays the result back into an element on the page (div#test) when the #myformButton is clicked :
// AJAX form submission
function option_get(button) {
$.post(
'http://domain.com/',
{
'setting1' : $("#setting1").val(),
'setting2' : $("#setting2").val(),
'setting3' : $("#setting3").val(),
'setting4' : $("#setting4").val(),
'setting5' : $("#setting5").val(),
},
function(data, textStatus) {
$('#test').html(data);
},
'text'
);
}
$('#myformButton').click(function() {
option_get();
});
<strong>How would I make a jQuery UI dialog box pop open if the server didn't respond?</strong>
Also, <strong>is there a way to make a dialog box with different text pop open if a particular chunk of text is returned? </strong>ie: if the returned text is "Error, data submitted is invalid", I'd like to be able to serve a corresponding dialog box to alert the user to the problem.
I can make a jQuery UI dialog box open on the page no problems at all. It's just figuring out how to make one pop open based on the result of the AJAX call which is confusing me.
Thanks :)
Answers (2)
Christianto answers:
Hi,
To invoke a function if error happen on ajax request, you can use [[LINK href="http://api.jquery.com/ajaxError/"]]jQuery.ajaxError API[[/LINK]], since the API will run each time there are error on ajax (all ajax request), you should specified your ajax url so only run on specific request error.
var ajax_URL = 'http://domain.com/ajax-url';
$( "div.log" ).ajaxError(function(e, jqxhr, settings, exception) {
if ( settings.url == ajax_URL ) {
// place the error dialog open method here
$('#Error-ID').dialog('open');
}
});
To make different box open when specific text return you just have to match the text in conditional statement inside $.post callback, the text return will be pass to callback (in your code 'data').
// AJAX form submission
function option_get(button) {
$.post(
'http://domain.com/',
{
'setting1' : $("#setting1").val(),
'setting2' : $("#setting2").val(),
'setting3' : $("#setting3").val(),
'setting4' : $("#setting4").val(),
'setting5' : $("#setting5").val(),
},
function(data, textStatus) {
if(data == 'first-text-return'){
// do first function
$('#first-box').dialog('open');
} else if(data == 'second-text-return'){
// do second function
$('#second-box').dialog('open');
}
},
'text'
);
}
$('#myformButton').click(function() {
option_get();
});
Hope this help..
Ryan Hellyer comments:
Yay! That second one worked perfectly. I now have irritating error messages popping up all over the place :)
I'll have a bash at your other suggestion shortly to see if that works.
John Cotton answers:
You could use the full ajax call to handle the errors and a switch statement to determine action on success:
$.ajax({
type: 'POST',
url: 'http://domain.com/',
data: {
'setting1' : $("#setting1").val(),
'setting2' : $("#setting2").val(),
'setting3' : $("#setting3").val(),
'setting4' : $("#setting4").val(),
'setting5' : $("#setting5").val(),
},
success: function(data, textStatus) {
switch(data) {
case 'sought-text-1':
// do something
break;
case 'sought-text-2':
// do something else
break;
default:
// do something othewise
break;
}
},
error: function(jqXHR, textStatus, errorThrown) {
// react to any error
// textStatus could be "null", "timeout", "error", "abort", or "parsererror"
},
dataType: 'html'
});
Ryan Hellyer comments:
That's a little beyond the scope of what I'd asked for, so thanks for the extra leads on improving things :)
Ryan Hellyer comments:
The "success" feature you added turned out to be the solution to another problem I'd been having :)