(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

• jquery
• asp.net

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.

I have done this many times, I usually hide my div at the very top of the javascript and then show on whatever event makes sense. How you load the div makes no difference, the only thing which I sometimes find annoying is finding the appropriate div since we still use the way that ASP.NET rewrites the control names. This is easy to fix by using ends with selector in jQuery.

HTH

If you just want to hide/ show some information, you can use it by hiding and showing the data inside a div like this

<a href="#" id="link">Show</a>

<div id="divMore" style="display:none;">
    <p>some content goes here</p>
</div>

and script is

$(function(){
    $("#link").click(function(){       
       if($(this).text()=="Show") 
       {
           $("#divMore").slideDown();
           $(this).text("Hide");
       }
       else
       {
           $("#divMore").slideUp();
           $(this).text("Show");
       }           
    });    
});​

Here is one sample http://jsfiddle.net/VdPAz/8/

If you have to show some large dynamic content based on some element in the page ( ex: Showing the payment history in a table when clicking on a User's name), you may do jQuery load to get that data

 var userId=5; // read from the page/source of click
 $("#divMore").load("getuserdata.php?userid="+userId);

Sure, you can use a UserControl for that.

This would be A's code:

<tr>
    <td>
        <asp:UpdatePanel runat="server" ID="uppShowB" UpdateMode="Conditional">
            <ContentTemplate>
                <br />
                <asp:LinkButton runat="server" ID="btnShowB" Text="(+)"
                    OnClick="btnShowB_Click"></asp:LinkButton>
                <wuc:BControl runat="server" ID="wucBControl" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </td>
</tr>

//Invocation of the javascript function that will show ControlB as a jquery Dialog
protected void btnShowB_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this.uppShowB, typeof(UpdatePanel), "popupB", "ShowB('" + this.wucBControl.GetPanelId() + "," + this.btnShowB.ClientID + "');", true);
}

In the ControlB, you have to put everything inside a Panel and make sure it has display:none in its style

<asp:Panel runat="server" ID="pnlBPanel" CssClass="Invisible">

</asp:Panel>

//and in the css:

.Invisible
{
    display: none;
}

//and in the cs:
public string GetPanelId()
{
    return this.pnlPopUpDetalles.ClientID;
}

And finally, the javascript function that shows ControlB: (it is shown without title and below the toggle (+) button. Maybe the coordinates thing need some adjustment)

function ShowB(panelClientId, btnToggleClientId)
{        
    ancho = 250;
    alto = 'auto';
    var x = $("#btnToggleClientId").offset().left + $("#btnToggleClientId").outerWidth() - ancho;
    var y = $("#btnToggleClientId").offset().top + $("#btnToggleClientId").outerHeight() - $(document).scrollTop();            
    var $dialog = $("#panelClientId")
        .dialog({
            autoOpen: false,
            hide: "puff",                   
            width: ancho,
            height: alto,
            draggable: false,
            resizable: true,
            closeOnScape : true,
            position: [x,y]                    
        });
    $dialog.dialog("open");            
    $("#panelClientId").siblings(".ui-dialog-titlebar").hide();

    $("#panelClientId").focus();

    $("body")
      .bind(
       "click",
       function(e){
            if(
                 $("#panelClientId").dialog("isOpen")
                 && !$(e.target).is(".ui-dialog, a")
                 && !$(e.target).closest(".ui-dialog").length
              )
            {
             jQuery("#panelClientId").dialog("close");
            }
       });                        
    return false;
}