StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I found the solution to the problem I was having and it was combination of how I was calling the template and the parameters set in ajax. Here is the solution that worked for me: </p> <pre><code>$(function () { /* js ready function */ lazyGetTemplate('PopupChildren'); }); /* this is the function that loads the template from the script */ 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 the ajax calling my additional items for display */ 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: "JSON", data: "{parentID:" + parentID + ", popupType:'" + $('#hid_popupType').val() + "'}", contentType: "application/json", success: function (data) { if (data != null) { //menu item has children $(cControl).after("<div id=\"div_Child\"></div>"); $div_Child = $(cControl).parent().find('#div_Child'); $div_Child.hide(); var myData = data.d; $div_Child.html($.templates.PopupChildren.render(myData)); $div_Child.show('slow'); } }, error: function (xhr) { alert(xhr.responseText); } }); } } /* this is the content of the actual script that gets called from the lazyGetTemplate() */ $.templates("PopupChildren", "<ul>{{for}}<li><a onclick=\"selItem(this,\'{{:TypeID}}\',\'{{:Value}}\');\">{{:Value}}</a>{{/for}}</ul>"); </code></pre> <p>Some specific notes about what I learned while implementing this particular jQuery for js/jsRender newbies. I had to make sure the template was loading onto the page before it was called. I also had to reference 'data.d' when I passed the data to the template. Calling data was not sufficient. I also wasted some precious time when I got confused by the ajax data and thought that the items I was trying to display were inside an array called Children, which I discovered was not the case. And the final two pieces that made this work were I had to set async to true and I had to set dataType to "JSON". Specifically about the dataType, there is another post that mentions setting it 'text' to make it work, and with my problem that didn't wind up being applicable but its something that might help someone else in the future. And last, specifically about the template script itself, I did not have to list an actual item name with the for statement. I thought based on some examples I had seen that I needed to put {{for data}} or {{for Children}} but, I am assuming, because I passed data.d in the end, just calling the {{for}} was sufficient. </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