Jquery - custom HTML for template - strange behavior

Question

var $template;
$.get('/templates/searchTemplate.tmpl', function(HTMLres) {
    $template = $(HTMLres);
});
$.each(data.results, function(key, value) {
    $template.find('button').off().on('click', function() { console.log('you clicked me') });
    $template.find('.media-body > strong').html(value.firstname + ' ' + value.lastname);
    $template.find('.email').html(value.mail);
    $template.find('.phone').html(value.phone);
    $template.find('.age').html(value.age);
    $('#searchRsults').append($template);
});

When I try to use this code instead of having the template file to be Appended to the UL element, this will clear the previous append and append the next result to the UL element.

The template file is just a -> <LI> </LI> with some spans.

Note that if I put the |$.get (template) in the $.each part of the code everything works like it supposed to be all the <LI> </LI> element are appended one after another.

But doing so it makes a lot of request for the template file. On every iteration actually.

Even if I use the .DONE after the Ajax request still the result is the same the <LI> </LI> gets overwritten not appended

I think you have some problems with async constructions - your request may not be completed yet, but your iterator starts already fcreating your form. Definitely you should do this on promise complete event. — VadimB, Dec 20 '16 at 09:55
like I commented just now - @zakaria - tested with $.get().done() and put my code there still the result is the same. — ge_or_gi, Dec 20 '16 at 10:04

score 0 · Answer 1 · edited May 23 '17 at 12:13

0

You should put the each() inside the success callback so the $template will be available, else you're trying to use the $template when it's not returned yet from the asynchronous HTTP (Ajax) request :

var $template;
$.get('/templates/searchTemplate.tmpl', function(HTMLres) {
    $template = $(HTMLres);

    $.each(data.results, function(key, value) {
        $template.find('button').off().on('click', function() { console.log('you clicked me') });
        $template.find('.media-body > strong').html(value.firstname + ' ' + value.lastname);
        $template.find('.email').html(value.mail);
        $template.find('.phone').html(value.phone);
        $template.find('.age').html(value.age);
        $('#searchRsults').append($template);
    });
});

Take a look to How do I return the response from an asynchronous call?.

Hope this helps.

edited May 23 '17 at 12:13

Community

1
1

answered Dec 20 '16 at 09:55

Zakaria Acharki

66,747
15
75
101

I have tested what you have suggested, the result is the same. Even tested with $.get().done() and have my code in the .done part where everything is executed after request is compleated and done - nothing ... – ge_or_gi Dec 20 '16 at 10:02
The `done` callback is the same as you've now, if nothing that mean your `/templates/searchTemplate.tmpl` doesn't return the expected result, try to debug it `console.log($template)`. – Zakaria Acharki Dec 20 '16 at 10:05
What the `console.log($template)` gives you ? – Zakaria Acharki Dec 20 '16 at 10:50

score 0 · Answer 2 · answered Dec 21 '16 at 13:40

function getResults(searchTerm){
           return $.get("/api/search", { 'searchFor': keyword });
        }

function getTemplate(){
            return $.get('/templates/searchTemplate.tmpl')
        }

$.when(getResults(keyword), getTemplate())
            .done(function(result1, result2){
                $('ul#searchRsults').empty();
                if (result1[0].results.indexOf('no results') != 0) {
                    $.each(result1[0].results, function(key, value) {

                        var $template = $(result2[0]);
                            $template.find('.img-avatar').html(img);
                            $template.find('button').off().on('click', function() { console.log('you clicked me') });
                            $template.find('.media-body > strong').html(value.firstname + ' ' + value.lastname);
                            $template.find('.email').html(value.mail);
                            $template.find('.phone').html(value.phone);
                            $template.find('.age').html(value.age);
                            $('#searchRsults').append($template);
                    });
            }
        })

after some read - I ended with this solution, in chrome console the request for template is made only once. Hope this helps sombady

Jquery - custom HTML for template - strange behavior

2 Answers2