Display modal after postback without ASP.NET Ajax - javascript

I have an ASP.NET button. When the button is clicked, I'd like a modal popup to display after the server-side code for the button runs. I don't want to use the ASP.NET Ajax control toolkit modal popup extender.
With ASP.NET Ajax, I can hook into the end request event. Is there a way to do this without ASP.NET Ajax. just jQuery? I basically want to run some javascript after the server side click code runs, after the postback.

You can use ScriptManager.RegisterStartupScript() for this, something like this:
ScriptManager.RegisterStartupScript(MyUpdatePanel, GetType(), "post-load-script",
"$(function() { $('#dialog').dialog(); });", true);
Then the request from the UpdatePanel comes back it would be running this:
$(function() {
$('#dialog').dialog();
});
You could of course put anything you wanted for script there, but if you simply used a Label or whatever in the #dialog <div> that populated as part of the update, this would show it (if you're using the jQuery UI dialog, there are others). The concept is very general, you're just registering some JavaScript to run when the async request comes back, which modal and how you want to do that is very open.

It depends on what method you intend to use to start the postback via jQuery. If you're going to use an async postback (like jQuery.ajax), you can just provide a method to call when the postback is complete. See http://api.jquery.com/jQuery.ajax/.
If you're just going to use the normal postback, you can use the Page.ClientScript.RegisterClientScriptBlock from your server-side method to register a script that will run after the postback completes.

Related

How to know when asp.net ajax request has completed?

I have an asp.net web form with a button, label, scriptmanager and updatepanel controls. When I click the button, the label changes using ajax. How can I detect the change in the label using javascript?
You need to use add_endRequest,
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
function endRequestHandler(sender, args)
{
alert("ended");
}
You are using ajax to change or update something on some event. If it changes naturally your output will be changed. If it is some kind of change that doesn't change output but change any attribute then
1. Install firebug addon2.use it when firing your ajax function.
3. On console mode you will see any change of error which you are expecting from the code
You can use update progress for this purpose.
Here is a good example for update progresshttp://www.devmanuals.com/tutorials/ms/aspdotnet/updateprogress.html

JavaScript Inside AJAX to Request More AJAX

I built a rudimentary page navigation system with jQuery. You click the next button, it retrieves the next page via AJAX; click the previous, it goes to the one before it, etc. The AJAX request is done via the jQuery $('#dom').html().load() method.
Inside one of the pages pulled is an a href link with an onclick which goes to a custom function (loadPage() -- the same function I'm using for the parent page navigation). As you can guess, the onclick event used inside the AJAX page does not work -- it's trying to call a function that doesn't exist.
Is there a simple way to make this work? Perhaps some other jQuery AJAX method like GET? Thanks in advance.
It sounds like you are embedding JavaScript into your html. Don't do that. Put your JavaScript into an external file and include it with a script tag, just like you do with jQuery.

MVC form submit Callback

I have a header in my master page which i want to enable it in my login page. I am doing it using document.onready event. But when I submit the page and if the model validation fails, it doesn't show the header. Is there any javascript that gets called when the mvc validation fails or when the page gets reloaded.
There is a pageLoad event that you can use.
function pageLoad() {
// Initialization code here, meant to run once.
}
Here is an article about the differences between document ready and pageLoad.
http://encosia.com/document-ready-and-pageload-are-not-the-same/
You can also attach an event in the partial view, there is a post about adding events here:
Javascript that executes after page load

ASP.NET UpdateProgress height

I have an UpdateProgress in my ASP.NET Project. This UpdateProgress needs to have the dynamic height of the content within UpdatePanel. I tried doing this with JQuery script so it gives also the right height to the UpdateProgress, but the script doesn't execute on each UpdatePanel trigger.
What is not clear for me:
On each UpdatePanel trigger, are the scripts in the head of html executed everytime? Because my script for equal height is set there and it executes only ones when I open the website.
Thanks
Would be easier with some pieces of code.
Maybe this can help: the update panel mechanism in ASP.net replaces all markup within the update panel. So if your triggers are in the update panel and you bind events on them, after the refresh the binding will be lost.
You would have to re-bind events after each request ended (you can detect this using the PageRequestManager javascript class provided in the Microsoft Ajax Framework: http://msdn.microsoft.com/en-us/library/bb311028.aspx)
d.
I found a solution for this. The following must be in the Page_Load method to let the equalHeight JQuery method be executed each time the updatepanel trigger button is clicked.
ScriptManager.RegisterStartupScript(upnlGuichet, this.GetType(), "equalHeight", "equalHeight($('.InternalItemMainGuichet'));", true);
Here some explanation:
http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.registerstartupscript.aspx

Is there a way to globally intercept events when jquery is used?

I have a site which has jquery included in the header. the application makes heavy use of jquery. now, that site uses ajax and shows up different message boxes when the user does something (it's a third party product used). I want to modify these boxes, but I need a piece of code to take action as soon as the DOM gets manipulated by ajax or jquery, or as soon as jquery receives any message with ajax, and then I must intercept that message, manipulate it and pass it on. I have no clue about jquery, but I do have about javascript. Does jquery offer something for this situation?
If you have control of the JavaScript you can just figure out where the popup boxes are in the code and replace them with what you need.
You can add a global AJAX handler for various AJAX events. You might want to see if the ajaxSuccess handler allows you to do what you want.
tvanfosson is correct, but i can elaborate further. There are 6 universal Ajax events that are triggered with ANY ajax call through jQuery. They are very cool, and you can make a universal include script that will handle all event on all pages the same way.
Complete List - Look under "Ajax Events"
The big ones are:
AjaxStart - Triggered anytime any ajax call is made. Good for showing an animated gif in a floating dialog to show processing is happening.
AjaxStop - Triggered when all ajax calls have stopped. Good for hiding said animated processing gif
AjaxError - triggered anytime an ajax error occurs. Hint: Display the message in a floating dialog
AjaxSuccess - not really recommended as a universal event. Specify unique events for each actual ajax instead.
Hopes this helps!

Categories