The use case would be if the response it gets isn't what it wanted it can call itself again.
$.post(qrLoginAjax.ajaxurl, {
userID : '11234324'
},function( response ) {
if (response.userID != 'undefined'){
//do stuff
} else {
// call $.post again
}
});
How would I do that?
Thanks
You could do something like this:
var sendAjax = function() {
$.post('/foo', function(result) {
if (response.userID != 'undefined') {
// do stuff
} else {
// resend the AJAX request by calling the sendAjax function again
sendAjax();
}
});
};
sendAjax();
But sending AJAX requests like this seems like a bad design decision in my opinion. You should ensure that you don't get into an infinite recursion by using for example a number of retries counter.
You can make it a function, and call itself. For example with $.ajax, you can do this:
function do_stuff(){
$.ajax({
url: 'ajax.php',
success: function(data){
// Stuff
},
error: function(){
do_stuff();
}
});
}
This is the general principle of a recursive function, but it is highly recommended that you test conditions or set a maximum number of tries so it doesn't get stuck in an infinite loop.
Use this keyword of Javascript. As we all know, that refers to the object it belongs to. For example:
$.post(qrLoginAjax.ajaxurl,
{
userID : '11234324'
},
function( response ) {
if (response.userID != 'undefined') {
//do stuff
}
else {
$.post(this);
}
}
);
Related
I do not know if my title was perhaps a little misleading. But here's what I really need help with.
I'm making a get on this url:
$.get("/fb/login/"+fbEmail, function(data){
console.log(data);
});
This is my routes:
GET /fb/login/:email presentation.controllers.Auth.authenticateSocialNetwork(email:String)
And here's my action:
def authenticateSocialNetwork(email:String) = Action {
if(!editorRepo.getEditorByEmail(email).isEmpty){
Redirect(routes.Profile.editorProfile).withSession(Security.username -> email)
} else {
Redirect(routes.Profile.initiatorProfile).withSession(Security.username -> email)
}
}
My expectation from this is that my action gets called and fires of what's inside it. In other words, Redirecting.
But what actually happens, which is not so illogical, is that my $.get call gets a response with my redirect's.
How do I actually call my action-method, without sending a response to javascript?
Here's my function in javascript, posting this snippet for it to be more clear in our discussion in the comments above.
function addClickToLoginButtons(){
$("#loginWithFb").click(function(){
FB.login(function(response){
if(response.authResponse){
FB.api('/me', function(response){
var fbEmail = response.email;
$.get("/fb/isRegisteredAtNetwork/"+fbEmail+"/facebook", function(data){
if(data == "true"){
if(confirm("Do you want to log with facebook-account "+fbEmail+"?")){
$.get("/fb/login/"+fbEmail, function(data){ *//HERE'S WHERE I WOULD WANT TO CALL MY METHOD IN SCALA*
console.log(data);
});
} else {
console.log("try again with a different facebook-account");
} //end confirm else
} else {
console.log("Logged in not in database");
}//end get else
});
});
} else {
console.log("permission not granted");
} // end authResponse else
}, {scope: 'email'});
});
}
In your action, instead of returning Redirect, return Ok(urlToBeRedirectedTo).withSession(...). Once this response received in the javascript code, do your stuff and then call window.location = urlToBeRedirectedTo;.
This will add the email to the session, and will redirect to the wanted URL.
I have a situation where in I m doing a number of AJAX calls using jquery and in turn returning JSON data from those calls into some variables on my page.
The issue is that the Ajax call takes a little time to get processed and in the mean time my control shifts to next statement where I intend to use the output of AJAX call.
Since the call takes time to return the data I am left with empty object that fails my function.
is there any way where I can wait for the finish of AJAX call to happen and proceed only when the result is returned from the call???
so this is my code where in I am trying to return transactionsAtError to some other jquery file where the control shifts to next statement before this call gets executed
this.GetTransactionAtErrors = function (callback) {
var transactionsAtError;
$.ajax({
url: ('/Management/GetTransactionsAtError'),
type: 'POST',
cache: false,
success: function (result) {
if (result && callback) {
transactionsAtError = (typeof (result) == "object") ? result : $.parseJSON(result);
}
}
});
return transactionsAtError;
}
Assuming you are using jQuery's $.getJSON() function, you can provide a callback function which will be executed once the data is returned from the server.
example:
$.getJSON("http://example.com/get_json/url", function(data){
console.log("the json data is:",data);
});
EDIT:
After seeing the code you added i can see what's your problem.
Your return transactionsAtError; line runs independently of the ajax call, i.e it will run before the ajax is complete.
you should just call your callback inside your success: function.
example:
this.GetTransactionAtErrors = function (callback) {
$.ajax({
url: ('/Management/GetTransactionsAtError'),
type: 'POST',
cache: false,
success: function (result) {
if (result && callback) {
var transactionsAtError = (typeof (result) == "object") ? result : $.parseJSON(result);
callback(transactionsAtError);
}
}
});
}
When you have your result in scope you can check wait for ongoin ajax calls to finish by using es6 promise:
function ajaxwait()
{
return(new Promise(function(resolve, reject) {
var i = setInterval(function() {
if(jQuery.active == 0) {
resolve();
clearInterval(i);
}
}, 100);
}));
}
You can use this like.
ajaxwait().then(function(){ /* Code gets executed if there are no more ajax calls in progress */ });
Use an es6 shim like this https://github.com/jakearchibald/es6-promise to make it work in older browsers.
I need to retrieve data via cross-domain XMLHttpRequest. To make this work in (almost) all browsers, I use native XHR first and, if that fails, flXHR.
The (working) code I currently have for this is as follows:
jQuery.support.cors = true; // must set this for IE to work
$.ajax({
url: 'http://site.com/dataToGet',
transport : 'xhr',
success: function(data) {
console.log('Got data via XHR');
doStuff(data);
},
error: function(xhr, textStatus, error) {
console.log('Error in xhr:', error.message);
console.log('Trying flXHR...');
$.ajax({
url: 'http://site.com/dataToGet',
transport : 'flXHRproxy',
success: function (data) {
console.log('Got data via flXHR');
doStuff(data);
},
error: function (xhr, textStatus, error) {
console.log('Error in flXHR:', error.message);
console.log('Both methods failed, data not retrieved.');
}
});
}
});
This feels like a lot of code duplication to me, especially in the success handlers. Is there a more efficient way to do this? I'd really prefer to make one $.ajax call that would try both transports in turn, instead of having to use the error handler to make the call a second time. It's not too bad in this example, but rapidly gets more complicated if the success handler is longer or if the success handler has to itself issue another $.ajax call.
I've created a jquery-specific and slimmed-down fork of flxhr that simplifies your code sample above. You can see an example of usage in the "Usage" section in the README.
https://github.com/b9chris/flxhr-jquery-packed
In particular, you don't want to waste time waiting for a standard CORS request to fail. It's easy to determine whether flxhr is necessary by testing $.support.cors upfront (no need to override it). Then just use flxhr explicitly where necessary.
Why don't you just wrap this in a function by itself? That's after all, how you end up reusing code. You can even pass functions as arguments to make sure that you don't have to repeat this code more than once.
To me this is pretty straight forward but maybe I've misunderstood.
function xhr(success) {
$.ajax({
success: success,
error: function() {
$.ajax({ success: success })
}
});
}
Then just pass the success handler once
xhr(function(data){/*magic*/});
Or if you wanna basically avoid redundant configuration of the ajax call use the first object as a template, like this:
function xhr(success) {
var ajaxParams = { success: success };
ajaxParams.error = function() {
$.ajax($.extend(ajaxParams, { transport: 'xhr' }));
}
$.ajax(ajaxParams);
}
I simplified the whole thing a bit, but I hope you get the point.
Edit
Reading that last bit, maybe this will give you some ideas... it's a variation of that last snippet.
function xhr(success) {
var ajaxParams = { success: success };
ajaxParams.error = function() {
var newParams = $.extend(ajaxParams, { transport: 'xhr' });
newParams.success = function() {
// do something
// arguments is a special array, even if no parameters were
// defined in any arguments where passed they will be found
// in the order they were passed in the arguments array
// this makes it possible to forward the call to another
// function
success.apply(this, arguments);
}
$.ajax(newParams);
}
$.ajax(ajaxParams);
}
Hey. I need some help with jQuery Ajax calls. In javascript I have to generste ajax calls to the controller, which retrieves a value from the model. I am then checking the value that is returned and making further ajax calls if necessary, say if the value reaches a particular threshold I can stop the ajax calls.
This requires ajax calls that need to be processes one after the other. I tried using async:false, but it freezes up the browser and any jQuery changes i make at the frontend are not reflected. Is there any way around this??
Thanks in advance.
You should make the next ajax call after the first one has finished like this for example:
function getResult(value) {
$.ajax({
url: 'server/url',
data: { value: value },
success: function(data) {
getResult(data.newValue);
}
});
}
I used array of steps and callback function to continue executing where async started. Works perfect for me.
var tasks = [];
for(i=0;i<20;i++){
tasks.push(i); //can be replaced with list of steps, url and so on
}
var current = 0;
function doAjax(callback) {
//check to make sure there are more requests to make
if (current < tasks.length -1 ) {
var uploadURL ="http://localhost/someSequentialToDo";
//and
var myData = tasks[current];
current++;
//make the AJAX request with the given data
$.ajax({
type: 'GET',
url : uploadURL,
data: {index: current},
dataType : 'json',
success : function (serverResponse) {
doAjax(callback);
}
});
}
else
{
callback();
console.log("this is end");
}
}
function sth(){
var datum = Date();
doAjax( function(){
console.log(datum); //displays time when ajax started
console.log(Date()); //when ajax finished
});
}
console.log("start");
sth();
In the success callback function, just make another $.ajax request if necessary. (Setting async: false causes the browser to run the request as the same thread as everything else; that's why it freezes up.)
Use a callback function, there are two: success and error.
From the jQuery ajax page:
$.ajax({
url: "test.html",
context: document.body,
success: function(){
// Do processing, call function for next ajax
}
});
A (very) simplified example:
function doAjax() {
// get url and parameters
var myurl = /* somethingsomething */;
$.ajax({
url: myurl,
context: document.body,
success: function(data){
if(data < threshold) {
doAjax();
}
}
});
}
Try using $.when() (available since 1.5) you can have a single callback that triggers once all calls are made, its cleaner and much more elegant. It ends up looking something like this:
$.when($.ajax("/page1.php"), $.ajax("/page2.php")).done(function(a1, a2){
// a1 and a2 are arguments resolved for the page1 and page2 ajax requests, respectively
var jqXHR = a1[2]; /* arguments are [ "success", statusText, jqXHR ] */
alert( jqXHR.responseText )
});
I'm modifying an existing system which uses Smarty. This particular problem is causing a major stumbling block as I just can't find a way around it.
I have a data-grid, each record has an action which calls ?module=the_module&action=the_action.
My corresponding function function the_module_the_action($postData, $getData) is used to perform the particular request.
The request for this module comes through from a jQuery $.ajax({}) request, simply because I don't want to loose the search form variables. So on success, I'll redirect the page using document.location='index.php?module=&action='.
This is fine as it allows me to detect that the action has been successful whilst maintaining the search filters on the grid.
But, I have a problem when the user action fails. The method the_module_the_action($postData, $getData) return echo 'success'; exit() on success but on a failure it should print out the Smarty template i.e. details of the record.
I believe the problem occurs because of a call through Ajax. The template is being served but because it is a call made using Ajax it isn't displayed.
How can I get around this problem?
Update:-
This is my function which Ajax calls:
public function module_action($post_data) {
$object=new Class((int)$post_data["id"]);
if($object->method()) {
echo "success";
exit();
}
else {
$this->assignToSmarty('_someSmartyVar', $someData);
$this->assignToSmarty('_data', $class->getData());
echo "failed";
}
}
The Ajax used to call this is:-
$(document).ready(function() {
$(".revokeButton").click(function(){
var selected=$(this).attr('id');
var filterBu = $('#filter_bu').val();
var filterJc = $('#filter_jc').val();
if(confirm("Are you sure you want to r.....")) {
$.ajax({
beforeSend: function() { },
url: 'index.php?module=module&action=action',
type: 'POST',
data: ({ bid:selected }),
cache: false,
success: function(data, textStatus) {
if(data == 'success') {
success_message = 'success';
} else if(data == 'failed') {
success_message = 'failed';
}
document.location='index.php?module=module&message='+success_message+'&filter_bu='+filterBu+'&filter_jc='+filterJc;
}
});
}
});
});
The success and failure are echoing out successfully, but the smarty stuff isn't.
I see two problems. First of all, you seem to have forgotten the smarty->display() function call in the failure leg of the module_action function. Secondly, you wrote:
if(data == 'success') {
success_message = 'success';
} else if(data == 'failed') {
success_message = 'failed';
}
This will always only output success or failure. You probably want to do something more like the following:
if(data == 'success') {
success_message = 'success';
} else {
// if got here, 'data' doesn't contain "success!", so it must contain
// something else, likely error data. You could either just display
// data as it is or first do some sort of check to ensure that it
// does, in fact, contain error data, and then display it.
success_message = 'error!<br \>\n' + data;
}