I need a help to understand how to export values from ajax fucntion and import that into a different function
example
function getlanlon(){
$.ajax({
type: "GET",
url: "{{URL::to('/')}}/getlatlng",
//data: {value: 0},
//async: true,
success: function(result){
console.log(result)
}
}, "json");
};
Now, We need to call this "result" into bellow function but does not work, the console.log always show undefined.
map.on('load', function () {
latlon= getlanlon()
console.log(latlon)
}
You need a callback or promise or deferred object:
function getlanlon(callback){
$.ajax({
type: "GET",
url: "{{URL::to('/')}}/getlatlng",
//data: {value: 0},
//async: true,
success: function(result){
if(callback){
callback(result);
}
console.log(result)
}
}, "json");
};
map.on('load', function () {
getlanlon(function(latlon){
console.log(latlon)
})
}
Or using Deferred object.
function getlanlon(){
var deferred = $.Deferred();
$.ajax({
type: "GET",
url: "{{URL::to('/')}}/getlatlng",
//data: {value: 0},
//async: true,
success: function(result){
deferred.resolve(result);
console.log(result)
}
}, "json");
return deferred;
};
map.on('load', function () {
getlanlon()
.then(function(latlon){
console.log(latlon);
})
})
}
Related
I am trying to call function within ajax success block which is not happening.
Below I have given code which i was tried.
$("#form-data").submit(function(e) {
e.preventDefault();
var me = this;
$.ajax({
type: "POST",
url: "{{route('storeData.store')}}",
data: fd,
processData: false,
contentType: false,
success: function(data) {
me.callFunc(); // here i need to call that fucntion once data is stored in database
}
});
})
$(document).ready(function(e) { // here i need to call that fucntion when page loads
this.callFunc();
})
function callFunc() { // this is the function needs to call
$.ajax({
type: "GET",
url: "{{route('getData.get')}}",
success: function(data) {
console.log("output data", data)
}
})
}
Call your "callFunc()" without me / this as per below.
$("#form-data").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "{{route('storeData.store')}}",
data: fd,
processData: false,
contentType: false,
success: function(data) {
callFunc(); // here i need to call that fucntion once data is stored in database
}
});
})
$(document).ready(function(e) { // here i need to call that fucntion when page loads
callFunc();
})
function callFunc() { // this is the function needs to call
$.ajax({
type: "GET",
url: "{{route('getData.get')}}",
success: function(data) {
console.log("output data", data)
}
})
}
You don't have to use this
$(document).ready(function (e) {
function callFunc() { // this is the function needs to call
$.ajax({
type: "GET",
url: "{{route('getData.get')}}",
success: function (data) {
console.log("output data", data)
}
})
}
$("#form-data").submit(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "{{route('storeData.store')}}",
data: fd,
processData: false,
contentType: false,
success: function (data) {
callFunc(); // here i need to call that fucntion once data is stored in database
}
});
});
callFunc(); // here i need to call that fucntion when page loads
});
Your function is globally available so just call it like any other javascript function inside any other function
callFunc()
Jquery Ajax Loading not working with async
Code below
$('#pagination').on('click','a',function(e){
e.preventDefault();
var data = $(this).attr('data-pagination-page');
var selector=$('.frmTable');
var response=getData(selector,data);
});
Ajax Function
function getData(selector,data){
var result="";
var frmAction=$(selector).attr('action');
$.ajax({
url: frmAction+'/'+data,
type: 'post',
data: $(selector).serialize(),
async: false,
beforeSend: function(){
console.log("Request Submiting....");
$('#loading').css('display','block');
},
success: function(response){
result = response;
},
complete:function(data){
$('#loading').css('display','none');
console.log("Request Complete....");
}
});
return result;
}
Can you provide me suggestion how deal with ajax loading icon.
Using setTimeout problem is solve
function getData(selector,data){
var result="";
var frmAction=$(selector).attr('action');
$.ajax({
url: frmAction+'/'+data,
type: 'post',
data: $(selector).serialize(),
async: false,
beforeSend: function(){
console.log("Request Submiting....");
$('#loading').css('display','block');
},
success: function(response){
result = response;
},
complete:function(data){
console.log("Request Complete....");
setTimeout(function(){
$('#loading').css('display','none');
}, 500);
}
});
return result;
}
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 7 years ago.
// AjaxHandler
function AjaxHandler(url, dataContent){
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
data: dataContent,
async: true,
cache: false,
success: function(obj){
console.log(obj);
return obj;
}
});
}
$("#button").click(function(){
AjaxHandler( "http://xxxxxx/yyyyyy.api", "some data" );
alert(obj);
});
If I can get object data from called function "AjaxHandler".
How do I use this object data??I try to alert obj but show not define.
I can print obj data in console in function AjaxHandler. So the data is there.
I just don't know how to use it after called function.
Since AJAX is asynchronous, you cannot "return" a variable. You can however send it to the next function to process the data.
function AjaxHandler(url, dataContent){
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
data: dataContent,
async: true,
cache: false,
success: function(obj){
console.log(obj);
processAjax( obj );
}
});
}
function processAjax( obj ) {
alert(obj);
}
$("#button").click(function(){
AjaxHandler( "http://xxxxxx/yyyyyy.api", "some data" );
});
Try by success in ajax:
// AjaxHandler
function AjaxHandler(url, dataContent){
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
data: dataContent,
async: true,
cache: false,
success: function(obj){
console.log(obj);
return obj;
},
success(function() {
(function() {
alert( "success" );
})
})
});
}
$("#button").click(function(){
AjaxHandler( "http://xxxxxx/yyyyyy.api", "some data" );
});
As the $.ajax method returns a promise, you can do the following:
function AjaxHandler(url, dataContent){
return $.ajax({
url: url,
type: 'POST',
dataType: 'json',
data: dataContent,
async: true,
cache: false,
success: function(obj){
return obj;
}
});
}
$("#button").click(function(){
AjaxHandler( "http://xxxxxx/yyyyyy.api", "some data" )
.then(function (obj) {
console.log(obj);
});
});
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 8 years ago.
I have a container method for an ajax request:
function postRating(formData) {
$.ajax({
type: "POST",
url: '/api/ratings',
data: formData
})
.done(function () {
return true
})
.fail(function () {
return false
})
.always(function (msg) {
//console.log(msg);
});
}
which is called like so:
$('.episode-rating.like').click(function () {
var formData = $("#episode-rating").serializeArray();
formData.push({name: 'up', value: 1}, {name: 'down', value: 0});
console.log(postRating(formData))
});
However postRating() returns undefined. Not sure what I'm doing wrong. I want to do some html processing if the ajax request is successfull and show an error otherwise.
It is async, as mentioned above, so use callback:
function postRating(formData, cb) {
$.ajax({
type: "POST",
url: '/api/ratings',
data: formData
})
.done(function () {
cb(true);
})
.fail(function () {
cb(false);
})
.always(function (msg) {
//console.log(msg);
});
}
And then:
postRating(formData, function(result){
console.log(result);
})
Or you can use promises:
function postRating(formData, cb) {
return $.ajax({
type: "POST",
url: '/api/ratings',
data: formData
});
}
and then:
postRating(formData)
.done(function(){
console.log(true);
})
.fail(function(){
console.log(false);
});
This is an async call. If you want you can make your ajax call sync and then you can return from the container, otherwise you would have to implement callbacks on the container, which are invoked upon success, error and complete.
// Async = false
function postRating(formData) {
return $.ajax({
type: "POST",
url: '/api/ratings',
data: formData,
async: false
});
}
// Callbacks
function postRating(formData, successCallback) {
$.ajax({
type: "POST",
url: '/api/ratings',
data: formData,
success: function (data) {
successCallback.apply(this, [data]);
}
});
}
This AJAX works on jsfiddle
var a = $.ajax({
url: "/echo/json/",
type: "post",
data: {
json: JSON.stringify({
a: true
})
},
dataType: "json"
});
a.done(function (data) {
console.log(data);
});
Why won't it work when I make a the function and return the AJAX promise?
var a = function () {
return $.ajax({
url: "/echo/json/",
type: "post",
data: {
json: JSON.stringify({
a: true
})
},
dataType: "json"
});
}
a.done(function (data) {
console.log(data);
});
Is this not the correct syntax? Well, apparently not, but how can I build the AJAX request into the function? FIDDLE
Since a is a function, you have to call it:
a().done(function(data) {
console.log(data);
});