How to Move div from one place to another without loosing its Events using jquery in Update Panel?
-
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: <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: <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
Help Appreicated!
No correct solution