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. :)
Related
I have this form on one page that we use as a tool. It's on page tool.html, in div id="tool"
Since this tool is to be shown on another page as well, I want to pull the tool in and not have to copy and paste (in case changes are done later on, this will reflect it everywhere)
Now, I have put all the jQuery functions in a separate file that I link in, so I can reuse it on many pages.
I can call in the form properly by using
<script>
$(document).ready(function() {
$("#lyristool").load("../path/tool.html #tool");
});
</script>
And I can confirm that the linked script page is loaded in properly, but it's not working at all.
Why will the linked script work on the original page, but not on the page when that whole containing div is pulled in?
Try to execute this line:
$("#lyristool").load("../path/tool.html #tool");
before loading the other script. I think your binding is not working because those elements don't exist on the page at the moment of binding.
In order to be able to do that, you should put all your binding code in a document.ready callback.
I have a javascript that does some work then goes to another page.
I have it in a couple versions:
One is a bookmarklet, the other is a script for tampermonkey and js code.
Once it's there though I can't find a way to continue having it run.
I know javascript runs on the page but is there a way to have it server sided or something so that when the page is changed to another the script can continue once the page is loaded?
What I want:
I press button,
stuff happens,
I'm redirected to another page,
stuff happens again,
redirected,
stuff happens...
etc.
But I want it to not need any user input rather then the initial starting.
I have the code to the point where it does stuff then redirects but I don't know how to have it continue on the different page.
Make a method of some stuff happening and place this method on common js file that is linked on every page and call that method on every page $(document).ready(fucntion(){}) event.
function anyMethodName(){
//Do your required stuff here.
}
and call it on $(document).ready(fucntion(){}) like:
$(document).ready(fucntion(){ anyMethodName(); })
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
Hard to summarize in one question, but here are the details:
I have an ASP.NET MVC 3 project (many of them actually).
My standard practice is for each view to have an Init() method that is fired when the document is ready. This is where I put all my UI code, like rendering buttons and accordions, etc.
I am using the trick to hide un-formatted html elements by setting the html tag to display: none and after Init() is complete, I can unhide everything.
This works pretty well, but I initially had the showing of content in my layout page, but that would execute before the Init code of a view finished running. It gets even more complex if I use partial views with their own Javascript.
What I would like is to attach a callback in one place that fires after the all of my possible Init() calls are finished.
I tried using custom events, but then I would have to trigger them at the end of every Init method, and that's not very efficient.
Requested Code:
Layout Page
<script>
$("html").addClass('init') // init has display: none
$(function() {
InitLayout() // Basic stuff for every page like menu, buttons, etc
$("html").removeClass('init'); // show all content
});
</script>
View Page
<script>
$(function() {
ViewInit() // Init all custom ui elements on page: tabs, accordions, etc
});
</script>
The problem is that the removeClass will occur before each page's Init fires. I am trying to find a way to avoid having the removeClass call at the bottom of every Init method. Is there some way to attach a callback programmatically to avoid repeating code. My main goal here is to implement hiding of unstyled content until everything is complete globally so I don't have to worry about it in each view.
You could try to register the occurence of the init procedure into a global variable (array). This should be done outside of the document.ready() or JQuery equivalent. So within the <script> tags.
When your Init functions, inside the document.ready() event handler or it's JQuery equivalent , are finished, unregister the occurence.
While unregistering, check if there are any occurences left, if not, modify your html style.
The gap between script parsing and the DOM actual finishes loading could be working for you in this case.
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.