How to Move div from one place to another without loosing its Events using jquery in Update Panel?

StackOverflow https://stackoverflow.com/questions/21979327

  •  15-10-2022
  •  | 
  •  

Question

I have a Menu on the left and clicking on left menu say "Sales" it shows the Categories on right(sub menus). and clicking on submenu it shows again sub-categories so on..! Now what i need is When user clicks on right side menu the menus must be moved on left side and the sub-scategories must be shown on right and vice versa.

Eg: When i click on "Sales" it shows "Categories" (on right) . when i click on "Categories"(on right) it shows "Manufacturers" (on right) and "Categories" div must be moved on left. and clicking on "Manufactureres" it shows "Carrier" (on right) and "Manufactureres" on left and then it must shows the "Devices".

Sales->Categories->Manufacturers->Carriers->Devices

I have tried with the following but it Copies the Div content from Div1 to Div2 and doesnt replace the div content and hence it think it loosing its events.

Note: All the Subcategories are displayed in DataList Control within the Updatte Panel.

Left Content Div:

<div id="divMainCateogories">
<asp:Repeater ID="rptItemsList" runat="server" DataSourceID="sqlSalesCategoryList"
    OnItemCommand="rptItemsList_ItemCommand" OnItemDataBound="rptItemsList_ItemDataBound"
    OnItemCreated="rptItemsList_ItemCreated">
    <HeaderTemplate>
        <table width="100%" border="0" cellspacing="0" cellpadding="6">
            <tr>
                <td align="center" style="padding: 0px; border-right-style: solid; border-left-style: solid;
                    border-bottom-style: solid; border-width: 1px; border-color: #C0C0C0; text-align: left;">
                </td>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td align="center" colspan="8" style="padding: 0px; border-right-style: solid; border-left-style: solid;
                border-bottom-style: solid; border-width: 1px; border-color: #C0C0C0; text-align: left;">
                <asp:Button ID="BtnCategory" runat="server" class="btnCat" categoryid='<%#Eval("CategoryID")%>'
                    Style="font-size: 16px; width: 200px; height: 35px; margin: 5px;" Text='<%#Eval("DisplayText")%>'
                    CommandArgument='<%#Eval("CategoryID")%>' CommandName='<%#Eval("CategoryName")%>' /><br />
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="sqlSalesCategoryList" runat="server" ConnectionString="<%$ ConnectionStrings:GeexConnString %>"
    SelectCommand="p_Sales_GetSalesCategoryList" SelectCommandType="StoredProcedure">
</asp:SqlDataSource>
</div>
<div id="divDump">
<div id="divDeviceCategoryLeft">
</div>
<div id="divManufacturerLeft">
</div>
<div id="divCarrierLeft">
</div>
</div>

RightContent:

<div id="divDeviceCategory">
 <div id="divDeviceCategoryInner">
    <asp:HiddenField ID="hdnSelectedKioskID" runat="server" />
    <div class="headertext">
        Categories:&nbsp;&nbsp; <b>
            <asp:Label ID="lblCategoryName" runat="server"></asp:Label>
        </b>
    </div>
    <div><%--RepeatColumns="8" RepeatDirection="Horizontal"--%>
        <asp:DataList ID="dlDeviceCategory4Cart" DataSourceID="SqlDataSource1" runat="server"
            DataKeyField="DeviceCategoryID" 
            ItemStyle-VerticalAlign="Top" OnItemCommand="dlDeviceCategory4Cart_ItemCommand"
            OnItemCreated="dlDeviceCategory4Cart_ItemCreated">
            <ItemTemplate>
                <asp:HiddenField ID="hdnDeviceCategoryID" runat="server" Value='<%# Eval("DeviceCategoryID") %>' />
                <asp:HiddenField ID="hdnCategoryName" runat="server" Value='<%# Eval("CategoryName") %>' />
                <asp:Button ID="BtnDeviceCategory" runat="server" class="pushButton" Text='<%# Eval("CategoryName") %>'
                    CommandName="GetManufacturers" CommandArgument='<%# Eval("DeviceCategoryID") %>' /></p>
            </ItemTemplate>
        </asp:DataList>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:GeexConnString %>"
        SelectCommand="p_Sales_GetDeviceCategory4Cart" SelectCommandType="StoredProcedure">
        <SelectParameters>
            <asp:ControlParameter ControlID="hdnSelectedKioskID" ConvertEmptyStringToNull="true"
                PropertyName="Value" DefaultValue="6" Name="LoggedInKioskID" Type="Int32" />
        </SelectParameters>
    </asp:SqlDataSource>
</div>
</div>
<div id="divManufacturer">

<div id="divManufacturerInner">
<asp:UpdatePanel ID="updateManufacturer" runat="server">

    <Triggers>
    </Triggers>
    <ContentTemplate>
        <asp:HiddenField ID="hdnSelectedCategoryID" runat="server" />
        <div class="headertext">
            Manufacturer:&nbsp;&nbsp; <b>
                <asp:Label ID="lblManufacturer" runat="server"></asp:Label>
            </b>
        </div>
        <div>
            <asp:DataList ID="dlManufacturerList" DataSourceID="SqlManufacturer" runat="server"
                DataKeyField="ManufacturerID" RepeatColumns="10" RepeatDirection="Horizontal"
                ItemStyle-VerticalAlign="Top" OnItemCommand="dlManufacturerList_ItemCommand"
                OnItemCreated="dlManufacturerList_ItemCreated">
                <ItemTemplate>
                    <asp:HiddenField ID="hdnManufacturerID" runat="server" Value='<%# Eval("ManufacturerID") %>' />
                    <asp:HiddenField ID="hdnManufacturer" runat="server" Value='<%# Eval("Manufacturer") %>' />
                    <asp:Button ID="BtnManufacturer" runat="server" class="pushButton" Text='<%# Eval("Manufacturer") %>'
                        CommandName="GetCarrier" CommandArgument='<%# Eval("ManufacturerID") %>' /></p>
                </ItemTemplate>
            </asp:DataList>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlManufacturer" runat="server" ConnectionString="<%$ ConnectionStrings:GeexConnString %>"
    SelectCommand="p_Sales_GetManufacturers4Cart" SelectCommandType="StoredProcedure">
    <SelectParameters>
        <asp:ControlParameter ControlID="hdnSelectedCategoryID" ConvertEmptyStringToNull="true"
            PropertyName="Value" DefaultValue="0" Name="CategoryID" Type="Int32" />
    </SelectParameters>
</asp:SqlDataSource>
</div>
<div id="divCarrier">
<div id="divCarrierInner">
//datalist here
</div>
</div>

</div>

In Code Behind:

//Level 1: Device category Click
    protected void dlDeviceCategory4Cart_ItemCreated(object sender, DataListItemEventArgs e)
    {
        var control = e.Item.FindControl("BtnDeviceCategory");
        ScriptManager.GetCurrent(Page).RegisterAsyncPostBackControl(control);
    }
    protected void dlDeviceCategory4Cart_ItemCommand(object source, DataListCommandEventArgs e)
    {
        HiddenField hdnDeviceCategoryID = (HiddenField)e.Item.FindControl("hdnDeviceCategoryID");
        HiddenField hdnCategoryName = (HiddenField)e.Item.FindControl("hdnCategoryName");
        if (e.CommandName == "GetManufacturers")
        {
            hdnSelectedCategoryID.Value = hdnDeviceCategoryID.Value;
            lblCategoryName.Text = hdnCategoryName.Value;
            dlManufacturerList.DataBind();
            dlDeviceCategory4Cart.RepeatDirection = RepeatDirection.Vertical;
            ScriptManager.RegisterStartupScript(this, this.GetType(), DateTime.Now.ToString(), "ShiftCategoriesLeft();", true);
            //updateManufacturer.Update();
        }
    }

    //Level 2: Manufacturer Click
    protected void dlManufacturerList_ItemCommand(object source, DataListCommandEventArgs e)
    {
        HiddenField hdnManufacturerID = (HiddenField)e.Item.FindControl("hdnManufacturerID");
        HiddenField hdnManufacturer = (HiddenField)e.Item.FindControl("hdnManufacturer");

        if (e.CommandName == "GetCarrier")
        {
            hdnSelectedManufacturerID.Value = hdnManufacturerID.Value;
            dlCarriers4Cart.DataBind();
            lblManufacturer.Text = hdnManufacturer.Value;

            //updateCarrier.Update();
        }
    }
    protected void dlManufacturerList_ItemCreated(object sender, DataListItemEventArgs e)
    {
        var control = e.Item.FindControl("BtnManufacturer");
        ScriptManager.GetCurrent(Page).RegisterAsyncPostBackControl(control);
    }

Jquery Script:

 function ShiftCategoriesLeft() {
            //$("#divMainCateogories").css("display", "none");
            //$("#divDeviceCategoryLeft").html($("#divDeviceCategoryInner").html())

            // Move the div from #divDeviceCategoryInner to #divDeviceCategoryLeft
            //$('#divDeviceCategoryLeft').append($("#divDeviceCategoryInner").html());

        }

Now, here it copies the div content and doesnt replace and also it looses the events too..! No Master Page here enter image description here Help Appreicated!

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top