Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I will regularly use ajax to load such content from a webservice or a pagemethod (which is actually a webservice...) when the expansion icon (+) is clicked the service is called, data is returned (as JSON) and then applied to a template which was loaded inside a hidden div when the the page was loaded and inserted into a div that was toggled to visible on the click event... </p> <p>If this matches your needs, great; if not, please be more specific what you are trying to accomplish.</p> <p>[Edit: code sample as requested]</p> <pre><code>&lt;div&gt; &lt;asp:Repeater ID="CategoryRepeater" runat="server"&gt; &lt;HeaderTemplate&gt;&lt;div id="CategorySpace"&gt;&lt;/HeaderTemplate&gt; &lt;ItemTemplate&gt; &lt;div id="CategoryHeaderRow_&lt;%# Eval("CATEGORY_NM").ToString().Replace(" ","_").Strip("(,),-,/") %&gt;" class="CategoryHeader"&gt; &lt;input type="hidden" id="CategoryID" runat="server" value='&lt;%# Eval("CATEGORY_ID") %&gt;' /&gt; &lt;!-- THIS IS THE EXPANSION ICON --&gt; &lt;input type="button" id="expandCategory_&lt;%# Eval("CATEGORY_NM").ToString() %&gt;" class="CategoryExpandButton" value="+" onclick="expandCategory(this,'&lt;%# ((CRMS.PageBase)this.Page).UserId %&gt;','&lt;%# Eval("CATEGORY_ID") %&gt;');" isloaded="&lt;%#(string)Eval("LOAD_ON_DEMAND_CD")=="N"?"Y":"N" %&gt;" /&gt; &lt;span id="CategoryCount_&lt;%# Eval("CATEGORY_NM").ToString().Replace(" ","_").Strip("(,),-,/") %&gt;" class="CategoryLabel" style="width:50px;"&gt;&lt;%# Eval("Count_Qy")%&gt;&lt;/span&gt; &lt;span id="CategoryName" class="CategoryLabel"&gt;&lt;%# Eval("CATEGORY_NM") %&gt;&lt;/span&gt; &lt;img id="InfoIcon_&lt;%# Eval("CATEGORY_NM") %&gt;" src="images/InfoIcon.png" alt="&lt;%# Eval("CATEGORY_INFO_TX") %&gt;" class="CategoryInfo" /&gt; &lt;/div&gt; &lt;div id="categoryItems_&lt;%# Eval("CATEGORY_NM").ToString().Replace(" ","_").Strip("(,),-,/") %&gt;" class="hidden itemsContainer " style="width:990px;overflow:scroll;"&gt; &lt;div id="categoryItems" runat="server"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/ItemTemplate&gt; &lt;FooterTemplate&gt;&lt;/div&gt;&lt;/FooterTemplate&gt; &lt;/asp:Repeater&gt; &lt;/div&gt; </code></pre> <p>The click event of the Expansion Icon fires this JavaScript:</p> <pre><code>/* Expands the ToDo Categories and initiates ajax call for lazy loading ToDo Items when needed */ function expandCategory(sender, UserID, CategoryID) { window.status = ""; var senderID = "#" + sender.id; var action = $(senderID).val(); $(senderID).val($(senderID).val() == "+" ? "-" : "+"); var CategoryItemsID = "#" + sender.id.replace("expandCategory", "categoryItems"); $(CategoryItemsID).toggleClass("hidden"); if (action == "+" &amp;&amp; sender.isloaded == "N") { //Find any controls with a pq_Value attribute and //use those values with the selected category id //to load items. var params = $('[pq_Value]'); var inputParameters = ""; for (x = 0; x &lt; params.length; x++) { inputParameters += "{" + params[x].p_Name + "|" + params[x].p_Type + "|" + $(params[x]).attr("pq_Value") + "}"; } PageMethods.LoadCategoryItems(UserID, CategoryID, inputParameters, 0, RecieveCategoryData, RecieveCategoryError); //Set Is Loaded to (Y)es sender.isloaded = "Y"; } } </code></pre> <p>When you invoke <code>PageMethods.LoadCategoryItems...</code> this should be a typical ajax call to send back the content into another JavaScript function:</p> <pre><code>function RecieveCategoryData(msg) { var msgs = msg.split('||'); if (msgs.length == 7) { var category_name = msgs[0].replace(/ /g, "_"); //strip undesirable characters from the name: (,),-,/ category_name = category_name.replace(/\(/g, "").replace(/\)/g, "").replace(/\-/g, "").replace(/\//g, ""); var UserID = msgs[1]; var jsonData = jQuery.parseJSON(msgs[6]); var container = $("#categoryItems_" + category_name); var categoryCountLabel = $("[id*=CategoryCount_" + category_name + "]")[0] var categoryCount = categoryCountLabel.innerText; if (parseInt(msgs[4]) &lt; 52) { var header = $("#" + category_name + "_Header").html(); $(container).html(header); } //var ItemContainer = $("#" + category_name + "_Items"); var templateText; var x = 0; var y = 0; var fieldName; var fieldToken; var jsonValue; for (i = 0; i &lt; jsonData.length; i++) { templateText = document.getElementById(category_name + "_Template").innerHTML; //templateText = $("#" + category_name + "_Template").html(); templateText = templateText.replace("[{ACTIVE_USER_ID}]", UserID); templateText = templateText.replace("[{numDataRow}]", i % 2 == 0 ? "evenDataRow" : "oddDataRow"); //templateText = templateText.replace("[target]","'" + targetString + "'"); x = templateText.indexOf('[{'); while (x &lt; templateText.length &amp;&amp; x &gt; -1) { y = templateText.indexOf('}]', x + 2); fieldToken = templateText.substring(x, y + 2); fieldName = fieldToken.replace('[{', '').replace('}]', '').toUpperCase(); jsonValue = jsonData[i][fieldName]; if (fieldName == "REMARK_TX" &amp;&amp; jsonValue != null) { jsonValue = jsonValue.substring(0, jsonValue.length &lt;= 35 ? jsonValue.length : 35); } if (jsonValue != null &amp;&amp; jsonValue.toString().indexOf("\Date") &gt; -1 ) { if (fieldName != "UPDATED_DT") { jsonValue = new Date(parseInt(jsonValue.substr(6))).format("MM/dd/yyyy"); } else { jsonValue = new Date(parseInt(jsonValue.substr(6))).format("MM/dd/yyyy h:mm:ss tt"); } } else if (jsonValue == null) { jsonValue = ""; } //identify if the value is blank and it is being inserted //into a hyperlink (determined by the ");" following the //replacement token. //If so, insert the "disabled='true'" attribute to the string. if (jsonValue == "" &amp;&amp; templateText.substring(y + 2, y + 4) == ");") { var strDisable = " disabled='true'"; var split = y + 5; var beginning = templateText.substring(0, split); var ending = templateText.substring(split); templateText = beginning + strDisable + ending; } templateText = templateText.replace(fieldToken, jsonValue); x = templateText.indexOf('[{'); } //$("#" + category_name + "_Items").append(templateText); $(container).append(templateText); } if (parseInt(msgs[4]) &lt; parseInt(msgs[5])) { //if there are more records remaining to get... PageMethods.LoadCategoryItems(msgs[1], msgs[2], msgs[3], msgs[4], RecieveCategoryData, RecieveCategoryError); } if (getParameterByName("showCount")) { if (parseInt(msgs[4]) &lt; parseInt(msgs[5])) { window.status = "Loading " + msgs[4] + " of " + msgs[5] + "."; } else if (parseInt(msgs[4]) == parseInt(msgs[5])) { window.status = "Load Complete: " + msgs[5] + " records."; } else { //if (parseInt(categoryCount) != parseInt(msgs[4] window.status = "expecting records: " + categoryCount + " showing records: " + parseInt(msgs[4]); } } //format currency cells to $x,xxx.cc //var test = $(".jq_currFormat"); $(".jq_currFormat").each(function () { var num = $(this).text(); if (num.indexOf("]") == -1) { num = num.toString().replace(/\$|\,/g, ''); if (isNaN(num)) num = "0"; sign = (num == (num = Math.abs(num))); num = Math.floor(num * 100 + 0.50000000001); cents = num % 100; num = Math.floor(num / 100).toString(); if (cents &lt; 10) cents = "0" + cents; for (var i = 0; i &lt; Math.floor((num.length - (1 + i)) / 3); i++) num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3)); $(this).text((((sign) ? '' : '-') + '$' + num + '.' + cents)); $(this).removeClass("jq_currFormat"); } }); } } </code></pre> <p>This function will identify and copy the template for the category of data being displayed and find and replace data tokens with actual values from JSON.</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