CODEWITHSUNDEEP
javascriptjquery
tune2fs
tune2fs

Reputation: 7705

Javascript how to make sure JQuery .append is displayed

I have the following javascript function, which uses .append from JQuery. However it only works if I add alert() at the beginning of the function. I have found out the reason for this behavior is due to the asynchronous way AJAX works.

How can I make sure that this function displays the html as wanted?

this.printJSON = function(id) {
    //alert(id);
    $(id).append('<button id="#store">store</button>');
    for(key in params) {
          $(id).append('<p '...'</p>');
    }
};

my whole class, which is called this way:

params.parseJSON();
params.printJSON("#showdata");

function Parameters(parametersFile) {
    //private stuff
    var paramFile = parametersFile;
    var params = {};

    //public stuff
    this.parseJSON = function() {
        $.getJSON('inputFileParametersJSON.txt', function(json) {

        for(var param in json) {
            for(var key in json[param]) {
                if(json[param].hasOwnProperty(key)) {
                    params[key] = {
                    filterIdentifier : json[param][key].filterIdentifier,
                    paramIdentifier : json[param][key].paramIdentifier,
                    param : json[param][key].param
                        };
                    }
                 }

          }
       });
    };

    this.printJSON = function(id) {
            alert("");
        $(id).append('<button id="#store">store</button>');
        for(key in params) {
                $(id).append('<p id="' + key + '"> filterIdentifier: ' + params[key].filterIdentifier + '<br /> paramIdentifier: ' + params[key].paramIdentifier + '<br /> param= <input type="text" id="' + key + '"name="param" value="' + params[key].param + '"/></p>');

                        //alert(params[key].filterIdentifier);
        }
    };

}

Upvotes: 0

Views: 108

Answers (3)

kubetz
kubetz

Reputation: 8556

You must make sure that .printJSON() is called after .parseJSON() finishes parsing the data. This can be done by directly calling .printJSON() (see answer by jcm) or by addind a support for callback that will get executed when .parseJSON is done.

function Parameters(parametersFile) {
    var that = this;
    // ...
    this.parseJSON = function(callback) {
        $.getJSON('inputFileParametersJSON.txt', function(json) {
            for (var param in json) {
                for (var key in json[param]) {
                    // ...
                }
            }
            callback.call(that);
        });
    };

    this.printJSON = function(id) {
        // ...
    }
};

// ...
parameters.parseJSON(function() {
    // ...
    // you can use "this" as if you were in Parameters
    this.printJSON(someId);
    // ...
});

Upvotes: 0

Jim Mitchener
Jim Mitchener

Reputation: 9003

It looks like you may need to re-evaluate the way your functions are being called. Do you actually need to call them seperately? I'd rename parseJSON to something like getJSON

function Parameters(parametersFile) {
    // ...

    var printJSON = function(id) {
        $(id).append('<button id="#store">store</button>');
        for(key in params) {
            // ...
        }
    };

    //public stuff
    this.getJSON = function(id) {
        $.getJSON('inputFileParametersJSON.txt', function(json) {

        // process results ...

          printJSON(id);
       });
    };

}

This way you can simply call foo.getJSON('#someid') and it will not append until the request has been processed.

Upvotes: 2

StuperUser
StuperUser

Reputation: 10850

As jcm has said, you should be calling printJSON() from the response handler to enable it to work once the results of the request have been used to populate params.

Here be monsters

If you really need to wait for the result of an ajax post and can't use the result in a response handler (which is almost never), you can set async to false (see http://api.jquery.com/jQuery.ajax/), but since JS is executed in a single thread, this will halt execution of the JS until the request is completed.

Since you are using $.getJSON() you would need to use the ajaxSetup http://api.jquery.com/jQuery.ajaxSetup/ to change the behaviour of the ajax call.

Upvotes: 1

Related Questions