Dear all.
I have an update panel and nested repeaters in it. I have image which when i click shows the other nested repeaters data and so on. The rows are shown and hidden using the client script written on code behind.
The Page is working fine , but it refreshes the page every time i click to show data. If i put page in update panel, the page stops showing rows.
How to register the javascript with update panel.
Best Regards
Imran
This is how to register your javascript with the updatePanel: You place your javascript globally, out side UpdatePanel so your libraries loaded, and then using this code you initialized it on every update panel, if needed.
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
function InitializeRequest(sender, args) {
}
function EndRequest(sender, args) {
}
</script>
Related
Inside the one of contentPlaceHolder of the masterpage I'm using Iframe. And In Iframe suppose, IfrmPage.aspx I'm using update panel where timer control is updating the page for each certain duration.
So, what I'm trying to do is settng the focus on textbox after OnTick event. I'm using following line:
ScriptManager1.SetFocus(this.txtMessage.ClientID);
This works correctly. However, Main page or I should say masterpage's scrollbar changes their position which is annoying.
Please share your valuable experience.
thanks.
Have you tried using MaintainScrollPositionOnPostback on the page declaration of IfrmPage.aspx?
After seaching on the google I found the answer.
Now I'm setting the focus to txtMessage(textbox) using javascript and remove this code:
ScriptManager1.SetFocus(this.txtMessage.ClientID);
final answer is here:
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);
function pageLoaded(sender, args) {
if (args.get_panelsUpdated().length > 0) {
$get('txtMessage').focus();
}
}
</script>
I am using the UpdatePanel and need to display some kind of Ajax anination while the page refreshes with the UpdatePanel.
What would be great is to be able to disable all controls and display a ajax loading message..
I would love to put a Div over the top of everything - like an overlay. Jquery UI dialog box does pretty much the same.
Does anyone have any experience with this?
Problem is that users are click items before returning from a PostBack (using the update panel)
thanks in advance
I too was struggling with this same issue and was lucky enough to stumble across the UpdateProgress Control Overview on MSDN. An example on that page shows secret javascript for hooking into the async ajax calls of the ASP UpdatePanel control. With a little modification I was able to get the jQuery BlockUI plugin to work with an ASP UpdatePanel.
Here is what I ended up with. There should be enough here so that you could do anything you want when the async callback begins and when it ends.
HTML
<asp:UpdateProgress runat="server" id="updateProgress1" AssociatedUpdatePanelID="UpdatePanel1" DynamicLayout="false" DisplayAfter="0">
<ProgressTemplate>Processing...</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!-- Some stuff here -->
</ContentTemplate>
</asp:UpdatePanel>
JAVASCRIPT
$(document).ready(function () {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
function InitializeRequest(sender, args) {
// Whatever you want to happen when the async callback starts
$.blockUI();
}
function EndRequest(sender, args) {
// Whatever you want to happen when async callback ends
$.unblockUI();
}
});
Notice that I included an ASP UpdateProgress control, that is important because if you don't have that, the javascript doesn't work right. It will block and unblock the UI but the unblock part does not happen when the callback returns, it happens almost immediately after the async call is started.
It was sufficient for me to block the control itself DropDownList instead of the entire UI and all I did instead of using jquery.blockUI() plugin I just added one line and it worked just fine for me
Here is what I did add :
$('#DD_selectPassportType').attr('disabled', 'disabled');
# the InitializationRequest
function InitializeRequest(sender, args) {
// Whatever you want to happen when the async callback starts
$('#DropDownList_ID').attr('disabled', 'disabled');
}
function EndRequest(sender, args) {
// Whatever you want to happen when async callback ends
nothing I did in here
}
You can use Update progress control of ajax control tool kit. when page refersh with update panel then below image will be show and user can not click on page items.
<ajax:UpdateProgress AssociatedUpdatePanelID="UpdatePanel3" ID="updateProgress3" runat="server">
<ProgressTemplate>
<div>
<img alt="Loading" src="images/Adding.gif" />
</div>
</ProgressTemplate>
</ajax:UpdateProgress>
Here UpdatePanel3 is id of your update panel.
You can also add AlwaysVisibleControlExtender of ajaxcontrol tool kit.
<cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender3" runat="server"
TargetControlID="updateProgress3" VerticalSide="Middle" HorizontalSide="Center"
VerticalOffset="10" HorizontalOffset="10" ScrollEffectDuration=".1">
</cc1:AlwaysVisibleControlExtender>
Here cc1 is tag prefix of ajax control tool kit dll.
I have an update panel on my page with some links that have onClick events that trigger a JQuery box to pop up. This works fine unless an AJAX postback has occurred. I saw some code on another post:
Page.ClientScript.RegisterStartupScript(TypeOf(Page), 'ajaxTrigger1', 'Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);', true);
Page.ClientScript.RegisterClientScriptBlock(TypeOf(Page), 'EndRequest1', 'function EndRequestHandler(sender, args){AsyncDone();}', true);
which I have used but it doesn't seem to be working. I keep getting AsyncDone is not defined. Does anyone have any ideas as to what I can do to sort the issue out please?
Details: ASP.NET 2, IIS7
Thanks in advance.
The problem is that when the updatepanel fires, it replaces a chunk of html in the dom, which means it replaces the elements that you have bound the click event to.
To bypass this look at jquery .live() or .delegate() which keeps looking for events matching the selector you provide, or if you want to bind to content every time the update panel refreshes content look that the jQuery updatepanel plug-in.
I sorted this by not using the document.ready in jQuery. Instead I used:
function pageLoad(sender, args) { //code }
I haven't seen any adverse effects yet so hopefully this will sort my issue.
I used update panel just only to stop the whole page refresh in asp.net which even included the jquery.But after using the update panel somewhat the problem was solved but created another problem. jquery script was not working inside the updatepanel.
This issue is now solved.
Example: In case of jquery Date picker, Usual call of Jquery script appears like this :
<script type="text/javascript">
$(function() {
$("#datepickers").datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
});
</script>
Even I had used the same code as
Page.ClientScript.RegisterStartupScript(TypeOf(Page), 'ajaxTrigger1',
'Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);', true);
Page.ClientScript.RegisterClientScriptBlock(TypeOf(Page), 'EndRequest1', 'function EndRequestHandler(sender, args){AsyncDone();}', true);
Solution Appears here: http://kopila.com.np/
But it didnt worked for me.Later I came to know that The jquery script wont work after partial postback i.e.our ajax request.If we try to call any JQuery script inside the update panel do whatever script wont work after the first ajax request.
Example: When you are using asp.net update panel call it again as follows:
<script type="text/javascript">
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
$("#datepickers").datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
}
}
</script>
For More Details Go to: http://kopila.com.np
When you have multiple UpdatePanels on a page, is there a way, in the code behind, find out which Update Panel triggerred the postback? It appears that the Request["__EVENTTARGET"] is not a reliable way of doing this.
An UpdatePanel doesn't trigger PostBacks, it intercepts them. The originator of the PostBack would be something like a button. If you have event handlers for all your interactive elements, you naturally know which one fired by which event handler runs.
you can get the id of the postback element on the client with the following
function pageLoad(sender, args) {
// add function to the PageRequestManager to be executed on async postback initialize
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
}
function InitializeRequest(sender, args) {
if(args._postBackElement.id === 'id_of_element_in_question' {
// do whatever
}
}
to get it on the server, presumably you'll know which control/event raised the postback as it will be handled in the relevant event handler in the code-behind.
I have an asp.net page with a save button within an updatepanel and contenttemplate. The save works nicely, but I am trying to add a "wait" gif while the save is happening using JQuery, but the ajaxStart event is not firing. I put a simple catch shown below:
$(document).ajaxStart(function () {
alert('starting');
}).ajaxStop(function () {
alert('done');
});
No alerts show when I click the save. Is there a problem when trying to capture ASP.net Ajax events, is asp doing some funky type of Ajax calls that can't be captured by Jquery?
Thanks, let me know if you have any ideas about this,
Mark.
The ASP.NET update panels seem to do their own thing... Tap into the PageReuqestManager and setup your own calls here...
EDIT
I simplified the functions a bit below to match your sample a little more...
<script type="text/javascript">
function pageLoad() {
if (!Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(AjaxEnd);
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(AjaxBegin);
}
}
function AjaxEnd(sender, args) {
alert("I am done...");
}
function AjaxBegin(sender, args) {
alert("I am about to start...");
}
</script>