I have a clash in in asp.net ajax and jquery code. Since I added ajax to ( using updatePanel to update specific areas on the form) my asp.net vb code my jquery code stopped working or does not run. Here is the .aspx. Here is the Jquery code in my .aspx
file. Is it possible to have Jquery $(document).read() and asp.net ajax asynchronous postback?? Please help. What do I need to add to my Jquery code to make it work.
If there is post back happend, the JQuery part will not work.So You Should call the Jquery function in the ScriptManager.RegisterStartupScript.........
Please, Mark as Answer if this reply helped you
Harikrishnan.S
instead of using $(document).ready(), you should move the code to the global pageLoad function:
function pageLoad() { ... move code here ... }
It's important to keep in mind that
$(document).ready() runs once
pageLoad runs when the page first loads, and after every partial postback
<div>In $(document).ready(), you get references to DOM elements using selectors. Then, you attach event handlers to these elements. </div><div>
</div><div>When you perform a partial postback (i.e. when the UpdatePanel updates) you are replacing these DOM elements with updated markup. The references to the elements in $(document).ready() are not valid anymore. You need to run the code on each partial
postback to re-attach event handlers to the updated elements.</div><div>
</div>
Well now, The Jquery Click Events sometimes responds to clicks and sometimes they do not responds to clicks. It is not consistent. But it is better than before when I had no response from the click events. I tried changing this Jquery code from
$('.find_assets').toggle();
to
if ($('.find_assets').is(':visible')
$('.find_assets')..hide();
else
$('.find_assets').show(); BUT IT IS still NOT CONSISTENT.
Protected Sub DropDownListFoundations_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DropDownListFoundations.SelectedIndexChanged
'Register/attach Jquery script to html Page DOM
'ScriptManager.RegisterStartupScript(Page, Page.GetType(), "script11", "test();", True)
'Pass in Organization id value key
PrepopulateAGDData(DropDownListFoundations.SelectedValue)
End Sub
jeanclaudeT
Member
14 Points
67 Posts
ASP.NET Ajax Update panel and Jquery
Jul 16, 2009 07:26 PM|LINK
I have a clash in in asp.net ajax and jquery code. Since I added ajax to ( using updatePanel to update specific areas on the form) my asp.net vb code my jquery code stopped working or does not run. Here is the .aspx. Here is the Jquery code in my .aspx file. Is it possible to have Jquery $(document).read() and asp.net ajax asynchronous postback?? Please help. What do I need to add to my Jquery code to make it work.
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".find_assets, .find_grants, .dues_info, .pageloading").hide();
$(".btn_assets").click(function() {
$(".find_assets").toggle();
$(".dues_info").hide();
$(".find_grants").hide();
});
$(".btn_grants").click(function() {
$(".find_grants").toggle();
$(".dues_info").hide();
$(".find_assets").hide();
});
$(".btn_dues").click(function() {
$(".dues_info").toggle();
$(".find_grants").hide();
$(".find_assets").hide();
});
$('#SubmitBtn').click(function() {
$('#SubmitBtn').hide();
$('.pageloading').show();
});
});
</script>
<body>
<form id="form1" runat="server" target="_parent">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:Label ID="foundationsName" runat="server"></asp:Label></h1>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownListFoundations" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<div>
<div>
or Select Another Foundation</div>
<span>
<asp:DropDownList ID="DropDownListFoundations" runat="server" AutoPostBack="True" />
</span>
</div>
<asp:UpdatePanel ID="UpdatePanel10" runat="server">
<ContentTemplate>
<table width="100%" border="0" cellspacing="0" cellpadding="6">
...................
.........................
some code here
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownListFoundations" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<h2>
Average Assets</h2>
<asp:Label ID="AVG_AssetsLabel" runat="server"></asp:Label>
<h2>
Average Grants</h2>
<asp:Label ID="AVG_GrantsLabel" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Assets1TextBox" EventName="TextChanged" />
<asp:AsyncPostBackTrigger ControlID="Assets2TextBox" EventName="TextChanged" />
<asp:AsyncPostBackTrigger ControlID="Assets3TextBox" EventName="TextChanged" />
<asp:AsyncPostBackTrigger ControlID="Grants1TextBox" EventName="TextChanged" />
<asp:AsyncPostBackTrigger ControlID="Grants2TextBox" EventName="TextChanged" />
<asp:AsyncPostBackTrigger ControlID="Grants3TextBox" EventName="TextChanged" />
<asp:AsyncPostBackTrigger ControlID="DropDownListFoundations" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
harieis
Participant
782 Points
242 Posts
Re: ASP.NET Ajax Update panel and Jquery
Jul 17, 2009 04:17 AM|LINK
If there is post back happend, the JQuery part will not work.So You Should call the Jquery function in the ScriptManager.RegisterStartupScript.........
Harikrishnan.S
jeanclaudeT
Member
14 Points
67 Posts
Re: ASP.NET Ajax Update panel and Jquery
Jul 17, 2009 03:34 PM|LINK
Would you show me an example of the use of the ScriptManager.RegisterStartupScript with a Jquery $('.className').click(function). Thank you.
Garbin
Contributor
7428 Points
1507 Posts
ASPInsiders
Re: ASP.NET Ajax Update panel and Jquery
Jul 18, 2009 07:01 AM|LINK
Hello,
instead of using $(document).ready(), you should move the code to the global pageLoad function:
function pageLoad() { ... move code here ... }
It's important to keep in mind that
- $(document).ready() runs once
- pageLoad runs when the page first loads, and after every partial postback
<div>In $(document).ready(), you get references to DOM elements using selectors. Then, you attach event handlers to these elements. </div><div></div><div>When you perform a partial postback (i.e. when the UpdatePanel updates) you are replacing these DOM elements with updated markup. The references to the elements in $(document).ready() are not valid anymore. You need to run the code on each partial postback to re-attach event handlers to the updated elements.</div><div>
</div>
harieis
Participant
782 Points
242 Posts
Re: ASP.NET Ajax Update panel and Jquery
Jul 20, 2009 03:59 AM|LINK
Write this code in the button click
ScriptManager.RegisterStartupScript(Page , Page.GetType() , "Hello" , "test();" , true);
write this on ur aspx page
function test()
{
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
----------------------- your JQuery code-------------
});
});
</script>
}
Harikrishnan.S
jeanclaudeT
Member
14 Points
67 Posts
Re: ASP.NET Ajax Update panel and Jquery
Jul 20, 2009 12:51 PM|LINK
Well now, The Jquery Click Events sometimes responds to clicks and sometimes they do not responds to clicks. It is not consistent. But it is better than before when I had no response from the click events. I tried changing this Jquery code from
$('.find_assets').toggle();
to
if ($('.find_assets').is(':visible')
$('.find_assets')..hide();
else
$('.find_assets').show(); BUT IT IS still NOT CONSISTENT.
in my aspx I have
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
function test()
{
$(document).ready(function() {
$('.find_assets, .find_grants, .dues_info, .pageloading').hide();
$('.btn_assets').click(function() {
$('.find_assets').toggle();
$('.dues_info').hide();
$('.find_grants').hide();
});
$('.btn_grants').click(function() {
$('.find_grants').toggle();
$('.dues_info').hide();
$('.find_assets').hide();
});
$('.btn_dues').click(function() {
$('.dues_info').toggle();
$('.find_grants').hide();
$('.find_assets').hide();
});
$('#SubmitBtn').click(function() {
$('#SubmitBtn').hide();
$('.pageloading').show();
});
});
}
</script>
behind code I have
Protected Sub DropDownListFoundations_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DropDownListFoundations.SelectedIndexChanged
'Register/attach Jquery script to html Page DOM
'ScriptManager.RegisterStartupScript(Page, Page.GetType(), "script11", "test();", True)
'Pass in Organization id value key
PrepopulateAGDData(DropDownListFoundations.SelectedValue)
End Sub