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");
}
});
Related
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');
});
}
});
}
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.
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()
The following code is alerting 'undefined' and not appending the html from the response data as I expected. Does anyone know why?
JavaScript:
$(function() {
$('.document').on('click', '.ajax', function(e) {
e.preventDefault();
// ajax request
$.ajax({
async: true,
cache: false,
type: 'post',
url: '/echo/html/',
data: {
html: '<p>This is echoed the response in HTML format</p>',
delay: 1
},
dataType: 'html',
beforeSend: function() {
console.log('Fired prior to the request');
},
success: function(data) {
console.log('Fired when the request is successfull');
$('.document').append(data);
},
complete: function() {
console.log('Fired when the request is complete');
}
});
});
});
HTML:
<div class="document">
<a class="ajax" href="#">Fire an AJAX request</a>
</div>
Example jsFiddle: http://jsfiddle.net/L6bJ2/3/
The HTTP method is specified with by type rather than method, so you should be using;
type: 'post',
Because you've specified the response type as HTML, you get a String passed in the data parameter of the success callback; but it looks like you're expecting JSON as you're trying to use data.html. Instead, use data directly;
success: function(data) {
console.log('Fired when the request is successfull');
$('.document').append(data);
},
With these changes, you'll find it works: http://jsfiddle.net/L6bJ2/6/
Live Example is here
https://stackoverflow.com/a/34940340/5361795
use beforeSend or complete callback functions in ajax call,
Source ShoutingCode
I'm trying to do a jquery GET and i want to send a parameter.
here's my function:
$(function() {
var availableProductNames;
$.get("manageproducts.do?option=1", function(data){
availableProductNames = data.split(",");;
alert(availableProductNames);
$("#nameInput").autocomplete({
source: availableProductNames
});
});
});
This doesn't seem to work; i get a null in my servlet when i use request.getParameter("option");
If i type the link into the browser http://www.myite.com/manageproducts.do?option=1 it works perfectly.
I also tried:
$.get(
"manageproducts.do?",
{option: "1"},
function(data){}
which doesn't work either.
Can you please help me?
EDIT:
also tried
$.ajax({
type: "GET",
url: "manageproducts.do",
data: "option=1",
success: function(msg){
availableProductNames = msg.split(",");
alert(availableProductNames);
$("#nameInput").autocomplete({
source: availableProductNames
});
}
});
Still getting the same result.
If you say that it works with accessing directly manageproducts.do?option=1 in the browser then it should work with:
$.get('manageproducts.do', { option: '1' }, function(data) {
...
});
as it would send the same GET request.
Try this:
$.ajax({
type: 'get',
url: 'manageproducts.do',
data: 'option=1',
success: function(data) {
availableProductNames = data.split(",");
alert(availableProductNames);
}
});
Also You have a few errors in your sample code, not sure if that was causing the error or it was just a typo upon entering the question.
I got this working : -
$.get('api.php', 'client=mikescafe', function(data) {
...
});
It sends via get the string ?client=mikescafe
then collect this variable in api.php, and use it in your mysql statement.
This is what worked for me:
$.get({
method: 'GET',
url: 'api.php',
headers: {
'Content-Type': 'application/json',
},
// query parameters go under "data" as an Object
data: {
client: 'mikescafe'
}
});
will make a REST/AJAX call - > GET http://localhost:3000/api.php?client=mikescafe
Good Luck.