I have the next function. My PHP script returns an array with element error with value 'ERR':
var updatePaymentType = function(plan_pt_id, pt_id){
var error = null;
var data = new Object()
data["function"] = "update";
data["payment_type_id"] = pt_id;
data["plan_payment_type_id"] = plan_pt_id;
data["data"] = $("#saveform").serializeArray();
$.ajax({
type: "POST",
url: "<?=ROOT_PATH?>/commission/plan/edit/id/<?=$this->editId?>",
data: data,
dataType: "json",
success : function (data)
{
error = data['error'];
alert(error); // All works. Output ERR
}
});
alert(error); // Not work. Output null
return error;
};
My function should returns an error. But it returns null.
Thank you very much.
AJAX requests are asynchronous, meaning the value isn't set until after you already returned (the success handler runs later, when the server responds with data).
To return the error type you have to make it synchronous with async: false like this:
$.ajax({
async: false,
type: "POST",
...
But this locks up the browser, it's better to call whatever uses the value from your success callback, like this:
success : function (data)
{
var error = data['error'];
functionThatTakesError(error);
}
Related
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 10 years ago.
Trying to run a script, (test.al();) and inside test.al, its called getcrypt.php();, the php script is on a webserver, and it is working. Currently, these are my scripts
JS
var getcrypt = {
php: function () {
$.ajax({
url: "server.com/return.php",
type: "POST",
async: true,
data: "id=getit",
success: function (msg) {
var v = msg.match(/^.*$/m)[0];
return v;
}
});
}
}
var test = {
al: function () {
a = getcrypt.php();
alert(a);
}
}
PHP
<?php
$id = $_POST['id'];
if ('getit' == $id){
$value = 'VALUE';
echo $value;
}else{
echo 0;
}
?>
In this way, it will show an alert with 'unidefined', and if i add a alert(v); right before return v, it will show me 'VALUE', but not able to use it outside the variable...
var getcrypt = {
php: function () {
$.ajax({
url: "server.com/return.php",
type: "POST",
async: true,
data: "id=getit",
success: function (msg) {
var v = msg.match(/^.*$/m)[0];
alert(v);
return v;
}
});
}
}
This will give me an alert with the correct value (AFTER THE 'undefined')
This is because of the asynchronous call you're making. The return is only for the success function and not for the php function.
To get the value out you would need to write:
var value;
var getcrypt = {
php: function (callback) {
$.ajax({
url: "",
type: "POST",
async: true,
data: "id=getit",
success: function (msg) {
var v = msg.match(/^.*$/m)[0];
alert(v);
callback(v);
}
});
}
}
getcrypt.php(function(v) {
alert(v);
// This happens later than the below
value = v;
});
// The below will still not work since execution has already passed this place
// alert will still return undefined
alert(value);
The problem is jQuery ajax works with callbacks and does not work with return value's so you need to add an callback to your getcrypt function so say
var getcrypt = {
php: function (callback) {
$.ajax({
url: "server.com/return.php",
type: "POST",
async: true,
data: "id=getit",
success: function (msg) {
var v = msg.match(/^.*$/m)[0];
callback(v);
}
});
}
}
so now if you call
getcrypt.php(function(returnVar){
alert(returnVar)
});
you will get an alert with VALUE
$.ajax returns immidiately (well, almost :)) upon calling, before the response is received. You should rewrite your code to accomodate to this fact, something like this;
var getcrypt = {
php: function(){
$.ajax({
//..other params ..//
success: function(msg){
var v = msg.match(/^.*$/m)[0];
alertResponse(v);
}
});
},
alertResponse: function(processedResponse) {
alert(v);
}
}
var test = {
al: function(){
getcrypt.php();
}
}
If you need your response in test object, you move alertResponse to that object and call it from success method. I think this tutorial might be useful for you to learn javascript event-driven programming model.
$.ajax calls are async. So what you get is the return value of $.ajax (when the request is sent, before a response is received). It is only when the browser receives a response to the ajax call that the success callback is run, as a seerate process from the $.ajax call. In other words the return value of $.ajax will always be null. I'm not sure it's possible to do anythging with the return value of the success callback, you need to put your logic (or a call to another function with the logic) in the success callback itself, in the same way you did with the alert in your final example
I have the following code which displays session data.The problem am facing is even if the session has value and the ajax get that data the alert that I have put below the function call getValFromSession(qes) always shows null data.I think this is due to the asynchronous execution of ajax with in the javascript.So I put some extra code as shown in the function
getValFromSession(qid).How can I overcome this asynchronous issue?
var qes=$('#qsid_'+q).val();
var res=getValFromSession(qes);
alert(res);//always shows null value
$('#select_'+).val(parseInt(res));
function getValFromSession(qid)
{
return $.ajax({
url : site_url_js+"controller/getValFromSession",
type : "POST",
data : "qid="+qid,
cache: false,
async: false
}).responseText;
}
/*controller*/
function getValFromSession()
{
echo $_SESSION['time'][$_REQUEST['qid']];
}
Try this:
var qes=$('#qsid_'+q).val();
var res=getValFromSession(qes);
function getValFromSession(qid)
{
$.ajax({
url : site_url_js+"controller/getValFromSession",
type : "POST",
data : "qid="+qid,
cache: false,
async: false,
success: function(data) {
alert(data); // alert here in successHandler
$('#select_'+).val(parseInt(data));
}
})
}
/*controller*/
function getValFromSession()
{
echo $_SESSION['time'][$_REQUEST['qid']];
}
Hope this helps.
$.ajax provides you with a success, error and complete callback handlers. Populate your response text in those handlers because the way you have implemented is synchronous and would execute immediately instead of after the request completes.
Docs
You can put your code into a function and call that function on success event of AJAX as below
---
---
return $.ajax({
url : site_url_js+"controller/getValFromSession",
type : "POST",
data : "qid="+qid,
false,
async: false,
success: finalfunction
---
---
function finalfunction(res)
{
alert(res);//always shows null value
$('#select_'+).val(parseInt(res));
}
The code I want to work:
$.ajax({
type: "POST",
url: "_Source/ajap/ajap.nlSrch.php",
data: { sndJson : jsonData },
dataType: "json",
processData: false,
success: function(html) {
$("#srchFrm").append(html);}
});
The code that works:
$.ajax({
type: "POST",
url: "_Source/ajap/ajap.nlSrch.php",
data: { sndJson : jsonData },
success: function(html) {
$("#srchFrm").append(html);}
});
Unfortunately when I send the first one my post data looks like this "Array ()" and when I use the later I get this "Array ( [sndJson] => [\"8\",\"3\",\"6\",\"7\"] )".
I know that there has to be a simple explanation but I haven't been able to figure it out.
Help please!
Try sending your data in a query string...
$.ajax({
type:"POST",
url:"_Source/ajap/ajap.nlSrch.php?json="+jsonData,
dataType:"json",
success: function(data) {
$("#srchFrm").append(data);}
error: function(xhr, ajaxOptions, thrownError)
{alert("Error!");}
});
You can use shorthand $.post instead of using low level ajax class --- because you don't need to advanced handling. So, this one will be great enough.
$(document.ready(function(){
$("#submit_button").click(function(){
$.post('php_script.php', {
// here's what you want to send
// important -- double quotes, 'cause It's evals as valid JSON
"var1" : "val1"
"var2" : "val2"
}, function (respond){
try {
var respond = JSON.parse(respond);
} catch(e){
//error - respond wasn't JSON
}
});
});
});
PHP code:
<?php
/**
* Here you can handle variable or array you got from JavaScript
* and send back if need.
*/
print_r($_POST); // var1 = val1, var2 = val2
?>
Back to your question,
Why my .ajax request doesn't work?
This is because JavaScript throws fatal error and stops further code execution.
You can catch and determine the error occasion, simply by adding
try {} catch(){} block to the statement you think may occur any error
When you specify dataType: json, jQuery will automatically evaluate the response and return a Javascript object, in this case an array. You're taking the result and adding it as html to #srchForm, so it does not make sense to convert it to a javascript object. Use dataType: html, or none at all.
http://api.jquery.com/jQuery.ajax/
The following examples above are not reusable. I am a huge fan of reuseable code. here is my solution.
Software design 101:
DRY Don't repeat your self. You should wrap your code into an object. This way you can call it from anywhere.
var Request = {
version: 1.0, //not needed but i like versioning things
xproxy: function(type, url, data, callback, timeout, headers, contentType)
{
if (!timeout || timeout <= 0) { timeout = 15000; }
$.ajax(
{
url: url,
type: type,
data: data,
timeout: timeout,
contentType: contentType,
success:function(data)
{
if (callback != undefined) { callback(data); }
},
error:function(data)
{
if (callback != undefined) { callback(data); }
},
beforeSend: function(xhr)
{
//headers is a list with two items
if(headers)
{
xhr.setRequestHeader('secret-key', headers[0]);
xhr.setRequestHeader('api-key', headers[1]);
}
}
});
}
};
Usage:
<script type="text/javascript">
var contentType = "applicaiton/json";
var url = "http://api.lastfm.com/get/data/";
var timeout = 1000*5; //five seconds
var requestType = "POST"; //GET, POST, DELETE, PUT
var header = [];
header.push("unique-guid");
header.push("23903820983");
var data = "{\"username\":\"james\"}"; //you should really deserialize this w/ a function
function callback(data)
{
//do logic here
}
Request.xproxy(requestType, url, data, callback, timeout, header, contentType);
</script>
So I have this javascript function, it sends an ajax requests to fetch a value from a php variable.
The function looks like so:
function get_cart_limit() {
$.ajax({
url: '/w2w/ajax/',
data: {
_action: 'get_cart_limit'
},
type: 'post',
timeout: 10000,
success: function(output) {
var cartlimit = output;
alert(cartlimit); // this gives me the correct value.
return cartlimit;
},
error: function(output){
}
});
}
When I call this function from another function like this:
var cartlimit = get_cart_limit();
my variable "cartlimit" is undefined.
So the ajax call is working, but why can't I return the value to another function?
To early for me, my brain isn't working properly! :)
Cheers!
If you change the scope of the cartlimit variable and disable Asynchronous request, get_cart_limit() should return the correct value
function get_cart_limit() {
var cartlimit;
$.ajax({
url: '/w2w/ajax/',
data: {
_action: 'get_cart_limit'
},
type: 'post',
timeout: 10000,
async: false,
success: function(output) {
cartlimit = output;
},
error: function(output){
}
});
return cartlimit;
}
The variable cart_limit is only set once the AJAX request successfully terminates.
Why?
The AJAX call is asynchronous, i.e. get_cart_limit() ends before the actual answer comes back from the server
The anonymous function that you specified as success: function(output) { /*...*/ } is called when the answer comes back from the server.
If you call another function that tries to access cart_limit before the success function has been executed, you will get an undefined value.
Even if you execute a return statement in the success function, it is a different function from get_cart_limit() and it gets executed at a different time, so you will not obtain the desired effect of assigning the return value to whatever variable.
One to solve this problem is to have the function that needs cart_limit be called by the anonymous success function.
function get_cart_limit() {
$.ajax({
url: '/w2w/ajax/',
data: {
_action: 'get_cart_limit'
},
type: 'post',
timeout: 10000,
success: function(output) {
var cartlimit = output;
alert(cartlimit); // this gives me the correct value.
function_that_needs_cart_limit();
},
error: function(output){
}
});
}
Declare this cartlimit with a global scope. Decalre this before the function starts
var cartlimit;
function get_cart_limit() {
$.ajax({
...................
Here your cartlimit will be declared only after the ajax function get success .
But execution of another scripts may take before this success. So it will get undefined
Your can pass your output data to the specified function like this
var cartlimit = get_cart_limit(output);
I have the following ajax call which executes successfully:
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var memberid = 'memberid='+ aData[6];
$.ajax({
type: "POST",
url: "shout.php",
data: memberid,
success: function(html) {
//$("#shout").html(html);
var sOut = html.returned_val;
}
});
return sOut;
}
If I remove the commented out line ($("shout").html(html) and use a div on my page, the results display fine. However, there is a second function which would use the HTML results from sOut and display accordingly in the proper position.
The PHP file in shout.php simply 'echos' HTML to the page (which is then returned and displayed accordingly.
I am unfortunately unable to set the variable sOut currently based on the results of my ajax call. What am I missing?
If you'd like your function to return what returns from the AJAX call, you need to make the call synchronously. Also, this is assuming the result of "shout.php" is plaintext. If it's JSON or otherwise, you need to set the dataType property in your call to $.ajax.
function fnFormatDetails ( oTable, nTr ) {
var aData = oTable.fnGetData( nTr );
var memberid = 'memberid='+ aData[6];
var result;
$.ajax({
type: "POST",
url: "shout.php",
data: memberid,
async: false,
success: function(data) {
result = data;
}
});
return result;
}
First of all you are defining sOut within a success callback method and therefore it would not be available to fnFormatDetails.
Secondly by default $.ajax works in async mode, therefore whenever "return sOut" is called, the success callback would have not executed !
I would suggest you to call some method from the success which would do the process based on the html.returned_val, or you can pass async:false in $.ajax to make that call synchronized.
thank you #Matt Huggins
async: false
this small code change, fixed the issue i was having since morning. :)