jqueryasp.netasynchronousupdatepanel
jquery not work after async post back ocuur
I use below code for toggling my main navigation :
$(document).ready(function () {
var body, click_event, content, nav, nav_toggler;
nav_toggler = $("header .toggle-nav");
nav = $("#main-nav");
content = $("#content");
body = $("body");
click_event = (jQuery.support.touch ? "tap" : "click");
$("#main-nav .dropdown-collapse").on(click_event, function (e) {
var link, list;
e.preventDefault();
link = $(this);
list = link.parent().find("> ul");
if (list.is(":visible")) {
if (body.hasClass("main-nav-closed") && link.parents("li").length === 1) {
false;
} else {
link.removeClass("in");
list.slideUp(300, function () {
return $(this).removeClass("in");
});
}
} else {
if (list.parents("ul.nav.nav-stacked").length === 1) {
$(document).trigger("nav-open");
}
link.addClass("in");
list.slideDown(300, function () {
return $(this).addClass("in");
});
}
return false;
});
if (jQuery.support.touch) {
nav.on("swiperight", function (e) {
return $(document).trigger("nav-open");
});
nav.on("swipeleft", function (e) {
return $(document).trigger("nav-close");
});
}
nav_toggler.on(click_event, function () {
if (nav_open()) {
$(document).trigger("nav-close");
} else {
$(document).trigger("nav-open");
}
return false;
});
$(document).bind("nav-close", function (event, params) {
var nav_open;
body.removeClass("main-nav-opened").addClass("main-nav-closed");
return nav_open = false;
});
return $(document).bind("nav-open", function (event, params) {
var nav_open;
body.addClass("main-nav-opened").removeClass("main-nav-closed");
return nav_open = true;
});
});
this.nav_open = function () {
return $("body").hasClass("main-nav-opened") || $("#main-nav").width() > 50;
};
but this code not worked after async post back occur in asp.net. please help me to know why this happen, and how I chnage this code to toggle menu after post back.
this is my menu before toggle :
and this is my menu after toggling :
and this is my asp.net codes:
<nav id='main-nav'>
<asp:UpdatePanel runat="server" ID="upExpander">
<ContentTemplate>
<asp:HiddenField ID="hfMenu" runat="server" Value="1" />
<div class='navigation'>
<ul class='nav nav-stacked'>
<li>
<a href="#" class="dropdown-collapse">
<i class="icon-gears"></i>
<span><%=Resources.Titles.ProjectList %></span>
<i class="icon-angle-down angle-down"></i>
</a>
<ul class='nav nav-stacked'>
<asp:HiddenField runat="server" ID="hfFolderID" />
<asp:ListView ID="lvProjects" runat="server" DataSourceID="odsProject" DataKeyNames="ID" OnItemDataBound="lvProjects_ItemDataBound">
<ItemTemplate>
<li>
<asp:LinkButton ID="lbtnProject" runat="server" OnClick="lbtnProject_Click" data-expand="collapse">
<i class='icon-gears'></i>
<span><%#System.Convert.ToString(Eval("Name").ToString().Length<30 ? Eval("Name") : Eval("Name").ToString().Substring(0,30) + "..." ) %></span>
</asp:LinkButton>
<ul class='nav nav-stacked'>
<asp:ListView ID="lvFolder" runat="server" DataKeyNames="ID" OnItemDataBound="lvFolder_ItemDataBound">
<ItemTemplate>
<li>
<asp:LinkButton ID="lbtnFolder" runat="server" OnClick="lbtnFolder_Click">
<i class='icon-folder'></i>
<span><%#System.Convert.ToString(Eval("Name").ToString().Length<30 ? Eval("Name") : Eval("Name").ToString().Substring(0,30) + "..." ) %></span>
</asp:LinkButton>
<asp:LinkButton ID="lbtnAddDocument" runat="server" CssClass="addDocument" OnClientClick="ShowModalBox('modal_AddDocument');" OnClick="lbtnAddDocument_Click">
<i class="icon icomoon-icon-AddDocument hasTooltip" title="<%=Resources.Titles.AddDocument %>"></i>
</asp:LinkButton>
</li>
</ItemTemplate>
</asp:ListView>
</ul>
<asp:LinkButton ID="lbtnAddFolder" runat="server" CssClass="addFolder" OnClientClick="ShowModalBox('AddFolderModal');" OnClick="lbtnAddFolder_Click">
<i class="icon icomoon-icon-AddFolder hasTooltip" title="<%=Resources.Titles.AddFolder %>"></i>
</asp:LinkButton>
</li>
</ItemTemplate>
</asp:ListView>
<asp:ObjectDataSource ID="odsProject" runat="server" TypeName="DMS.Data.ProjectProvider" SelectMethod="GetUserProjects" OnSelecting="odsProject_Selecting">
<SelectParameters>
<asp:Parameter Name="userID" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
</ul>
</li>
<%--<li>
<a href="#" class="dropdown-collapse">
<i class="icon-gears"></i>
<span><%=Resources.Titles.MyFolders %></span>
<i class="icon-angle-down angle-down"></i>
</a>
<ul class='nav nav-stacked'>
<asp:HiddenField runat="server" ID="hfMyFolderID" />
<asp:ListView ID="lvMyFolders" runat="server" DataSourceID="odsMyFolders" DataKeyNames="ID" OnItemDataBound="">
<ItemTemplate>
<li>
<asp:LinkButton ID="lbtnMyFolder" runat="server" OnClick="">
<i class='icon-gears'></i>
<span><%#System.Convert.ToString(Eval("Name").ToString().Length<30 ? Eval("Name") : Eval("Name").ToString().Substring(0,30) + "..." ) %></span>
</asp:LinkButton>
<ul class='nav nav-stacked'>
<asp:Literal runat="server" ID="litSubfolders"/>
</ul>
<asp:LinkButton ID="lbtnAddFolder" runat="server" CssClass="addFolder" OnClientClick="ShowModalBox('AddFolderModal');" OnClick="lbtnAddFolder_Click">
<i class="icon icomoon-icon-AddFolder hasTooltip" title="<%=Resources.Titles.AddFolder %>"></i>
</asp:LinkButton>
</li>
</ItemTemplate>
</asp:ListView>
<asp:ObjectDataSource ID="odsMyFolders" runat="server" TypeName="DMS.Data.VirtualFolderProvider" SelectMethod="GetUserFolders" OnSelecting="">
<SelectParameters>
<asp:Parameter Name="userID" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
</ul>
</li>--%>
</ul>
</div>
</ContentTemplate>
</asp:UpdatePanel>
and this is generated html code :
<nav id="main-nav">
<div id="ucExpander_upExpander">
<input type="hidden" name="ctl00$ucExpander$hfMenu" id="ucExpander_hfMenu" value="ucExpander_lvProjects_lbtnProject_0">
<div class="navigation">
<ul class="nav nav-stacked">
<li>
<a href="#" class="dropdown-collapse in">
<i class="icon-gears"></i>
<span>لیست پروژه ها</span>
<i class="icon-angle-down angle-down"></i>
</a>
<ul class="nav nav-stacked in" style="display: block;">
<input type="hidden" name="ctl00$ucExpander$hfFolderID" id="ucExpander_hfFolderID">
<li>
<a onclick="updateExpandData(this, 'ucExpander_hfMenu');" id="ucExpander_lvProjects_lbtnProject_0" class="dropdown-collapse" data-expand="collapse" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lbtnProject','')">
<i class="icon-gears"></i>
<span>سامانه مدیریت اسناد</span>
<i class="icon-angle-down angle-down"></i></a>
<ul class="nav nav-stacked" style="display: none;">
<li>
<a id="ucExpander_lvProjects_lvFolder_0_lbtnFolder_0" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl0$lbtnFolder','')">
<i class="icon-folder"></i>
<span>aa</span>
</a>
<a onclick="ShowModalBox('modal_AddDocument');" id="ucExpander_lvProjects_lvFolder_0_lbtnAddDocument_0" class="addDocument" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl0$lbtnAddDocument','')">
<i class="icon icomoon-icon-AddDocument hasTooltip" title="" data-original-title="درج سند جدید"></i>
</a>
</li>
<li>
<a id="ucExpander_lvProjects_lvFolder_0_lbtnFolder_1" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl1$lbtnFolder','')">
<i class="icon-folder"></i>
<span>bb</span>
</a>
<a onclick="ShowModalBox('modal_AddDocument');" id="ucExpander_lvProjects_lvFolder_0_lbtnAddDocument_1" class="addDocument" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl1$lbtnAddDocument','')">
<i class="icon icomoon-icon-AddDocument hasTooltip" title="" data-original-title="درج سند جدید"></i>
</a>
</li>
<li>
<a id="ucExpander_lvProjects_lvFolder_0_lbtnFolder_2" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl2$lbtnFolder','')">
<i class="icon-folder"></i>
<span>cc</span>
</a>
<a onclick="ShowModalBox('modal_AddDocument');" id="ucExpander_lvProjects_lvFolder_0_lbtnAddDocument_2" class="addDocument" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl2$lbtnAddDocument','')">
<i class="icon icomoon-icon-AddDocument hasTooltip" title="" data-original-title="درج سند جدید"></i>
</a>
</li>
<li>
<a id="ucExpander_lvProjects_lvFolder_0_lbtnFolder_3" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl3$lbtnFolder','')">
<i class="icon-folder"></i>
<span>dd</span>
</a>
<a onclick="ShowModalBox('modal_AddDocument');" id="ucExpander_lvProjects_lvFolder_0_lbtnAddDocument_3" class="addDocument" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl3$lbtnAddDocument','')">
<i class="icon icomoon-icon-AddDocument hasTooltip" title="" data-original-title="درج سند جدید"></i>
</a>
</li>
<li>
<a id="ucExpander_lvProjects_lvFolder_0_lbtnFolder_4" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl4$lbtnFolder','')">
<i class="icon-folder"></i>
<span>ee</span>
</a>
<a onclick="ShowModalBox('modal_AddDocument');" id="ucExpander_lvProjects_lvFolder_0_lbtnAddDocument_4" class="addDocument" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl4$lbtnAddDocument','')">
<i class="icon icomoon-icon-AddDocument hasTooltip" title="" data-original-title="درج سند جدید"></i>
</a>
</li>
</ul>
<a onclick="ShowModalBox('AddFolderModal');" id="ucExpander_lvProjects_lbtnAddFolder_0" class="addFolder" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lbtnAddFolder','')">
<i class="icon icomoon-icon-AddFolder hasTooltip" title="" data-original-title="ایجاد فولدر"></i>
</a>
</li>
<li>
<a onclick="updateExpandData(this, 'ucExpander_hfMenu');" id="ucExpander_lvProjects_lbtnProject_1" class="dropdown-collapse" data-expand="collapse" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl1$lbtnProject','')">
<i class="icon-gears"></i>
<span>سامانه مدیریت و درج روزانه کار...</span>
<i class="icon-angle-down angle-down"></i></a>
<ul class="nav nav-stacked">
<li>
<a id="ucExpander_lvProjects_lvFolder_1_lbtnFolder_0" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl1$lvFolder$ctrl0$lbtnFolder','')">
<i class="icon-folder"></i>
<span>bbb</span>
</a>
<a onclick="ShowModalBox('modal_AddDocument');" id="ucExpander_lvProjects_lvFolder_1_lbtnAddDocument_0" class="addDocument" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl1$lvFolder$ctrl0$lbtnAddDocument','')">
<i class="icon icomoon-icon-AddDocument hasTooltip" title="" data-original-title="درج سند جدید"></i>
</a>
</li>
<li>
<a id="ucExpander_lvProjects_lvFolder_1_lbtnFolder_1" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl1$lvFolder$ctrl1$lbtnFolder','')">
<i class="icon-folder"></i>
<span>ff</span>
</a>
<a onclick="ShowModalBox('modal_AddDocument');" id="ucExpander_lvProjects_lvFolder_1_lbtnAddDocument_1" class="addDocument" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl1$lvFolder$ctrl1$lbtnAddDocument','')">
<i class="icon icomoon-icon-AddDocument hasTooltip" title="" data-original-title="درج سند جدید"></i>
</a>
</li>
</ul>
</li>
<li>
<a onclick="updateExpandData(this, 'ucExpander_hfMenu');" id="ucExpander_lvProjects_lbtnProject_2" data-expand="collapse" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl2$lbtnProject','')">
<i class="icon-gears"></i>
<span>سامانه مدیریت هوشمند ماموریت</span>
</a>
<ul class="nav nav-stacked">
</ul>
</li>
<li>
<a onclick="updateExpandData(this, 'ucExpander_hfMenu');" id="ucExpander_lvProjects_lbtnProject_3" data-expand="collapse" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl3$lbtnProject','')">
<i class="icon-gears"></i>
<span>سامانه مهر بندرعباس</span>
</a>
<ul class="nav nav-stacked">
</ul>
</li>
</ul>
</li>
</ul>
</div>
please help me to solve this problem. thank you
Solution
You don't tell what the asynchronous postback does, but as there are not ASP.NET controls in the code that you show, I assume that it's all inside a control.
That means that the code is replaced by a new version of the same by the asynchronous call, so any events that you bound to the elements are gone as those elements doesn't exist any more.
You can use delegated events to bind the event outside the elements that are replaced by the asynchronous call. This will bind it to the body element, but you should use an element closer to the target elements if possible:
$("body").on(click_event, "#main-nav .dropdown-collapse", function (e) {
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices