This is a migrated thread and some comments may be shown as answers.

jQuery script is not working after postback when using with ajax manager

5 Answers 505 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

Muhahammad asked on 17 Jan 2012, 11:28 PM

I have the following issues when using jquery scripts in the page with ajax manager although I used radscriptblock rounding my script as documented:

1- when using radscriptblock inside updated ajax panel it will be executed in the load but if I make any ajax request manually using "ajaxRequest" function it will be executed again although I need it to be executed only one time [on page load]

2- when using radscriptblock out of updated ajax panel, it will be also executed in the load but if I make any ajax request manually using "ajaxRequest" function it will be no longer executed any more [after going to server side]

below is my code:

PAGE:

<head>

<script src="http://localhost/xsurvey/scripts/custom/collapsible.panel.js" type="text/javascript"></script>

</head>

<%--below is body-->

<asp:ScriptManager runat="server" ID="scrt" />

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="OnAjaxManager_Request">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="PnlPage">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="PnlPage" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="PnlPage" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<asp:Panel runat="server" ID="PnlPage">

<telerik:RadScriptBlock runat="server" ID="s">

<script type="text/javascript">

$(document).ready(function() {

function test() {

$find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest('sss');

}

alert("d");

$("#faq").makeCollapsible({ 'collapse': '1' }, test);

});

</script>

</telerik:RadScriptBlock>

<asp:Label runat="server" ID="LblEd" />

<ul id="faq">

<li>

<h3 style="text-align: center">

More Options?</h3>

<p>

test test test

<br />

test test test

<br />

test test test

<br />

test test test

<br />

test test test

<br />

test test test

<br />

test test test

<br />

</p>

</li>

<li>

<h3 style="text-align: center">

More Options?</h3>

<p>

test test test

<br />

test test test

<br />

test test test

<br />

test test test

<br />

test test test

<br />

test test test

<br />

test test test

<br />

</p>

</li>

</ul>

</asp:Panel>

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using Telerik.Web.UI;

public partial class Tests_jQuery_CollapsePanel : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void OnAjaxManager_Request(object sender, AjaxRequestEventArgs e)

{

LblEd.Text = "test test CALL SERVER" + DateTime.Now;

}

Collapsible.panel.js

(function($) {

$.fn.makeCollapsible = function(options, onCollapse) {

var settings = $.extend({

'collapse': '1',

'idToCollapse': ''

}, options);

return this.each(function() {

var $this = $(this);

$this.find("li > h3").each(function() {

$(this).css("cursor", "pointer");

$(this).siblings().wrapAll('<div>');

});

//$("#faq li > *:not(h3)").hide();

$this.find("li > h3").click(function() {

var $h3 = $(this);

//minus icon

var minus = {

'background-image': 'url(http://localhost/xsurvey/Images/minus.gif)'

};

//plus icon

var plus = {

'background-image': 'url(http://localhost/xsurvey/Images/plus.gif)'

};

//all siblings beside <li><h3></h3>(.....)</li>

var risposta = $h3.siblings();

var callf = 0;

if (risposta.is(':hidden')) {

$h3.css(minus);

callf = 1;

risposta.slideDown("slow");

}

else {

$h3.css(plus);

risposta.slideUp("slow");

}

//risposta.slideToggle("slow");

if (callf == 1 && settings.onCollapse != '') {

//setTimeout(alert('s'), 2000);

if (typeof onCollapse == "function") onCollapse();

}

});

}

})(jQuery);

5 Answers, 1 is accepted

answered on 03 Feb 2012, 05:53 PM

no this is not what I meant, try the following simple example to get what I mean.

The client click event of button will be executed for the first time only "an alert will be displayed for you" then it will go to the server updating the label. now press the same button again, you will find client event will not be executed anymore with going to the server properly, it seems the client even of the button is vanished at all.

<asp:ScriptManager ID="ScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</asp:ScriptManager>

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="PnlAllPage">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="PnlAllPage" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadScriptBlock runat="server" ID="tt">

<script type="text/javascript">

$(document).ready(function() {

$(".button").click(function() {

alert('ddd');

});

</script>

</telerik:RadScriptBlock>

<asp:Panel runat="server" ID="PnlAllPage">

<asp:Label runat="server" ID="Lbl" CssClass="label" Text="test" />

<asp:Button runat="server" ID="Btn" CssClass="button" Text="test" OnClick="OnBtnClick" />

</asp:Panel>

the cause of this is the ajax manager as if you make its setting to be like the following it will be executed correctly as needed/requested:

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="Btn">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="Lbl" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

Wishes to reply me very soon as this is making a lot of troubles
Thanks,
Muhammad

answered on 03 Feb 2012, 06:22 PM

Hello,

When you update the PnlAllPage panel, you should reattach the client side click event. If you need to update the whole panel (with the button inside), you could use the ResponseEnd client event of the manager, to execute your jquery and to attach the event on the 'new' button. I am saying the 'new' button because it is new for the browser, as everything in the updated panel.

The problem is not in the AjaxManager. In the second example you simply does not update the button, so it's "onclick" event remain.

Kind regards,
Vasil
the Telerik team

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>