Here's the odd situation:
we have a piece of javascript library that is being called on our onload of aspx page.
It works everytime for us, but the clients that have low speed modems get an error, because the object is not getting initialized and the aspx page is already loaded.!!
Is there any suggestions on how to call this piece of js code?
Thanks,
make sure you have your end tags.. i have seen onLoads in the not working right when your core tags are incomplete or not properly formatted
The onload even happens when everything in the page is loaded. If you have some script that is loading from a different server (ads, statistics), the onload event won't fire until those are loaded also. If their server is having problems, your onload may never fire at all, or after several minutes when the browser gives up waiting.
Instead of using onload you could put your code in a script tag as early as possible in the page, i.e. after the last element that the script needs.
If you have some external script that doesn't need a specific place in the page (statistics for example), you can move it to the bottom of the page to minimise the risk of interference with the rest of the page.
With JQuery you can call your functions with ready event :
$(document).ready(function() {
// call your functions here
});
The event will be called when the DOM is loaded.
Related
I have a web application with some pages take quite a long time to load because of what they have to do in code behind. I would like to show what is going on to the user by showing the different status of the process.
I was thinking about calling recursively (by ajax) a page which ready a value in the session. This value is set by the page that take time to load.
The problem is that the page called by ajax is not executed while the other page load is finished.
Is there some way to do that?
Thanks advance
The usual pattern here is to load an initial status page that triggers an AJAX call to retrieve the final version of the page, overwriting the original with the result of your AJAX call when it completes.
Separate the part of the code that takes a long time and call it asynchronously (e.g. as a WebMethod) on page load, e.g. if using jQuery, on document.ready. You could also fake this using an UpdatePanel which is set to conditional refresh, and the code is never run by default. Then refresh it from script using __doPostBack('updatePanelUniqueID','').
I found this thread while trying to resolve my issue unfortunately this I can't seem to figure out the problem since I already have everything the way it should be.
I've got 3 updatepanels that each call a function on a .js file setup like this:
<asp:UpdatePanel ID="upPnlGeneralinfo" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<script type="text/javascript">
Sys.Application.add_load(BindPageLoad);
</script>
Each have a different ID of course. Whenever a control calls a postback within the update panel it works, however in the js file I added a console.log("running the js file") and I can see that it's being called three times meaning it's all three updatepanels are being refreshed instead of just the one.
All the triggers are inside each of the respective updatepanels so I shouldn't need to add any triggers (I did just to make sure and it makes no difference). Shouldn't the UpdateMode=Conditional resolve this?
Also worthy to mention, none of my code behind ever calls any updatepanel.update(). I tried adding that for each control to their respective panels and that also made no difference.
Any ideas?
It doesn't necessarily mean all your update panels are being refreshed.
The MSDN docs say the client load events are raised after either a synchronous (full page postback) or asynchronous (partial page) postback.
This might mean that only one of your update panels is refreshing as intended, but all three event handlers are run again after the async postback because of how they were hooked up using MS Ajax.
MSDN excerpt:
Client Events of the Application and PageRequestManager Classes
Sys.Application.load Event
Sys.Application.add_load(handler);
Raised after all scripts have been
loaded and all objects in the
application that are created by using
$create are initialized. The load
event is raised for all postbacks to
the server, which includes
asynchronous postbacks.
-- http://msdn.microsoft.com/en-us/library/bb386417.aspx
Working with Partial-Page Rendering Events states a different event that runs only when the entire page loads:
During ordinary page processing in the
browser, the window.onload DOM event
is raised when the page first loads
-- http://msdn.microsoft.com/en-us/library/bb398976.aspx
This the regular DOM load method, not part of MS Ajax.
Therefore I assume if you hook your client code to the regular window.onload event then it will run only when the full page loads, on the first time, not on successive async postbacks (aka update panel/partial refresh).
Whether or not this knowledge is harnessable to provide the outcome you want I'm unsure. Maybe you're looking at only the MS Ajax objects for a solution when a hybrid browser/MS Ajax client solution exists.
I am using jQuery 1.3.1 and saying $('#somediv').load('somepage.aspx') An aspx that have a Repeater which loads few images. When loading is complete a cycle() function (jQuery plug-in) will be called upon them.
Now I have this working on http://www.techlipse.net/test/agb via the function called from the menu-event-handlers (a combo box). When it is loaded via the event handler of the combobox I call cycle() plugin as a callback function to the load() method, or function .. I think I might have misunderstood some of the fundemantals of javascript, or why the document.ready() is firing long before the images are fully loaded therefore failing the cycle() plug in. When it is said to be a bug of jQuery1.3.1 that it does wait for them to load. Posted here:
JQuery is waiting for images to load before executing document.ready
any help .?
document.ready fires once the document is ready. Not the images. You'll have to run a second check on images to check they have totally loaded.
The whole point of $(document).ready is that it fires as soon as the DOM is manipulable, but before window.onload - which fires after all HTTP traffic is done with.
You should upgrade from 1.3.1 ASAP. Its $(document).ready() functionality was buggy, making generally correct answers about $(document).ready() not necessarily accurate in your situation.
I understand that in IE 5.5, 6, and 7, when you modify a DOM element before it is 'closed', it throws an "operation aborted" error (this article has more information: http://www.clientcide.com/code-snippets/manipulating-the-dom/ie-and-operation-aborted/)
In my ASP.Net application, I am registering a client script block on the page during the page_load event. (I tried moving this code to the page_loadcomplete event or page_prerender event with no luck).
Here is my code (pretty basic):
// Checks if the handler is a Page and that the script isn't already on the Page
if (page != null && !page.ClientScript.IsClientScriptBlockRegistered("blockUIAlert"))
{
ScriptManager.RegisterClientScriptBlock(page, typeof(ScriptUtilities),
"blockUIAlert", script, true);
}
I'm using this same code from other AJAX postbacks in my page without a problem. This error only occurs if this code is called when the page is being loaded.
What can I do to have this code be called after the DOM elements are closed? I don't want the user to have to initiate this action manually -- I want this code to be executed as soon as the page is loaded, provided certain server-side conditions are met.
If you are using YUI, or jQuery they have js event listening functions that will run code when the DOM is done loading. I am betting that MS Ajax library has a similar function.
jQuery Examples
Maybe this is the answer you're looking for.
I was having the operation aborted error and like you I also knew why it happens, but I was 100% certain that I was not modifying a DOM element before it was 'closed'. Turns out the bug was in the ASP.NET AJAX client-side framework. I had to modify the client-side framework. Please see the question I posted, Internet Explorer's Operation Aborted and Latency Issue
I also just noticed that your are using RegisterClientScriptBlock. Try ScriptManager.RegisterStartupScript(...).
I use the page_load event for this same purpose.
What event you attach the script on the server-side does not matter. Your problem is purely client-side and you did not provide any script. However I guess calling the function on the onload event might work. For example <body onload='yourFunction()'>
How do you call a Javascript function from an ASPX control event?
Specifically, I want to call the function from the SelectedIndexChanged event of a DropDownList.
I get a little nervous whenever I see this kind of question, because nine times out of ten it means the asker doesn't really understand what's going on.
When your SelectedIndexChanged event fires on the server, it fires as part of a full postback. That means that for that code to run, the entire rest of your page's load code also had to run.
More than that, the code runs as the result of a new http request from the browser. As far as the browser is concerned, an entirely new page is coming back in the result. The old page, and the old DOM, are discarded. So at the time your SelectedIndexChanged event code is running, the javascript function you want to call doesn't even exist in the browser.
So what to do instead? You have a few options:
Change the page so the control doesn't post back to the server at all. Detect the change entirely in javascript at the client. This is my preferred option because it avoids odd onload scripts in the browser page and it saves work for your server. The down side is that it makes your page dependent on javascript, but that's not really a big deal because if javascript is disabled this was doomed from the beginning.
Set your desired javascript to run onload in the SelectedIndexChanged event using the ClientScript.SetStartupScript().
Apply the expected results of your javascript to the server-model of the page. This has the advantage of working even when javascript is turned off (accessibility), but at the cost of doing much more work on the server, spending more time reasoning about the logical state of your page, and possibly needing to duplicate client-side and server-side logic. Also, this event depends on javascript anyway: if javascript is disabled it won't fire.
Some combination of the first and third options are also possible, such that it uses javascript locally if available, but posts back to the server if not. Personally I'd like to see better, more intuitive, support for that built into ASP.Net. But again: I'm talking about the general case. This specific event requires javascript to work at all.
As Muerte said you have to just put the javascript, or a call to it on the page from the code behind. Personally I use this:
ClientScript.RegisterClientScriptBlock("customscript", "<script>simple script here</script>")
Of you can call the function if you already have a more complex one on the page instead of the stuff I have.
You can't do it directly from an event, because ASPX control event is server side.
What you can do is emit a Javascript in the ASPX event which will call the JavaScript function when the page reloads.
For example, if in your ASPX page you have a Javascript function called "DoSomething()", in you ASPX control event, add the following:
protected void btnSubmit_Click(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "myEvent", "DoSomething()", true);
}
The last boolean parameter defines that tags are added automatically.
In the code behind, attach some markup to the server side control via its attributes collection. This assumes that the function is already in a client script file that is already available to the page.
MyServerDDLControl.Attributes.Add("SelectedIndexChanged", "MyClientSideFunction();");