0

I'm trying to transform my Jquery code into a function to make it more dynamic. As parameters I want to pass the ID of the Handlebars SCRIPT tag, the ID of the DIV tag where the result will be printed, the query URL for AJAX and the PARAMETERS for Ajax.

I was doing some tests only with the parameters (URL and Parameters) but I did not get any results (apparently it's a question of the asynchronous method but it was not very clear to me).

This is the original and functional code:

var source   = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);
var context = $.post("http://localhost/api/api.php", {a: 'foo', b: 'bar'});
context
    .then((response) => {
        var parsejson = JSON.parse(response);
        $("#content-placeholder").html(template({objects:parsejson}));
    });

And this is my proposal for a function to simplify the previous code:

function testing (id, target, url, parameters){
    var source = document.getElementById(id).innerHTML;
    var template = Handlebars.compile(source);
    var context = $.post(url, parameters);
    context
        .then((response) => {
            var parsejson = JSON.parse(response);
            return $(target).html(template({objects:parsejson}));
        });
};

var cool = testing("test-template", "#test-placeholder", "http://localhost/api/api.php", {a: 'foo', b: 'bar'});
console.log(cool);

But I'm getting an "undefined" on the console.

Kokox
  • 519
  • 1
  • 9
  • 24
  • You need to console.log(cool) in context.then as javascript will execute sequentially and is not waiting for response before printing cool which is undefined due to no value being present – Tej Apr 05 '18 at 05:38
  • Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Taplar Apr 05 '18 at 05:39
  • The `testing` method does not end with a return statement. Nothing is being returned from it, which is why you are getting an undefined printed. – Taplar Apr 05 '18 at 05:41

1 Answers1

1

You are learning promises and how to handle asynchronous operations with their promises, and you are on the right way. 

function testing (id, target, url, parameters){
    var source = document.getElementById(id).innerHTML;
    var template = Handlebars.compile(source);
    var context = $.post(url, parameters);
    return context
        .then((response) => {
            var parsejson = JSON.parse(response);
            return $(target).html(template({objects:parsejson}));
        });
};

testing("test-template", 
        "#test-placeholder", 
        "http://localhost/api/api.php", 
        {a: 'foo', b: 'bar'}
    ).then(function(cool){
        console.log(cool);
    });

this way, testing function will return a promise and you can wait until the promise completes, after then you can get the value.

And here's a page that describes your problem and gives you the solution:

http://michaelsoriano.com/working-with-jquerys-ajax-promises-and-deferred-objects/

Taha Paksu
  • 15,371
  • 2
  • 44
  • 78
  • Thanks for the colleague answer !, I'm learning jquery on my own. A silly question, I'm testing the way you've proposed but for some reason I get the error "TypeError: testing (...) is undefined", for some reason does not recognize the function. – Kokox Apr 05 '18 at 05:59
  • Check the scope of the functions, I mean if the function is in `$(document).ready(function(){ ... });` or some block than the caller, it won't recognize the function. The function caller should be inside the same block or a child block, not in the parent block or the sibling blocks. That's called scoping. http://ryanmorr.com/understanding-scope-and-context-in-javascript/ – Taha Paksu Apr 05 '18 at 06:02
  • Thanks for the help friend, after several tests you can use the solution you gave me – Kokox Apr 06 '18 at 14:41