Running an javascript function before an ajax call

Question

I want to run the first ajax call when it has completed run the function "saveToFile()" and after that has been completed run the second ajax call. Doesn't seem to work as coded. I'm fairly new to ajax so am struggling a little with this one.

// save composition to database 
$.ajax({ 
    type: "POST", 
    url: "_inc/save_to_db.php", 
    data: {jsonStr: canvasStr}, 
    success: function(data) {
            // this saves the comp to the _comps folder on the server as a jpeg file (firth.js)
            saveToFile();

            $.ajax({
            type: "POST".
            url: "_inc/generate_thumbnail.php",
            data: {imgFile: "<?php echo $_SESSION['UserID'] ?>_<?php echo $_SESSION['CompID'] ?>.jpg"},
            });
        }
    });

If it is a asynchronous function then you need to use a callback to sent the second ajax request — Arun P Johny
– Arun P Johny, Commented Jun 17, 2013 at 6:31

Andrey Mikhaylov - lolmaus · Accepted Answer · 2013-06-17 06:46:49Z

1

Works for me: http://jsbin.com/upujur/2/edit

The problem might be with the dot instead of comma in this line:

type: "POST".

Are you using a JavaScript console like FireBug or Developer Tools to debug your program?

answered Jun 17, 2013 at 6:46

Andrey Mikhaylov - lolmaus

24k8 gold badges91 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Darin Dimitrov · Accepted Answer · 2013-06-17 06:34:33Z

You could make the saveToFile function take as parameter a callback which will be executed once the AJAX call it performs is finished. For example:

$.ajax({ 
    type: "POST", 
    url: "_inc/save_to_db.php", 
    data: {jsonStr: canvasStr}, 
    success: function(data) {
        // this saves the comp to the _comps folder on the server as a jpeg file (firth.js)
        saveToFile(function(result) {
            $.ajax({
                type: "POST",
                url: "_inc/generate_thumbnail.php",
                data: {imgFile: "<?php echo $_SESSION['UserID'] ?>_<?php echo $_SESSION['CompID'] ?>.jpg"},
            });
        });
    }
});

and your saveToFile function may now look like that:

function saveToFile(successCallback) {
    $.ajax({
        url: ...,
        type: ...,
        data: ...,
        success: successCallback
    });
}

Collectives™ on Stack Overflow

Running an javascript function before an ajax call

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related