We Keep Coding

Run Javascript when Asp.net page is loading

I wonder if there is way to run JS code whenever a asp.net page is contacting the server.
I.e. I'm looking for a general event handler that is triggered whenever a call to the server is made for runat="server" components.
I know there's a way to get jQuery.ajax() to run JS code before and after a call to the server is made, but I'm not sure how to do it in asp.net. Especially, since this projects uses a lot of custom components.
The goal here is to show some kind of loading image when a button is clicked, to prevent the user to click a button twice and also to show the user that the system is working.
If the click causes the page or an updatepanel to refresh, I'd only like to display the loading image before the refresh, eg. User clicks, "loading" is shown, page/update panel is refreshed (causing the "loading" to disappear), the new page/content is displayed as normal.
Update 1:
I can't use UpdateProgress because some of the buttons aren't inside UpdatePanels. What I really want to do is to fire a JS as soon as any button/control that will contact the server is clicked. I.e. if the user clicks a dropdown which doesn't contact the server, nothing should happend. But if that dropdown has any connection to the server, a JS should be run.
I understand that this is ASP.NET Ajax and not jQuery Ajax, I only used jQuery as an example. Because I've used a jQuery method before (with jQuery Ajax) to trigger JS before the server call was made. Eg. to lock the element that was clicked or to display a "Loading..." screen.
I could of course add a bit of a JS hack to every page which adds a "onclick" event to every button manually, but I thought it would be better if there was a general solution for this (since I've got lots of pages, each with a few buttons that contact the server on them).
Update 2:
When I think about it, it doesn't necessarily need to be a JS that is triggered. It would be good enough if the page somehow only made sure that the same button wasn't clicked twice. Either by disabeling the button or by adding something in front of it (like a "Loading..." screen).

You can use an UpdateProgress for this to use with update panels, but if you are doing a full page postback (i.e. not ajax) the only loading animation you can have is the browsers own.
UpdateProgress:
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Shiny loading aninmation
</ProgressTemplate>
</asp:UpdateProgress?

Here is how you can do it using jquery:
$(function() {
$('a[href]').on('click', function(e) {
var self = this;
e.preventDefault();
loadAsync($(self).attr('href'));
});
});
function loadAsync(url) {
$('div#result').fadeOut(200, function() {
$('div#loader').fadeIn(200, function() {
$.get(url, function(data) {
$('div#result').html($(data));
}).done(function() {
console.log('done');
}).fail(function() {
$('div#result').html('Error');
}).always(function() {
$('div#loader').fadeOut(200, function() {
$('div#result').fadeIn(200);
});
});
});
});
}

After loading local page in Jquery dialog the parent window loads the same local page

My site is written in C# with ASP.NET, all pages being loaded are .aspx pages.
I'm using a button
<input type="button" onclick="FindBuilding()">
to trigger a javascript function
function FindBuilding() {
$('#BuildingPopup).load('./BuildingPopup.aspx?lid=xxx');
$('#BuildingPopup).dialog('open');
}
that opens a modal dialog I've created
$("#BuildingPopup").dialog({
modal: false,
autoOpen: false,
position: "center",
resizable: false,
height: 671,
width: 1042,
stack: true
});
The dialog is created inside $(document).ready function
The Problem:
After the dialog loads BuildingPopup.aspx the parent page then loads the same page -- this happens anytime I try to load any page in a modal dialog, regardless of content. BuildingPopup.aspx is just an example.
What I have tried to fix it:
I have tried creating the dialog first, then loading the page using the open button. I have also tried using an iframe which works but the pages never display well and it's a hassle/bad fix.
Some clues?
Some of the pages are calling a web service through AJAX during page load
The problem persists on pages with and without updatepanels
Some pages are evaluating code blocks during page load
UPDATE
I have discovered that the problem occurs when an updatepanel on the parent page updates.
<asp:UpdatePanel ID="updatepanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
This occurs when an <asp:Timer> executes an OnTick() method in the codebehind(to update the panel).

Hmmm I had the same problem as this, and I solved it by using update panels for any code that required a callback, not sure why that would not work...

Tuns out I just needed to phrase my question better -- I finally found someone else who was having the same problem as me.
Answer was found here: UpdatePanel within jQuery.load()-ed content breaks out of the page on postback
In a nutshell the problem was that using .load was pulling in extra tags from the loaded page that was breaking the HTML on the parent page. <head> <title> etc were being pulled into the parent page and causing the problems.
To fix the problem all that was needed was to specify what content I wanted to pull from the loaded page using .load(/loadedpage.aspx #content) instead of pulling the whole page.

The Event Handler of the OK button inside a Modal PopUp is not executing

Problem here is, i have a Modal PopUp Extender inside a User Control, which is called from another User Control inside a Page, inside a Master Page. The Page loads the first user control dinamically and when i want to display the modal dialog it loads the User Control into a placeholder dinamically and call the show method of the modal when the Modal Pop Up User control loads.
Inside the modal I have some TextBoxes and a Button to save some data into the database.
The problem is that the Buton onClick event doesn't fire at all. I tried adding a breakpoint in the Onload event of the Modal Control, but it doesn't get in there, oddly enough, if i place another breakpoint in Onthe load event of the Parent User Control (the one that holds the Modal PopUp) the breakpoint does stop correctly at the Parent User Control's OnLoad event. I need to use the event handler, because there's where i call the Stored Procedure to save the data into the DB.
Please note that i don't want to just close the modalpopup window, i want to validate some textboxes then save some data into the database, that's why i must us ethe event handler of the button.
Thaks for your support

Here is a function I use in an app where I need a modal dialog box. The buttons are actually generated by the Jquery code so it's guaranteed they events get fired:
$(function () {
$(".addNew").dialog({
autoOpen: false,
width: 300,
height: 300,
modal: true,
close: function (event, ui) {
},
buttons:
{
"Exclude Week": function () {
var cReason = $('#<%= ddlReasonCode.ClientID %> option:selected').text();
var Week = $('#<%= lblWeekChange.ClientID %>').text();
$.ajax(
{
type: "POST",
url: "Ajax/ExcludeWeek.aspx",
data: "week=" + Week + "&reasonCode=" + cReason,
success: function (msg) {
$('#resultDiv').text('Added to List');
},
error: function (x, e) {
alert("The call to the server side failed. " + x.responseText);
}
}
);
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
// THis is the code used to trigger the Dialog:
$(".addNew").dialog("open");

it's probably late for the given scenario, but I had the same issue after upgrading AjaxControlToolikit version on my projects.
Problem is the ModalPopupExtender property OkControlID: in the newer versions of the toolkit server side clicked button's handler won't execute, it will be run, instead, the OnOkScript client-side code.
To restore old behavior, in my case, I had to remove OkControlID property from modal popup extender declaration tag.
Hope it helps.

Somehow, taking my entire Modal Pop-Up Box outside of a <asp:UpdatePanel> I had solved the problem for me. I will say I'm not extremely familiar with update panels, but it worked!

How we will open a popup or shadow box on button within one page click in C# .net

I have a problem with open a popup or shadow box . i Want to that when we are run xyz page and on that page when we click on add button the popup or shadow box will be open.
plz suggest me.
"Thanks"

Popups are done by toggling visibility of a dom element. This task cannot be directly accomplished with c#. I'd suggest googling 'how to make a popup' and see the very simple html + javascript examples. Jquery also would be a library for making this task even easier.

If using ajaxcontroltoolkit you can use ModalPopup.show .If not you can use jquery modal
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx

If you are expecting the popup to show onbutton click event?
If you are using a jquery or a javascript call the function using the "onClientClick" attribute of the button control.
In case of AJAX use modappopup's show() function
Eg : modalpopupname.Show()

That can be best achieved using Jquery Modals. Refer JQuery Modals
If you intend to user postback from the Jquery UI dialog one problem you would come accross that jquery moves the dialog outside of the Form tags. To solve this problem you need to move it back inside the form tags :
jQuery(function() {
var dlg = jQuery("#dialog").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10
});
dlg.parent().appendTo(jQuery("form:first"));
});
See this SO Post for more information on the above issue.

DIV content shows on page instead of JQuery Dialog

I have the following DIV markup:
<div id="dialog" title="Membership Renewal">
Your membership is going to expire.
</div>
I have the following javascript to execute the JQuery:
<script type="text/javascript">
function showjQueryDialog() {
$("#dialog").dialog("open");
//alert("Time to renew Membership!");
}
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: { "Renew Membership": function() { $(this).dialog("close"); } }
});
});
</script>
I have an asp:Button which is inside a control and the control is on a master page. The first thing I notice is that when the page is loaded, the div is displayed and then disappears when the page is done loading. When I click the button it executes the following:
if (timeSpan.Days >= 30)
{
//Show JQuery Dialog Here
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "showExpiration",
"showjQueryDialog()", true);
}
When I click the button, instead of a dialog popping up, the content of the div just becomes visible.

I know this is old now. However, Set your class to the jQuery UI built in ui-helper-hidden.
<div id="dialog" title="Membership Renewal" class="ui-helper-hidden">
Your membership is going to expire.
</div>
This will resolve your div's unwanted cameo behaviour.

I believe you have two related issues here.
The reason that the DIV is showing when you first load is because you haven't yet told it not to. The jQuery script that makes the DIV behave as a dialog doesn't run until the HTML DOM is loaded, and until then it will not hide the DIV. A simple solution is to hide the DIV by default using CSS.
<div id="dialog" title="Membership Renewal" style="display:none;">
Your membership is going to expire.
</div>
The button click problem is related: RegisterClientScriptBlock will output a script that runs as soon as it is encountered, so the jQuery code that turns it into a dialog hasn't had a chance to run yet. In order to give it a chance to do so, you can change the C# code to use RegisterStartupScript, which will delay execution of showjQueryDialog() until the page has finished loading and the jQuery code has had a chance to make the DIV into a dialog.
if (timeSpan.Days >= 30)
{
//Show JQuery Dialog Here
ScriptManager.RegisterStartupScript(this, typeof(Page),
"showExpiration", "showjQueryDialog()", true);
}

make sure you are specifying the correct doctype at the top of your page, this seems to be the cause of some issues that i've seen.
edit:
also, to keep it from flashing at the beginning you can have something like
#debug { display: none; }
somewhere before the element (most likely your stylesheet or in the head).
another thing that might help is if you put set:
OnClientClick="showjQueryDialog(); return false;";
in the page load or similar, that way you wont need a postback (asynchronous or otherwise).

The reason its not showing is because the document probably hasn't loaded yet. and document.ready hasn't been called, so dialog("open") is getting called before dialog({options}); so to fix this just add the code to in a doc.ready call.
Also, your only loading the dialog once, so you don't really need to initialize it as autoOpen:false, use the display:none then show it as John Boker said
function showjQueryDialog() {
$(document).ready(function() {
$("#dialog").dialog({
modal: true,
buttons: { "Renew Membership": function() { $(this).dialog("close"); } });
$("#dialog").show(); // sets display:block;
//alert("Time to renew Membership!");
});
}
<div id="dialog" style="display:none">
<!--..-->
</div>