We Keep Coding

Stop script in dynamically loaded content

at the moment I am working on replacing pop-up on a website I inherited. Those pop-ups used modal dialogs, which are on their way out and even were dropped by pop-up blockers on client side.
My approach was loading the HTML of the pop-up into an div on the main site, while hiding the original content, then emptying the div and switch the main content back to visible.
This works so fa, but the loaded content has scripts that run to check if someone is already using that function. The first time you use that function all is fine. The script runs, sees noone is using the function, I go through the stuff, empty the div and return to the main content. When trying to use the function a second time the script to still run (console shows the requests), even though I emptied the div, prompting the eternal "please wait till other user is finished" lines, since the first script is still checking for use, signalling the second script "I'm buisy".
So right now, I am looking for a way to stop the first script, since removing the HTML-content doesn't suffice it seems.
The code so far:
$("#dialog").load("stuffToLoad.htm",function(response, status)
{
if(status=="success"){
$(".fullTable").toggle();
$("#dialog").toggle();
};
})
to get the content. The in-use-check is done with a post-request, that is repeated by a window.setTimeout every second. That part seems to still run.
When everything is done, or the user runs into an error I tried:
function returnToProcVal()
{
$("#dialog").html("");
$("#dialog").toggle();
$(".fullTable").toggle();
}
to delete the function content and scripts, to stop them running. While the DOM says all is gone I can see the post requests being repeated in the console.
I'd be grateful for any pointer or perhaps even better methods to get the function running and returning the user, without the use of pop-ups.

jQuery not working when called into another page

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.

Altering elements that are loaded from buttons after the page itself is finished loading

I realize the title is a bit unclear, so I'll elaborate as well as possible. Essentially, there is a webpage that the user visits. After the page completes its initial load, the user may then click a button on the page which will load new content into the page. Something like <div class="expanded" style> -- basically a bunch of text and perhaps some links.
I essentially need to alter the contents of this newly loaded area. Right now, I am running something like:
$('div.expand-button').click(function(){ //When the button to load new content is clicked...
And then fire off my document.querySelectorAll function at this point. However, if I do this, the new content is not finished loading when the function runs, and, as a result, nothing happens. What's the best way of delaying my function so that it will only run after the new content area is loaded?

I had a similar problem recently and the simplest solution I found (albeit probably not the best) was to use setTimeOut. So your code would look something like :
$('div.expand-button').click(function(){
YourLoadNewAreaFunction();
setTimeout(function() {
//do stuff you needed the page completely loaded to do
}, 1000);
}
1000 is of course an arbitrary number of milliseconds I chose, you could choose whatever time you deem necessary to completely load your new area. Assuming your new content loads in under a second, the above should work.
From what I've seen online, you could also try looking into callbacks.

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. :)

Running jQuery code retrieved from ajax request, what should I remember to delete?

I understand that it's possible (and I have done it) to return javascript and jQuery code (which of course is javascript... hehe) when doing a jQuery ajax request and running it once it reaches the browser.
What I'm wondering is if I return data, let's say a form, that I present in a dialogcontainer. What should I delete myself once that container is closed by the user and what does jQuery understand by itself to delete.
My idea is to build a page that require very little page reloads and once a user clicks on a button I present them with a form or some other content fetched from the server. Alongside that content the javascript required by that content should also be retrieved. But if the dialog is closet I don't want tons of javascript to be left eating memory. Any way around that?

You could unbind the click event that does the ajax call. If nothing is going to change if they open the dialog again, then this should be fine. While you unbind it you could then change it more a toggle type of thing (Show/Hide), since the javascript and HTML should already be set now.
But it really depends on what you are trying to do. The ajax call will only happen once they click it. It's not going to continually refresh unless you want to. So there should be nothing in the background running except for binding events like click, which is ok.