ASP.NET - UpdatePanel and JavaScript - asp.net

Is there a way to execute script when an UpdatePanel process is finished.
I have a page that allows "inserting", "copying", and "editing" of a record.
This is all done on an UpdatePanel to prevent a page navigation.
Somewhere else on the page I would like to print a "flash" message - like "You have successfully entered a record." It is not near the UpdatePanel and I'd like to use a jQuery effect on the message so it fades out after 4 seconds. How can I send script back with the UpdatePanel or have it execute after a UpdatePanel refresh? Should I write script to an asp:literal? thoughts?

Yes:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
And then:
function endRequestHandler(sender, args)
{
// Do stuff
}
Documentation here and here. Keep in mind that this will fire for every AJAX request on the page.

This should do the trick:
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args)
{
//Jquery Call
}
function EndRequestHandler(sender, args)
{
//Jquery Call
}
</script>

Here is an article for how to do it using ScriptManager's static method RegisterClientScriptBlock. Tried it and works like a charm.
http://csharperimage.jeremylikness.com/2009/06/inject-dynamic-javascript-into-aspnet.html

var requestManager = Sys.WebForms.PageRequestManager.getInstance();
requestManager.add_beginRequest(function () { alert('here1') });
requestManager.add_endRequest(function () { alert(here2') });
Source: http://www.howtositecore.com/?p=36

The Sys.WebForms.PageRequestManager.getInstance() method works great for me as well.
I work with a lot of pages that contain multiple Updatepanels and I've learned that this will automatically fire even if the Updatepanel you don't want it for refreshes. So inside the function that fires on the event make sure you have something like:
function BeginRequestHandler(sender, args) {
if (args.get_postBackElement().id == "ID of the Updatepanel") {
// do stuff here

Bruno,
First, to answer your direct question. In your callback that is being called by the update panel, you should be able to use a RegisterStartupScript call to invoke a JS method . Then in your JS method, you would show the message and then you can use do a:
setTimeout('$('#myMessage').fadeOut("slow")', 4000);
to have it fade away after 4 seconds.
To go one step further, since you're already implementing JavaScript, I would invite you to check out this article about UpdatePanels. If possible, I would try to send Ajax calls to do your inserting, copying, and editing and this would further simplify your user feedback and would prevent excess info across the wire.

Related

Why does my function run multiple times after UpdatePanel is loaded

So I want to run some javaScript function after my updatepanel is updated, so I have:
function pageLoad() {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(panelLoaded);
}
function panelLoaded(sender, args) {
alert("foobar");
}
With the above code, if I update the panel one time, "foobar" will be alerted one time; If I update the panel the second time, "foobar" will pop up twice; the third time I trigger the panel to update, "foobar" popped up three times... 4th time pop 4 times so on and so forth....
What caused this??
Thanks~~~
This is because pageLoad is executed during updatepanel postbacks as well. There is an easy solution:
function pageLoad(sender, eventArgs) {
// If this is being executed by ajax
if (eventArgs) {
// And this is only a partial load
if (eventArgs.get_isPartialLoad()) {
// Don't perform any further processing
return;
}
}
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(panelLoaded);
}
Thanks all, problem seem to be having too many prm instances as Sam mentioned. I added Sys.WebForms.PageRequestManager.getInstance().remove_pageLoaded(panelLoaded); after the alert() and everything is good.
This is what is happening. pageLoad basically functions as a combination of Application.Init and PageRequestManager.EndRequest. That means it works on Application Initialization ( approximately DOM Ready ) and on each Partial PostBack
So pageLoad works on all PostBacks; full and partial.
Now you are binding up pageLoaded event again on the ScriptManager's instance on every partial postback again and again causing this behaviour.

How to get the id of Updatepanel which is about to start a postback

I need to get the id of the panel that is about to start a postback, so I have a generic way to block ui on this panel.
So far I have this function:
function BeginRequestHandler(sender, args) {
$('#' + args.get_updatePanelsToUpdate()[0]).block({ message: null });
}
attached like this:
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
this works pretty well to get the id if control that causes partial postback is inside update panel, but if it is outside (using a trigger), args.get_updatePanelsToUpdate() is always null
I've seen this answer, but it wont work forme because function is fired after partial postback is complete, I need it before..
Thank you
So here's what I did:
created 2 functions to block (on partial postback begin) and unblock (on partial postback end):
function BeginRequestHandler(sender, args) {
$('#' +sender._postBackSettings.panelsToUpdate[0].ReplaceAll('$', '_')).block({ message: 'loading...' });
}
function EndRequestHandler(sender, args) {
$('#' + sender._postBackSettings.panelsToUpdate[0].ReplaceAll('$', '_')).unblock();
}
Registered above functions on my page right after my script manager:
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
</script>
Some conditions:
I'm using jquery UI block plugin but you should use what better fits your needs.
You update panels should have ClientIDMode="AutoID" if your using .NET 4.0 +
I used the following helper function cause js doesn't make a real replace all and to deal with asp net autoID's:
String.prototype.ReplaceAll = function (stringToFind, stringToReplace) {
var temp = this;
var index = temp.indexOf(stringToFind);
while (index != -1) {
temp = temp.replace(stringToFind, stringToReplace);
index = temp.indexOf(stringToFind);
}
return temp;
}
If you just want to disable (or animate in some other way) the UpdatePanel, why not just use UpdatePanelAnimation? It provides you with the following hooks (not sure if that's the right word):
OnUpdating - Generic animation played as when any UpdatePanel begins
updating
OnUpdated - Generic animation played after the UpdatePanel
has finished updating (but only if the UpdatePanel was changed)

ASP.Net Ajax client side script, accessing source

I've seen in quite a few examples of asp.net ajax client side script the following:
function fHelloWorld(source, eventArgs)
{
}
If I run an alert on the source it's returned as an object. Can I use this to access what called the function? And if so how? i've tried things like
source.id;
Without luck
The best advice that I can offer is, given an object, enumerate over the properties and write them out, including their values to the page. Then inspect the property values and will surely find out if such a property exists. You could also use Firebug, Fiddler2 or host of other tools to inspect the object.
Here's an example
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) {
// Display loader gif when async postback initialized by element_in_question
if(args._postBackElement.id === 'id_of_element_in_question' {
$get('ajax-loader').style.display = 'inline';
}
}
Run the page with Firefox & Firebug, set a breakpoint inside your function, and inspect the source object interactively.
You can also display the object with console.log to get an object inspection hyperlink:
function fHelloWorld(source, eventArgs)
{
console.log("%o", source);
}

How do I run client script after a postback?

I'm looking for something like OnClientClick for a button, but I want it to happen after the postback (instead of before). I'm currently using the following, which works, but it adds the script block over and over again, which is not what I want. I simply want to execute an existing client script function.
ScriptManager.RegisterClientScriptBlock(
this,
typeof( MyList ),
"blah",
"DraggifyLists();",
true );
If you're using ASP.NET AJAX, you could try the following:
addRequestHandler() must be called when your page loads
function addRequestHandler()
{
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
}
function endRequestHandler(sender, args)
{
// This function will be called after the postback has completed
// add your JavaScript function call here
}
This is based on code from Disturbed Budda

How to call a client side javascript function after a specific UpdatePanel has been loaded

How is it possible to call a client side javascript method after a specific update panel has been loaded?
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler) does not work for me because this will fire after ANY update panel finishes loading, and I can find no client side way to find which is the one
ScriptManager.GetCurrent(Page).AsyncPostBackSourceElementID AsyncPostBackSourceElementID does not work for me as this is a server side object, and i want Client Side
The ClientSide .Net framework must know which UpdatePanel it is updating in order to update the correct content. Surely there is a way to hook into this event?
Any help would be appreciated.
Thanks - both good answers. I went with the client side script "pageloaded" in the end. That is a fairly buried method that google did not reveal to me. For those who are interested, this code works with FireBug to give a good demo of the PageLoaded method working to find the updated panels:
<script type="text/javascript">
$(document).ready(function() {
panelsLoaded = 1;
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
});
function PageLoaded(sender, args) {
console.log("I have occured " + panelsLoaded++ + " times!");
var panelsCreated = args.get_panelsCreated();
for (var i = 0; i < panelsCreated.length; i++) {
console.log("Panels Updating: " + panelsCreated[i].id);
}
var panelsUpdated = args.get_panelsUpdated();
for (var i = 0; i < panelsUpdated.length; i++) {
console.log("Panels Updating: " + panelsUpdated[i].id);
}
}
</script>
You can hook the PageRequestManager.beginRequest event and inspect the BeginRequestEventArgs.postBackElement property.
Note that it doesn't really give you the UpdatePanel, but the control inside of the UpdatePanel. That should be good enough, though.
Edit: Even better, the PageRequestManager.pageLoaded event gives you PageLoadedEventArgs.panelsUpdated (and panelsCreated) properties.
This may be your solution.
In the code behind for the UpdatePanel's OnLoad event, register a startup script.
string scriptText = "alert('Bar!');";
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "foo", scriptText, true);

Resources