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.
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"
.