How to do page initialization functions in ASP.NET AJAX? - javascript

There seem to be a number of weird things one could do if one wanted, for hooking up page-load type events. Here are some specific questions:
I know about the auto-hooked-up pageLoad function. Are there any others like it?
Where do I hook up events like those from, e.g., Sys.Application.add_init or Sys.WebForms.PageRequestManager.getInstance().addPageLoading?
What's the difference between the first two of those and pageLoad, if any?
Rather importantly, what is the "correct" way to be sure that the ASP.NET AJAX files are all loaded before you start hooking up event handlers, processing the page, etc.? My current approach is to use the auto-hooked-up pageLoad to hook up the rest, but this seems kind of hacky.

The built-in pageLoad function is just a shortcut to the Sys.Application.load event. There is another one - pageUnload. Find more info here.
You can hook those events up almost whenever you like - using the pageLoad function, invoking the add_init/add_load method inside a script block or calling ScriptManager.RegisterStartupScript from server-side. Just make sure you call that JavaScript within the form tag (see #4). By default all those events occur after the page is loaded so your code should have already been executed by then.
Technically there should be no difference between using pageLoad and the load event - the first is just easier to hook up.
By default the ASP.NET Ajax script files are rendered just after the beginning of the form tag. This means that those files will get loaded before any other JavaScript statement defined within the form tag gets executed.

Related

SAPUI5 Execute Code After Page has Fully Rendered

I am injecting a Javascript-File via a Chrome-Extension on a webpage that uses SAPUI5.
I want to get the model in the binding context of some UI5-Input elements and in order to do so, I need to get to the inputs via document.getElementsByTagName. (or is there another way?)
This only works if they are already rendered. Unfortunately the ready or load events fire too early, when not everything is rendered yet.
Is there a way for me to know when the inputs have rendered?
Edit: I do not have access to the source code of the page, everything I do has to be in the injected script.
To make sure everything is renedered before firing your events, sapui5 has the function onAfterRendering.
All logic written in that function will only be executed after the control is rendered.
When a rerender of the control is rendered, the onAfterRendering is triggered again.
In the end I did it like this:
I already had event listeners attached to click and key events. Every time the handler is called, I check if document.getElementsByTagName('input') returns the inputs I need.
If yes e. g. the rendering of the inputs is complete, I set a boolean that the page is loaded completely and execute my code.

Declare your javascript method before DOM ready

enter image description here
I'm a javascript/html newbie. I'm wondering what this exactly means and why it needs to be done. Won't declaring javascript method anywhere inside the page allow the javascript method to be ready before the dom is ready?
On a side note: I've had issues getting a javascript method to the execute on the onchange event of an ASP.net dropdownlist control, and I'm wondering if it is because the javascript method is declared near the end of the page, after the dropdownlist control is instantiated.
The dropdownlist and javascript function is on a content page, i dont know if that would make a difference regarding the javascript, when it does a postback and has to be placed on the master page.

What's the smartest way to refresh dom handlers after new ajax-loaded content?

I'm working with a large template of charts and other widgets. I also manually implemented some ajax tabs. Now whenever those tabs load new content (charts), the problem is that all the template scripts in the head tag won't work with those ajax-loaded elements anymore.
I know, normally you would use .live for this kind of problem, but this would mean to go into the whole 50k lines-js template and change everything to .live calls... Not really able to do that.
Is there instead a jquery way of reloading/reactivating all the scripts within the head-tag?
First off .live() has long since been deprecated and even removed from the latest versions of jQuery. You should never be thinking of using .live().
Second, as it sounds like you already know, the "right" way to fix this is to change your code to use the delegated form of .on() which is what replaced .live(). Yes, change all the code that does it the wrong way. Here's a post on using the delegated form of .on() instead of .live().
Third, a work-around would be to put all your initialization code that hooks up these event handlers into a single function (or called by a single function). Then, you call that single function upon initialization and then you can call that single function any time later after you reload your content. The trick is that you can only put code into that initialization function that can be called or should be called more than once after you content has been reloaded. If you put some event handlers in there that should not be in there, then you may get duplicate event handlers installed. So, only event handler initialization that applies to the replaced content should go in this function.
Suppose that function was called initDynamicContent, then it could look like this:
// init event handlers on the original version of the dynamic content
$(document).ready(initDynamicContent);
Then, sometime later after you replace the dynamic content, you can just do:
// code here that replaces the dynamic content with new content
initDynamicContent();
There is no magic jQuery way for this to happen automatically. jQuery has absolutely no way of knowing which code should be run again and which code should not.

Detect when HTML has finished loading AND rendering on the page

Is it possible to detect when HTML has finished loading AND rendering on the page? If so, how?
The page consists of HTML, calls to ajax, receives data back from ajax calls, lots of javascript stuff and some images too. I would like to detect when everything has finished. What I can't do is stick a function call at the end, because I don't know when the end is.
For example, the page has lots of ajax style elements which users can pick and choose from, i.e. user 1 might have a different number of elements than user 2 and even in a different order.
So what I can't do is use the last function to simulate the end of HTML rendering, because I won't know which function will be the last function.
The problem with answering your question is in the last few sentences where you say that you don't know where the end is because of user choices. There are two automatic events you can bind JavaScript to. What jQuery calls $(document).ready() which means the DOM is ready for manipulation (before images load and after external scripts and CSS are loaded) and what is more commonly called body onload (in jQuery this can be written as $(window).load()) which runs after all static assets are fetched. Your Ajax calls will all fire after at least the DOM is ready and there is no defined event for what happens after all of them. For that you need to keep track of them on your own. You could use a "last horse out of the barn" approach. Add a small bit of logic to the end of your Ajax calls to see if it is the last and raise a custom event called "reallyAllDone"
Yes onload
<body onload="load()">
That would detect when the contents of the body have loaded.
$(document).ready
will help you to know when the dom has finished its event and its ready

How to clear javascript of functions initialised after ajax call

I have the following pages. Page A and page B.
Page A contains:
Page A HTML
Page A javascript
Page B javascript
I then use an ajax call to load Page B HTML into page A and fire a function to initialise page B's javascript.
If I decide to remove Page B from Page A, I will also want clear all of the JavaScript functions that were also initialised when pageB was loaded?
Is there a way to clear JavaScript functions?
You can use separate namespaces in both pages. So, e.g., page A places all its JavaScript under window['pageA'] whereas page B uses window['pageB'].
To unload all of the functions from page B you simply have to use
delete window['pageB'];
Beware, however, that this does not clear any handlers or references to the functions of page B. So if there are some left, this might lead to errors.
For the way you structured your code, you can simply "delete" the function initPageB_function and you should be golden, like so:
delete initPageB_function;
If you have to reload the content of pageB again into the page, then it's a different story, because you should re-bind the event handlers for your onclick events.
At this point it's much way better to follow another approach:
Put the markup AND the javascript code that deals with the event handlers for pageB "into" pageB; this way, when you load pageB via Ajax you'll load also all the JS code that deals with that page; this is called delegation (and it makes perfect sense, cause your container - pageA - is not supposed to know what it is going to be loaded).
If you're using an helper library like jQuery, everything should be pretty simple:
somewhere in pageA, you define a spot for loading pageB content:
<div id='pageB'></div>
when you have to load it:
$('#pageB').load( 'http://url.for.pageB' );
As soon as the load progress, the JS code in pageB will be executed and you'll be golden :)
To remove the content of the page you will simply empty the container:
$('#pageB').empty();
And the JS too will be gone.
The next time you'll reload the page again, its own JS will be executed again. pretty simple and effective. :)

Categories