Databases
StackOverflow2013
Postsdbo
POjsRender Loading Remote Templates (AJAX Data Issue)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjsRender Loading Remote Templates (AJAX Data Issue)
    text
    copied!<p>I'm trying to upgrade a website to use the jsRender templates (it used to use the jTemplates) and I have been studying jsRender (both Boris' site and the material produced by John Papa) and trying to follow the instructions here: <a href="http://www.jsviews.com/#samples/jsr/composition/remote-tmpl" rel="nofollow">JSViewsRemoteLoadTemplates</a></p> <p><em>Please note as of 11/13/13 this question was edited to reflect a partial solution and clean up the content:</em> </p> <p>After a lot of experimentation I was able to get the jsRender template to work with static data but once I change the data to the ajax source the template renders empty. I believe it might be rendering empty because I'm not specifying the correct wording inside the .js template itself but I've tried all sorts of variations and nothing is working yet. </p> <p>My page is a basic .htm page. I am using jQuery 1.10.2, json.js, and jsrender.min.js in the header. This is my script on the page: </p> <pre><code>&lt;script style='text/javascript'&gt; $(function () { lazyGetTemplate('PopupChildren'); }); function lazyGetTemplate(name) { var deferred = $.Deferred(); if ($.templates[name]) { deferred.resolve(); } else { $.getScript("/_Scripts/" + name + ".js").then(function () { if ($.templates[name]) { deferred.resolve(); } else { alert("Script: \"" + name + ".js\" failed to load."); deferred.reject(); } }); } } /* This is my sample static data that jsRender works with */ var staticdata = [ { "TypeID": "88", "Value": "ORGANICS" }, { "TypeID": "89", "Value": "SPECIFIED ORGANICS" } ]; function getMyTemplate(data) { $div_Child.html($.templates.PopupChildren.render(data)); //change data to staticdata to test static info, I've also set this to JSON.stringify(data) but the result is still empty } /* This is the ajax that calls the external function I'm using for testing */ function selItem(cControl, treeID, treeTrans) { var parentID = treeID; if ($(cControl).parent().find('ul').length == 0) { $.ajax({ type: "Post", url: "Contractor_ws.asmx/web_getChildren", async: true, dataType: "text", data: "{parentID:" + parentID + ", popupType:'" + $('#hid_popupType').val() + "'}", contentType: "application/json", success: function (data) { if (data != null) { //menu item has children $(cControl).after("&lt;div id=\"div_Child\"&gt;&lt;/div&gt;"); $div_Child = $(cControl).parent().find('#div_Child'); $div_Child.hide(); getMyTemplate(data); $div_Child.show('slow'); } }, error: function (xhr) { alert(xhr.responseText); } }); } } &lt;/script&gt; </code></pre> <p>PopupChildren Script (the template):</p> <pre><code>$.templates("PopupChildren", "&lt;ul&gt;{{for}}&lt;li&gt;&lt;a onclick='selItem(this,'{{:TypeID}}','{{:Value}}');'&gt;{{:Value}}&lt;/a&gt;&lt;/li&gt;{{/for}}&lt;/ul&gt;"); </code></pre> <p>Sample ajax data:</p> <p>data: "{"d":[{"__type":"BLS","TreeCode":"0130","TreeType":"OBJ","ParentID":88,"Children":[],"TypeID":89,"Value":"INORGANIC ACIDS, UNSPECIFIED","Trans":"INORGANIC ACIDS, UNSPECIFIED","Active_Flag":false},{"__type":"BLS","TreeCode":"0131","TreeType":"OBJ","ParentID":88,"Children":[],"TypeID":90,"Value":"CHLORINE-CONTAINING OXYACIDS","Trans":"CHLORINE-CONTAINING OXYACIDS","Active_Flag":false}]}"</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload