Ahsan Shabbir Ahsan Shabbir - 26 days ago 7
Ajax Question

Mustache Sending data back to Jquery

How can I send data from my mustache template back to JQuery?

Hello.. This is my first time using a templating library. Most of my code works fine. But at this point, I need to load data from two separate sources.

1st source is a json file, loading all the users. I have username and ids.
2nd source require userid (that I loaded in first template). I want to get data from 1st source and render it on template..at the same time, I want to send these ids to ajax and load information from 2nd source and render it on the same template.
I just have to update 1 information from 2nd source .
How do I send this span id to ajax function? If it was a button, I could simply use onclick event with id (working). But I have to update html. What do I do?

P.S I also cant join both data in one json. The data is comming via API.

my mustache template



<script id="profile-template" type="text/template">
{#users}}

Your user id is {{id}} <br/>
Your name is {{name}} <br />

Your other information <span id="{{id}}-variable-text">this data has to be loaded from other api </span>
<button onclick="updatetext({{id}});">Update text </button>


{{/users}}




My JQuery



<script type="text/javascript">
$(document).ready(function(){
$('#spanID-from-template').html(function(){
// ajax
})
}




I'm using following code in ajax to name and ids from first source.
this is what happening in ajax success function()

var template = $("#profile-template").html();
var html = Mustache.to_html(template, response);
$('#users').append(html);


A little hack I added to use onclick event to update text of id



Check template above and the following jquery

function updatetext(id){
$("#"+id+"-variable-text").html("updated-text");

}

Answer

If you wish to use a data from a rendered template, you can do the following...

The issue here is the asynchronous nature of what you are doing; rendering and calling variables from the rendered template.

var template = $("#profile-template").html();
var html = Mustache.to_html(template, response);
$('#users').append(html).promise().done(function(){
   $.ajax({
           url: "url here", 
           success: function(result){
              response = response.concat(result); //Do some reduction here!
              var html = Mustache.to_html(template, response); //This will only render once the promise is fulfilled
              $('#users').append(html);
           },
           error: function(x, s, e){
               console.log(e);
           }
         });
     });