Hi there..
I'm a little new to JQuery, so i am not sure why this is happening and was hoping someone could enlighten me and maybe help me with the correct implementation.
I have a JQuery script that repositions a div and the page is scrolled. I have it wrapped in a RadScriptBlock:
The div that it is positioning is pnlMessageForm. It is wrapped inside another panel called pnlMessageOverlay. Onclick of a button i am doing the following updates:
However the JQuery does not seem to work when partial page updates are introduced. It only seems to work when a full page postback is done... I am updating the RadScriptBlock, but this does not seem to fix it...
How can i get this working so that i can use the RadAjaxManager
Thanks,
Duncan
I'm a little new to JQuery, so i am not sure why this is happening and was hoping someone could enlighten me and maybe help me with the correct implementation.
I have a JQuery script that repositions a div and the page is scrolled. I have it wrapped in a RadScriptBlock:
<telerik:RadScriptBlock ID=
"radScriptBlock"
runat=
"server"
>
<script type=
"text/javascript"
>
$(
function
() {
var
offset = $(
"#<%= pnlMessageForm.ClientID %>"
).offset();
var
topPadding = 15;
$(window).scroll(
function
() {
if
($(window).scrollTop() > offset.top) {
$(
"#<%= pnlMessageForm.ClientID %>"
).stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
}
else
{
$(
"#<%= pnlMessageForm.ClientID %>"
).stop().animate({
marginTop: 0
});
};
});
});
</script>
</telerik:RadScriptBlock>
The div that it is positioning is pnlMessageForm. It is wrapped inside another panel called pnlMessageOverlay. Onclick of a button i am doing the following updates:
<
telerik:RadAjaxManager
ID
=
"radAjaxManager"
runat
=
"server"
DefaultLoadingPanelID
=
"radAjaxLoadingPanel"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"btnSend"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"radScriptBlock"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"pnlMessageOverlay"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
However the JQuery does not seem to work when partial page updates are introduced. It only seems to work when a full page postback is done... I am updating the RadScriptBlock, but this does not seem to fix it...
How can i get this working so that i can use the RadAjaxManager
Thanks,
Duncan
7 Answers, 1 is accepted
0

Duncan
Top achievements
Rank 2
answered on 09 Feb 2012, 10:22 PM
Anyone?
0
Hi Duncan,
You could resolve your issue by following the steps below:
Additionally, you could go through the help article below for more information how jQuery could be used with RadControls.
All the best,
Antonio Stoilkov
the Telerik team
You could resolve your issue by following the steps below:
- Remove the ajaxification of the radScriptBlock from the RadAjaxManager
<
telerik:RadAjaxManager
ID
=
"radAjaxManager"
runat
=
"server"
DefaultLoadingPanelID
=
"radAjaxLoadingPanel"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"btnSend"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"pnlMessageOverlay"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
- Include jQuery by adding ScriptReference in the RadScriptManager
<
telerik:RadScriptManager
runat
=
"server"
ID
=
"RadScriptManager1"
>
<
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"
/>
</
Scripts
>
</
telerik:RadScriptManager
>
- Wrap your JavaScript as it is shown below
(
function
($)
{
$(
function
()
{
var
offset = $(
"#<%= pnlMessageForm.ClientID %>"
).offset();
var
topPadding = 15;
$(window).scroll(
function
()
{
if
($(window).scrollTop() > offset.top)
{
$(
"#<%= pnlMessageForm.ClientID %>"
).stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
}
else
{
$(
"#<%= pnlMessageForm.ClientID %>"
).stop().animate({
marginTop: 0
});
};
});
});
})($telerik.$);
Additionally, you could go through the help article below for more information how jQuery could be used with RadControls.
All the best,
Antonio Stoilkov
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0

Duncan
Top achievements
Rank 2
answered on 10 Feb 2012, 09:30 PM
Hi there Antonio.
Other than the wrapping of the JQuery, I had all of your recommendations done already. I have wrapped the JQuery, still it does not work.
My RadScriptManager is in a masterpage. Is this a issue at all?
This is what i have thus far:
In my master page:
On my page:
And a little further down the page:
Do you see anything i might be doing wrong?
Duncan
Other than the wrapping of the JQuery, I had all of your recommendations done already. I have wrapped the JQuery, still it does not work.
My RadScriptManager is in a masterpage. Is this a issue at all?
This is what i have thus far:
In my master page:
<
telerik:RadScriptManager
ID
=
"RadScriptManager"
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
Path
=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"
/>
<
asp:ScriptReference
Path
=
"~/App_Scripts/tagit/js/tagit.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQueryInclude.js"
/>
</
Scripts
>
</
telerik:RadScriptManager
>
On my page:
<
telerik:RadAjaxManager
ID
=
"radAjaxManager"
runat
=
"server"
DefaultLoadingPanelID
=
"radAjaxLoadingPanel"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"btnMessage"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"pnlMessageOverlay"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
telerik:RadAjaxLoadingPanel
ID
=
"loadingpanelFull"
runat
=
"server"
Skin
=
""
Transparency
=
"30"
CssClass
=
"loading"
>
<
div
class
=
"full"
>
</
div
>
</
telerik:RadAjaxLoadingPanel
>
<
telerik:RadScriptBlock
ID
=
"radScriptBlock"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
(function ($) {
$(function () {
var offset = $("#<%= pnlMessageForm.ClientID %>").offset();
var topPadding = 15;
$(window).scroll(function () {
if ($(window).scrollTop() > offset.top) {
$("#<%= pnlMessageForm.ClientID %>").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#<%= pnlMessageForm.ClientID %>").stop().animate({
marginTop: 0
});
};
});
});
})($telerik.$);
</
script
>
</
telerik:RadScriptBlock
>
...
And a little further down the page:
<
asp:Panel
ID
=
"pnlMessageOverlay"
runat
=
"server"
Visible
=
"false"
>
<
asp:Panel
ID
=
"pnlMessageForm"
runat
=
"server"
CssClass
=
"sample_data_popup"
>
...
</
asp:Panel
>
</
asp:Panel
>
Do you see anything i might be doing wrong?
Duncan
0

Duncan
Top achievements
Rank 2
answered on 15 Feb 2012, 12:13 AM
Nudge...
0
Hello Duncan,
I have assembled a sample project based on your code that works on my side. You could take a look at it and see if there are any differences at your end. Note that I have changed the pnlMessageOverlay Visibility because the control was not rendered on the page and not accessible through JavaScript.
All the best,
Antonio Stoilkov
the Telerik team
I have assembled a sample project based on your code that works on my side. You could take a look at it and see if there are any differences at your end. Note that I have changed the pnlMessageOverlay Visibility because the control was not rendered on the page and not accessible through JavaScript.
All the best,
Antonio Stoilkov
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0

Duncan
Top achievements
Rank 2
answered on 15 Feb 2012, 05:54 PM
Antonio,
That seems to be the issue. The fact that the panel is hidden. however, that is the whole purpose behind the panel... to hide and show. Could you perhaps advise me on a approach that would work?
That seems to be the issue. The fact that the panel is hidden. however, that is the whole purpose behind the panel... to hide and show. Could you perhaps advise me on a approach that would work?
0
Hi Duncan,
You could achieve your functionality by following one of the described approaches below:
All the best,
Antonio Stoilkov
the Telerik team
You could achieve your functionality by following one of the described approaches below:
- Add additional condition checking if the offset is null which will mean the panel visibility property is set to false
(
function
($)
{
$(
function
()
{
var
offset = $(
"#<%= pnlMessageForm.ClientID %>"
).offset();
var
topPadding = 15;
$(window).scroll(
function
()
{
if
(offset && $(window).scrollTop() > offset.top)
{
$(
"#<%= pnlMessageForm.ClientID %>"
).stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
}
else
{
$(
"#<%= pnlMessageForm.ClientID %>"
).stop().animate({
marginTop: 0
});
};
});
});
})($telerik.$);
- Another possible solution is to set the panel CSS display property to none. This will cause the html element to render on the page but will not be visible
<
asp:Panel
ID
=
"pnlMessageOverlay"
runat
=
"server"
Visible
=
"true"
>
<
asp:Panel
ID
=
"pnlMessageForm"
runat
=
"server"
CssClass
=
"sample_data_popup"
>
</
asp:Panel
>
</
asp:Panel
>
$(
"#ContentPlaceHolder1_pnlMessageForm"
).css(
"display"
,
"none"
)
All the best,
Antonio Stoilkov
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>