I am not getting whats wrong with my ajax code - ajax

Its displaying error missing : after property id
$.ajax({
url:"save.php",
data:"param="+escape(name),
dataType:"html",
cache:"false",
success(result){
$(".right").html(result);
}
});

success is a property you can assign your callback function to, like:
$.ajax({
url:"save.php",
data:"param="+escape(name),
dataType:"html",
cache:"false",
success: function(result){
$(".right").html(result);
}
});

This is the correct syntax for the success() callback:
success: function() { ... }

Related

Simple wordpress ajax query is not working

Do you have any idea why this simple wp ajax query is not working? It always returns fail. Console -> https://pastebin.com/TABQCjXe
jQuery(document).ready(function($) {
// This does the ajax request
$.ajax({
type: 'post',
url: ajaxurl,
data: {
'action':'prefix_load_cat_posts'
},
success:function(data) {
// This outputs the result of the ajax request
console.log(data);
$( ".prefix_load_cat_posts" ).append("success");
},
error: function(errorThrown){
console.log(errorThrown);
$( ".prefix_load_cat_posts" ).append("fail");
}
});
});
PHP -> https://pastebin.com/g4QiWDky
The action should be load-filter instead of prefix_load_cat_posts. Seeing your PHP code, the prefix_load_cat_posts is actually the callback function name.
data: {
'action':'load-filter'
},
There is another alternate option. I am agree with samuel but i am sharing one more option
add_action( 'wp_ajax_nopriv_prefix_load_cat_posts', 'prefix_load_cat_posts' );
add_action( 'wp_ajax_prefix_load_cat_posts', 'prefix_load_cat_posts' );
Your action it's 'load_filter', Also you are must be localize ajaxurl use this function wp_localize_script
$.ajax({
type: 'post',
url: ajaxurl,
data: {
'action':'load-filter'
},
success:function(data) {
// This outputs the result of the ajax request
console.log(data);
$( ".prefix_load_cat_posts" ).append("success");
},
error: function(errorThrown){
console.log(errorThrown);
$( ".prefix_load_cat_posts" ).append("fail");
}
});

Ajax .done function is executing before success in Laravel project

The alert from done function is executing before success. Please help me. What am I doing wrong here:
function load_organization()
{
return $.ajax({
url: '/partials/structure',
method: "GET",
data: {id:id},
success: function (data) {
$(data.organizations).each(function(index, organization) {
$("#organization").append(new Option(organization));
});
}
});
}
$(document).ready(function(){
load_organization().done(function(){
alert('Success');
});
});
"Done" is a callback triggered from a running XHR instance with jQuery.
The doc says:
jqXHR.done(function( data, textStatus, jqXHR ) {});
An alternative construct to the success callback option, refer to deferred.done() for implementation details.
Take a look:
function load_organization()
{
$.ajax({
url: '/partials/structure',
method: "GET",
data: {id:id},
success: function (data) {
$(data.organizations).each(function(index, organization) {
$("#organization").append(new Option(organization));
});
}
})
// Use done here -> look official API doc for some explanations: http://api.jquery.com/jQuery.ajax/
.done(function(){
alert('Success');
});
}
$(document).ready(function(){
load_organization();
});
Hope this could help you in your solution
You are executing alert('Success'); when load_organization() is called. so irrespective of ajax, the message is displaying. You can alert the success in same single function. And .done() has only one callback and it is the success callback.
function load_organization()
{
return $.ajax({
url: '/partials/structure',
method: "GET",
data: {id:id},
success: function (data) {
$(data.organizations).each(function(index, organization) {
$("#organization").append(new Option(organization));
alert('Success');
});
}
});
}

ajax GET request neihter success nor failure executing

I have the following ajax request:
function getDetails()
{
$.ajax({
type: 'GET',
url: 'http://xxxxxx/get_determined_prize.php',
success: function(result)
{
alert(result);
},
fail: function()
{
console.log("Failure!!");
}
});
}
which calls the following php file containing the following code:
<?php
echo "5";
?>
can someone pinpoint what is the problem with my code? when i debugged the javascript method, during the execution of the ajax request, both the success and failure methods where skipped.
Please follow the link and try this
http://api.jquery.com/jQuery.ajax/
var request= $.ajax({
type: 'GET',
url: 'http://url/get_determined_prize.php',
success: function(result)
{
alert(result);
}
});
request.fail( function()
{
console.log("Failure!!");
});
jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
An alternative construct to the error callback option, the .fail() method replaces the deprecated .error() method. Refer to deferred.fail() for implementation details.

How to use an ajax call's response to manipulate a dynamic page?

I am trying to submit a form with the user's inserted data and get the html back from the page called (update.asp).
How do I get the html response and how do I write it to a div on the page? The response would be "success".
If my page throws a 500 or other type of error, how can I handle that?
$('input#btnUpdate').click( function() {
$.ajax({
url: 'update.asp',
type: 'post',
dataType: 'json',
data: $('form#myForm').serialize(),
success: function(data) {
// how do i catch the response? is this the right place?
},
error: function(data) {
// how do I catch the error code here?
}
});
The response from the server in both cases would be passed to the callback as the data variable in your example. Try using console.log(data) inside of your callbacks to see the result in your developer console.
$('input#btnUpdate').click( function() {
$.ajax({
url: 'update.asp',
type: 'post',
dataType: 'json',
data: $('#myForm').serialize(),
success: function(response) {
$("#yourDIV").html(response);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError); //output, 500
}
});
});
More on this: ajax()

How do I know if a JSON string has loaded?

Forgive me, I am a complete JSON newbie here. I'm trying to load a file of json information from an external file, and I'm not sure how I can tell if the information has loaded or not. Here's what I have so far:
$(document).ready(function(){
$.ajax({
dataType: 'json',
success: function(string) {
data = $.parseJSON(string);
console.log(data);
alert(data);
document.write(data);
},
url: 'http://www.site.com/mystuff.php'
});
});
I've tried putting all kinds of stuff to see if the info has loaded, as you can see, and nothing has. How do I know if I've even gotten anything? I would really appreciate any help!
As already pointed out, two things:
You don't need to parse the string when setting the datatype as JSON
Check if the request returned successfully at all
Which could look like this:
$(document).ready(function(){
$.ajax({
dataType: 'json',
success: function(json) {
console.log(data);
},
error : function(xhr, text) {
console.log('An error occurred', xhr, text);
},
url: 'http://www.site.com/mystuff.php'
});
});
When setting the datatype to JSON you also have to make sure that mystuff.php sets the Content-Type header to application/json:
<?php
header('Content-Type: application/json');
?>
No need to parse to json again.. you can directly use the object
Also add the error Function to keep a check if you are getting any error..
$(document).ready(function(){
$.ajax({
dataType: 'json',
beforeSend : function() {
console.log('Before Ajax Request Starts !!');
},
success: function(data) {
console.log(data);
alert(data);
document.write(data);
},
error : function(jqXHR, textStatus, errorThrown) {
alert("Error occurred: " + errorThrown);
},
beforeSend : function() {
console.log('Ajax Request Complete !!');
},
url: 'http://www.site.com/mystuff.php'
});
});
This makes sure you have feedback at every step..

Resources