Wait for ajax call in another js file

Gonzalo.-

I have two js files. These are the simplified version (there is a lot of code actually)

ucyg.js

This file is included in a page ucyg.php - this page is loaded into my index.php with an Ajax call. its code is

var Ucyg = function(){

    var load = function() {
    return $.get('Ajax/listado_ucyg.php', {
                   // some get parameters
        }).done(function(data) {
            // some DOM manipulation with Data 
        });
    };

     return {
        load: load
     }
};

    $(document).ready(function() {
        var ucyg = new Ucyg(); 
        ucyg.load();
    });

So my ajax call return ucyg.php with this file included (to clarify: the file ucyg.js is not loaded in my browser until the ajax call of ucyg.php in my index.php returns), and when its ready, it does another ajax call to bring listado_ucyg.php

the other one

item.js

in some part of the code I need something very similar to what I have in ucyg.php, but with some modifications. So I thought in bring ucyg.php as ajax call, and after that, make the modifications needed. Just like this:

    $.ajax({
                type: 'post',
                url: 'Ajax/ucyg.php',
                success: function(data){
                    popUpUcyg(data, fila);
                },
                error: handleError
            });

    var popUpUcyg = function(data, fila){
     var a = $('#someid');
     a.html(data);
    // some dom manipulations (*)
}

the problem is that some of the DOM manipulations I should do is in the html code that the inner ajax call (listado_ucyg.php) returns.

So when I do a.html(data), the data is rendered, the .js run its ready section and make the ajax call for listado_ucyg.php, but I have to wait until it returns, in order to make the lasts modifications I need

How can I wait until this last ajax call is done? If its posible, I would like not to modify ucyg.js

I know I could put a timeout, but also I would like to avoid this.

In the server side I'm using PHP 5.3, in case anyone think in a option like passing a parameter to the server and do some magic

EDIT:

to clarify the sequence:

From index.php I can load any page with an ajax call - i.e. ucyg.php File ucyg.php has <script src="../Js/ucyg.js"></script> This ucyg.js got the code that you can see above.

In some point, from index.php I load item.php, and this page has <script src="../Js/tareas.js"></script>. In some point, this page (After a click event) needs to load something very similar to what I have in ucyg.php, you can see the code above. Instead of make another page, I chose to bring ucyg.php with an Ajax call, and make some modifications with js. The problem is that when I bring ucyg.php, it includes the file ucyg.js (as we said), and this file, when its ready, make another ajax call.

Some of the modifitations I need to do, is in the data that this last ajax call does. So I need in someway to wait until this last one returns.

How can I achieve that?

Thanks

charlietfl

One approach might be to use ajaxComplete()

$( document ).ajaxComplete(function( event, xhr, settings ) {
    if ( settings.url === "Ajax/listado_ucyg.php" ) {
        /* run DOM code from items.js*/
    }
});

API Docs

Could also use this to resolve promises that connect to the ajax calls in item.js

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Call ajax function, then wait, then call again another ajax function

From Dev

call JS file with AJAX

From Dev

AJAX wait until file exist on another server

From Dev

Call .js file from another .js file

From Dev

Synchronous wait for $.ajax call

From Dev

Synchronous wait for $.ajax call

From Dev

ajax call not working in external js file

From Dev

jQuery Ajax call not working in seperate .js file

From Dev

JS file not loading via ajax call

From Dev

jQuery Ajax call not working in seperate .js file

From Dev

$ is not defined - Ajax call in external js file

From Dev

call two file from another with node js

From Dev

Make the loop wait for the ajax call

From Dev

Wait for Ajax call to finish for Capybara

From Dev

Make the loop wait for the ajax call

From Dev

Ajax call wait till is loaded

From Dev

Apply css from another file to an echo statement from the ajax call

From Dev

Call $.ajax function in another $.ajax

From Dev

How do I call .js from another .js file?

From Dev

print js variable into innerHTML call in another js file

From Dev

Batch file - wait for another commands

From Dev

How to make ajax call url relative to js file directory

From Dev

Getting correct URL to make ajax call from JS file

From Dev

Using AJAX to call Node.js file to send SMS message

From Dev

Call channel connect function from another js file

From Dev

Node.js json file gets overwritten by another call

From Dev

How to call another javascript inside Main JS File

From Dev

Js how call function and pass params from another file

From Dev

How to wait a in a for loop until ajax call finishes