Ahsan Shabbir Ahsan Shabbir - 1 year ago 120
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">

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>


My JQuery

<script type="text/javascript">
// 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);

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

Check template above and the following jquery

function updatetext(id){


Answer Source

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);
           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
           error: function(x, s, e){
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download