[SOLVED] Re-Render some data on the same template

Re-Render some data on the same template

I have a scenario where-in by-default I would be rendering some data from JSON on my JSP page. Now, I want to achieve a use-case wherein when I click on some menu-item it would trigger a function and that should in response update the template with the relevant data.

So for initial loading I am loading the data from JSON using:

$.getJSON( "/somelocation/test.json", function( data ) {
    console.log(data); //json output 
    var template = $.templates("#theContent");
    var htmlOutput = template.render(data, {selectedValue: "abc"});
    $("#mainBody").html(htmlOutput);
});

Now I write the same logic in a function which will be triggered on the menu item click then on the JSP page I just see "#theContent" as an output. Can you please suggest what might be an issue.

Solution

If you pass a string to $.templates(someString), then JsRender will first attempt to treat it as a jQuery selector. If jQuery is loaded and the selector does return a script element for a template then that template will be used.

If the string is not valid selector or does not return a script element for a template block, then JsRender will fall back on treating the string as template markup.

You can test in the context of your code whether $("#theContent") does return a non-empty jQuery object. ($("#theContent").length === 1). It looks as if in your code it is not finding a script element with ID "theContent".