jquery asp load content

Go To StackoverFlow.com

0

(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

2012-04-03 19:49
by forX
So you want to have a button, which gets the content via AJAX, then loads it into a div, and shows the div - Marco Johannesen 2012-04-03 19:52
yes, but if possible, its the same page who will get the data. I fact, my div is on a usercontrol, so I want to put him in a page, and when I show the div, the control load (and show) the content - forX 2012-04-03 19:56


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.

2012-04-03 19:56
by Cos Callis
its something like your thing, but the content is on a usercontrol. So, I think to create a usercontrol "A". "A" have the expansion control. when is clicked, he show usercontrol "B". "B" is full set to get is data and show them. So How "A" can load "B" - forX 2012-04-03 20:03
Finaly, I decide to use updatepanel on my control, so using the postback for loading content.

tank you for your answer, If I see that its too heavy, I will looking more of jquery loa - forX 2012-04-03 20:25

Did you have a sample of code for the expansion icon click - forX 2012-04-03 20:26


0

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

2012-04-03 20:00
by Anthony Potts
Use .NET 4 or above and set your ClientIdMode to static (or predictable, depending on the situation) - walther 2012-04-03 20:21
I'm in .net 3. - forX 2012-04-03 20:24
Yeah, I use that on other projects, but one in particular has not been upgraded. In the mean time, I thought I would mention it for completeness - Anthony Potts 2012-04-04 15:46


0

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);
2012-04-03 20:01
by Shyju
maybe something like that with something like this : http://www.codeproject.com/Articles/117475/Load-ASP-Net-User-Control-Dynamically-Using-jQuery I can load my control with jquery loa - forX 2012-04-03 20:11


0

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;
}
2012-04-03 20:24
by daniloquio
Ads