Question

I feel really dumb for asking this question, but here it goes. I have an asp.net page that may (or may not) load text boxes on the page with Ajax depending on if certain checkboxes and other conditions are met. I also need these boxes to be hidden given certain conditions. For the use case where the text boxes are on the page during the load having my jquery in the document ready does the trick. For the other use case where the text boxes are loaded with a particular user action, the code in document ready will have no effect. I ended up taking the bulk out of document ready and placed it in its own function called “setup” which I can call after the text boxes have been loaded.

So here is the problem: I can’t figure out how to have the page call setup after those text boxes are loaded. I can’t use .ajaxComplete() (probably because asp.net isn’t using jquery to load those boxes) nor can I think of any other way to call setup at the right time. The only thing I could think of was to have the page call setup on mouseover.

This is unnecessarily greedy and frankly just really bad code. Is there an easy way to call “setup” once after those boxes are loaded?

      jQuery(document).ready(function() {
        setup("ready");

      });

      function setup(action)
      {
        if(action=="ready" || $("#<%=CurrentInventoryMode.ClientID %> option:selected").val()==1)
        {
         if(!$('#<%=AllowSub.ClientID %>').is(':checked'))
        {
            $('#<%=InStockUnits.ClientID %>').hide();
            $('#<%=LowStockUnits.ClientID %>').hide();
            $('#SellAsSpan').hide();
            $('#<%=SellAsUnit.ClientID %>').hide();
        }
        if($("#<%=SellAsUnit.ClientID %> option:selected").val()==4)
        {
            removeWeight();
        }else{
            removeMeasure();
        }
        }
       }

       $('body').mouseover(function()
       {
       //there has GOT to be a better way....
        setup();
       });

EDIT:
Here is the part of the code that does the ajax call. Its an ajax update panel

<ajax:UpdatePanel ID="InventoryAjax" runat="server" UpdateMode="conditional">
            <ContentTemplate>
                <asp:DropDownList ID="CurrentInventoryMode" runat="server" AutoPostBack="true" OnSelectedIndexChanged="CurrentInventoryMode_SelectedIndexChanged" onclick="setup();">
                    <asp:ListItem Value="0" Text="Disabled"/>
                    <asp:ListItem Value="1" Text="Track Product"/>
                    <asp:ListItem Value="2" Text="Track Variants"/>
                </asp:DropDownList>

I tried putting setup in the onclick, but it fires before the boxes load so its kind of worthless :(.

Answer 1

UpdatePanels replace the HTML when updated. So the new HTML needs to be rebound. Here is a javascript block to get you going:

    function pageLoaded(sender, args) {
        // There are two arrays (created and updated). Treat them separately if if makes sense
        var updatePanels = args.get_panelsUpdated().concat(args.get_panelsCreated());
        for (var i = 0; i < updatePanels.length; i++) {
            if (updatePanels[i].id == "<%= UpdatePanel1.ClientID %>"){
                // code to bind contents of UpdatePanel1
            }
        }
    }
    $(document).ready(function () {
        // Handle updatepanel updates
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
    });