We Keep Coding

jQuery wait for a function to complete before new fires

I have two functions in jQuery that I want to fire in a specific order. The first function is an ajax function which updates a partial view. The other one is supposed to do some styling on the partial view, once the ajax function has completed - this function takes a parameter.
ajaxFunction();
stylingFunction(params);
I have tried the following:
ajaxFunction(function() {
stylingFunction(params)
});
Also, I have tried to use a callback:
ajaxFunction(stylingfunction(params));
ajaxFunction(callback)
{
//Do update
callback()
}
None of these do however work. The styling appears shortly where after it dissapears because the partial view is getting updated. Where am I going wrong here?
Both functions are written in my "parent" view.

You can use .done() and .fail() chained to the $.ajax call ...
I created a couple callback functions with psuedo-code inside the successCallback() since you said you only need to run the styling function "sometimes". You will want to test whatever condition inside that function to determine if you want to run the styling function. Hope this helps.
(function($) {
$(function() { //document.ready
$.ajax({ cache: false,
url: "/blah/vlah/lah",
data: { somedata: somedata }
})
.done(successCallback)
.fail(failCallback);
});
function successCallback(data) {
if (someCondition) {
stylingFunction(params);
}
};
function failCallback(jqXHR, status, error) {
console.log(jqXHR);
console.log(error);
console.log(status);
};
})(jQuery);
I created another gist which handles ajax event delegation, you may want to review and incorporate anything that seems helpful to your situation.
https://gist.github.com/inceptzero/a753d020648f49da90f8
I also created this gist on github for an ajax request queue which is a bit more elegant and robust.
https://gist.github.com/inceptzero/e64756f9162ca6aeeee5

Since you are using jQuery you could const ajaxFunc = callback => $.ajax({...}).done( data => callback) Also you could use async/await. You can read more about it on MDN.

Need assistance in ajax spinner displaying

I am making an ajax request which actually looks like this.
$loading = $("#loadingDiv")
function loadBuildList() {
$.ajax({
async:true,
url:"ajax_test.php",
beforeSend : function() { $loading.show(); },
success : function() { $loading.hide() }
});
}
Now, I need to display a spinner image while the ajax is running, Also my code is not supposed to execute further until the ajax's execution is over. If I make async:false I will not be able to load the spinner. If I make async:true I will not be able to wait till ajax execution is over.
Below is how I am calling the function loadBuildList
...
//$loading.show(); // this I will use when aync : false
loadBuildList()
//$loading.hide();
...
How can I handle such situation? Can anybody please help me with this?

You should never use async:false, or you'll stop the whole execution thread until it has got a response.
Everything that needs to be run after an async execution, in this case $.ajax needs to be written inside the callback. That is inside success for JQuery $.ajax.
$loading = $("#loadingDiv")
function loadBuildList() {
$.ajax({
async:true,
url:"ajax_test.php",
beforeSend : function() { $loading.show(); },
success : function() {
$loading.hide();
// Stuff after $.ajax goes here.
},
fail: function() {
// Or here.
}
});
}
You should also have a read at How do I return the response from an asynchronous call?

On the basis of code snippet you have provided it seems there is no need to use beforeSend as you just have one call on the page. You can do it following way.
$loading = $("#loadingDiv");
function loadBuildList() {
$loading.show(); // Show spinner before AJAX call
$.ajax({
async:true,
url:"ajax_test.php",
// beforeSend : function() { },
success : function() { $loading.hide() }
});
}
You can still try to make it as mentioned by #zurfyx but usually this practice is followed when you need something centralized and not for individual AJAX calls.

Handling the spinner is fine with .complete (so picks up both success and error):
function loadBuildList() {
var loading = $("#loadingDiv")
loading.show();
$.ajax({
url:"ajax_test.php",
complete : function() { loading.hide() }
});
}
However, this comment is more interesting:
my code is not supposed to execute further
It's not that you don't want to execute further, it's that you want to continue execution when the ajax call has completed.
You can do this by returning the $.ajax object, which is a promise. With the promise, you can then add chain calls in your own code. This is similar to using a callback parameter, but generally more flexible:
function loadBuildList() {
return $.ajax({
...
}
// calling code
loadBuildList().done(function() {
// code to run when the list has loaded
});

Synchronous function calls involving post json calls where one function should succeed upon the success of another function

I have two functions one of which includes multiple json call which are post by nature.
I want these to be synchronous. That is, one should run only upon the completion of the previous post (and if all posts are done and successful I want the second function to fire).
The code structure is somewhat like this:
$.getSomeData = function() {
$.postJSON("iwantdata.htm",{data:data},function(data)){
});
$.postJSON("iwantmoredata.htm",{data:data},function(data)){
});
});
$.useSomeData = function() {
});
The useSomeData must work upon subsequent json calls.
Can anyone please help me? Thanks in advance.

So basically you want something like this:
function chainPost(url1, url2, initialInput, func) {
$.post(url1, {data: initialInput})
.done(function (initialOutput) {
$.post(url2, {data: initialOutput})
.done(function (secondOutput) {
func(initialOutput, secondOutput);
});
});
}
chainPost("iwantdata.htm", "iwantmoredata.htm", 0, function (first, second) {
alert(first);
alert(second);
});

You can just nest them, starting the 2nd one in the completion function of the first and so on:
$.getSomeData = function() {
$.postJSON("iwantdata.htm",{data:data},function(data) {
$.postJSON("iwantmoredata.htm",{data:data},function(data)){
// use the data here
});
});
};
When dealing with asychronous functions, you cannot write code such as:
$.getSomeData();
$.useSomeData();
By definition, the first is asynchronous so it will not have completed yet with the second function is called and javascript does not have the ability to stop JS execution until an asynchronous operation is done.
You could pass your use function to the get function and then it would get called when the data was available as an addition to the above example like this:
$.getSomeData = function(fn) {
$.postJSON("iwantdata.htm",{data:data},function(data) {
$.postJSON("iwantmoredata.htm",{data:data},function(data)){
fn(data);
});
});
};
Then, you'd have a getSomeData(useFn) function that would take an argument of the function to call when all the data was ready.

Deferred objects [docs] are perfect for this. Unfortunately, your code example contains syntax errors and it is not clear how the calls are nested. So, I'm not sure if you want to run both Ajax calls after one another or parallel, but either way is possible.
Here are two examples. Have a look at the documentation for more information and play around with it.
Note: .postJSON is not a built in jQuery method, I assume here that you are returning the return value from the $.ajax (or $.post) function.
Parallel Ajax calls:
$.getSomeData = function() {
var a = $.postJSON("iwantdata.htm", {data:data});
var b = $.postJSON("iwantmoredata.htm", {data:data});
// return a new promise object which gets resolved when both calls are
// successful
return $.when(a, b);
};
// when both calls are successful, call `$.useSomeData`
// it will have access to the responses of both Ajax calls
$.getSomeData.done($.useSomeData);
See: $.when
Chained Ajax calls:
... where the response of the first call is the input for the second one. This is only an example, of course you can pass any data you want.
$.getSomeData = function() {
return $.postJSON("iwantdata.htm", {data:data}).pipe(function(response) {
// execute the second Ajax call upon successful completion
// of the first one
return $.postJSON("iwantmoredata.htm", {data:response});
});
};
// if both Ajax calls are successful, call `$.useSomeData`
// it will have access to the response of the second Ajax call
$.getSomeData.done($.useSomeData);
See: deferred.pipe()
If you have a more complex logic, you can also create, resolve or reject your own deferred objects. Have a look at the examples in the documentation.

jQuery Async Issue, Variable Assignment After GET Request

I'm sure the solution is staring me right in the eyes, but I just cannot see it. I am trying to load an object from an outside file source. I've tried it several which ways using jQuery's built in methods, but keep returning undefined. Is my issue the scope? I need partnerData right where it is because of other dependent methods in my script. I don't want to operate the rest of my site's functions from within the $.get callback. Any help is greatly appreciated, here's the code:
$(function() {
var partnerData;
$.get('data/partners.json', function(file) {
partnerData = $.parseJSON(file);
});
console.log(partnerData); /* returns undefined instead of object */
});
EDIT:
Thanks for all the feedback everyone. This is the solution I went with:
var partnerData;
$.ajax({
url: 'data/partners.json',
dataType: 'json',
async: false,
success: function(data) {
partnerData = data;
}
});

The reason why you're seeing undefined is because ajax requests are asynchronous by default. This means your get method gets invoked and the code flow moves down to the next statement while the request executes in the background. Your callback function is later invoked when the request completes.
Using callback functions is a common pattern used in situations like this. But you seem to be saying you don't want to do or can't do that. In that case, you could use async: false which would force the request to be synchronous. Keep in mind however, that your code will be blocked on the request and if it's a long-lived request, the user experience will degrade as the browser will lock up.
P.S. You shouldn't need to parseJSON - if response has the correct mime-type set, jQuery will intelligently guess the type and parse the JSON automatically. And in case the server isn't sending back the correct mime-type, you can also explicitly tell jQuery what the expected return data type is; see the dataType argument to $.get() .
One way you might modify your code, to force synchronous requests:
$.ajax({
type: 'GET',
url: 'data/partners.json',
success: function(file){
partnerData = $.parseJSON(file);
//ideally you would perform a callback here
//and keep your requests asynchronous
},
dataType: 'json',
async: false
});

function is proccessed to the end event when ajax is still being proccessed. insert it into callback function
$(function() {
var partnerData;
$.get('data/partners.json', function(file) {
partnerData = $.parseJSON(file);
console.log(partnerData);
});
});

I would say that your problem is the same of the one that I just solved, if $.get is AJAX! and it is setting a variable, to read that variable outside the callback you need to wait the response! So you have to set async=false!

console.log in synchronous and get is async.
try:
$(function() {
var partnerData;
$.get('data/partners.json', function(file) {
partnerData = $.parseJSON(file);
test();
});
function test(){
console.log(partnerData);
}
});

fetching a url using $.getJSON and parsing it correctly

This is probably really stupid but i can't find the problem with my code. It fetches a url that returns json and the function is then supposed to return a string:
function getit() {
var ws_url = 'example.com/test.js';
var user = false;
$.getJSON(ws_url, function(data) {
alert('user '+data.user);//shows john
user = data.user || false;
});
return user;//should return john but returns false
}
test.js will have something like this:
{"id":"12","username":"ses","user":"john","error":""}
or like this:
{"error":"123"}
I also tried if (data.user) {} else {} but it didn't work either..
So what am i missing?
Thanks :)

The problem comes from the fact that the $.getJSON() call is asynchronous. Once the ajax request is fired off, processing continues on inside getit(), and your function immediately returns false. Later on, the Ajax response returns and sets user, but your getit() function returned a long time ago!
You can force the Ajax call to be synchronous using the async option, like this:
$.ajax({
async: false,
url: ws_url,
type: "GET",
success: function(data) {
alert('user '+data.user);//shows john
user = data.user || false;
}
});
If you do that, your browser will block on the script until the Ajax call returns. Generally this isn't the ideal behaviour (which is why the default is async: true), so I'd suggest reworking whatever it is that's calling getit(), and have it expect to process it's results whenever it can, perhaps by passing it's own callback function to getit() that would then be executed when getit() is done.

Ajax is asynchronous, which means that the rest of the script isn't going to sit around and wait for it to finish before moving on. As in your example, the return line is being reached before the ajax function receives a response from the server, thus the user variable is still false at that point in time.
If you want to force an ajax call to run synchronously, you can use jQuerys $.ajax method and set the async parameter to false.
$.ajax({
url:ws_url,
dataType:"json",
async:false,
success:function(data){
alert('user '+data.user);//shows john
user = data.user || false;
}
});