Question

(I work in asp.net)
I’m looking for a way to have a div with a jquery.toggle ( plus/less button)

the content of the div need to load only when the div is visible (need to be hide on page load).

Did I “NEED” to have a page with the content of my div

Or I can use an updatepanel inside the div. And call the panel to load his content.

I dont wnat my page to reload because I have multiple block div, in the page, that can be loaded if the user want it. and each of them have too many data inside.

Any tips,
tank you

Answer 1

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…

If this matches your needs, great; if not, please be more specific what you are trying to accomplish.

[Edit: code sample as requested]

<div>
<asp:Repeater ID="CategoryRepeater" runat="server">
    <HeaderTemplate><div id="CategorySpace"></HeaderTemplate>
    <ItemTemplate>
        <div id="CategoryHeaderRow_<%# Eval("CATEGORY_NM").ToString().Replace(" ","_").Strip("(,),-,/") %>" class="CategoryHeader">
            <input type="hidden" id="CategoryID" runat="server" value='<%# Eval("CATEGORY_ID") %>' />
            <!-- THIS IS THE EXPANSION ICON -->
            <input type="button" id="expandCategory_<%# Eval("CATEGORY_NM").ToString() %>" class="CategoryExpandButton" value="+" onclick="expandCategory(this,'<%# ((CRMS.PageBase)this.Page).UserId %>','<%# Eval("CATEGORY_ID") %>');" isloaded="<%#(string)Eval("LOAD_ON_DEMAND_CD")=="N"?"Y":"N" %>" />

            <span id="CategoryCount_<%# Eval("CATEGORY_NM").ToString().Replace(" ","_").Strip("(,),-,/")  %>" class="CategoryLabel" style="width:50px;"><%# Eval("Count_Qy")%></span>
            <span id="CategoryName" class="CategoryLabel"><%# Eval("CATEGORY_NM") %></span>
            <img id="InfoIcon_<%# Eval("CATEGORY_NM") %>" src="images/InfoIcon.png" alt="<%# Eval("CATEGORY_INFO_TX") %>" class="CategoryInfo" />
        </div> 
        <div id="categoryItems_<%# Eval("CATEGORY_NM").ToString().Replace(" ","_").Strip("(,),-,/") %>"  class="hidden itemsContainer " style="width:990px;overflow:scroll;">
            <div id="categoryItems" runat="server">
            </div>
        </div>

    </ItemTemplate>
    <FooterTemplate></div></FooterTemplate>
</asp:Repeater>
</div>

The click event of the Expansion Icon fires this JavaScript:

/*
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 == "+"
            && 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 < 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";
    }
}

When you invoke PageMethods.LoadCategoryItems... this should be a typical ajax call to send back the content into another JavaScript function:

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]) < 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 < 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 < templateText.length && x > -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" && jsonValue != null) {
                    jsonValue = jsonValue.substring(0, jsonValue.length <= 35 ? jsonValue.length : 35);
                }

                if (jsonValue != null &&
                    jsonValue.toString().indexOf("\Date") > -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 == ""
                    && 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]) < 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]) < 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 < 10) cents = "0" + cents;
                for (var i = 0; i < 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");
            }
        });


    }
}

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.