How to add javascript functions to divs loaded externally? - javascript

I have page A and pageB.
Page A loads page B into a div.
There are divs in page B that I when I want to execute functions onclick.
The problem is that no matter where I place pageB's javascript it doesn't work.
I assumed that if i had a function ot initalise pagesB's javascript after it was loaded into the div this would work... but no success...
Any responses would be very helpful... regards J

If you're loading Page B with ajax, then most likely the javascript inside Page B is getting stripped out. This is due to a security concern.
An alternative way to get this to work would be that you separate your structure like this
Page A HTML
Page A javascript
Page B HTML
Page B javascript
Now, when you load Page A you should load the following:
Page A HTML
Page A javascript
Page B javascript
Then, when you make your ajax call to load Page B HTML, you simply call the Page B javascript (which is already loaded) and everything should work.
Here's an example of what I'm describing:
http://jsfiddle.net/josephbulger/zSmQE/

How are you pulling in the page B? You need to bring it in raw, some methods of pulling in pages actually process the page and return the results instead of just returning the code. This may be part of the problem, but I wouldn't think it would be.
Also, you should be able to just reference the controls in page B and you can use document.getElementById or if using jquery $("controlID").event and wire functions to them.
actually, you could put page B's javascript into an external file and then add it to page A using script src= because once the code is pulled into the page, they are part of the page.

Related

javascript will not load unless page is refreshed

I am working on a website that was started off by someone else. That person built the whole thing in one 1000-line html file, and links to different 'pages' just reference other sections in the main html file. So my task is to break the page apart into seperate html pages. Unfortunately, now the seperate pages do not load the javascript unless the page is refreshed.
Is there a standard way to fix this problem without forcing the user to manually refresh the page?
If you break that one big page into several smaller pages, make sure you include the JavaScript (and CSS) in the new pages. The most efficient way to do this is to have the JavaScript in an external JavaScript file, and bring that file into the new pages by putting the script tag inside the new pages' head tags like so:
<head>
<script src="path/to/javascript/app_name.js"></script>
</head>
When the user clicks on a hyperlink to see one of the new pages, when the browser receives the response from the server, it will parse the response and execute the JavaScript.
If I understand your problem correctly, I would wrap whatever "detailsScreen.js" does into a function and call it after you changed the page content.

How to get javascript in main page to append to elements in ajax loaded div using jquery?

I'm using the jquery load function to switch out a div. Whenever I load a certain element via ajax that needs javascript to run -it won't work in the div. I know that this is because the element didn't exist in the dom on the initial page load.
I've googled for days and haven't found an answer that can give me an easy to understand explanation. Essentiallly, I'm told to just use .on or $getScript.
However, this doesn't seem to be the appropriate answer.
Since, each element loaded in the div has similar properties -I simply want to load the jquery library, and the same two external scripts in my index page's head section -and then make sure that those scripts stay "live" or append to the simple html content that is being externally loaded in the div via ajax.
So, for example, if page 1 has a div named bouncingcats, and page 2 has a div named bouncingdogs -that both require an external javascript named 'bounce' -I want to load the javascript file 'bounce' ONE TIME in the head section of my index page -and then dynamically swap out the div named bouncinganimals on my index page with either cats or dogs.
So far, it seems as if the only advice I'm getting is to just put the jquery library AND the bounce.js file at the end of page 1 and at the end of page 2. This, of course works -but it seems too redundant and of course slows down the ajax load.
Do you know of a way in which I could just load the jquery library and the external javascript page in my index page head once, and have them run when I load content via ajax into my div?
An issue that I have is that I didn't write the script bounce.js myself -and it is already minimized -so changing the script could prove to be extremely difficult. Is there something I can just wrap around the external javascript links themselves?

Ajax load javascript and css with content

I am using jquery ajax to load content from one page into a div on the current one, similar to the way gmail switches between inbox, trash, etc. I am using jQuery's load method
$("#divGlobal").load("newPage.html #container");
to load the content I need into my div.
newpage.html #container also has associated javascript & css files associated with it. Right now I am loading them by appending the necessary <script> and <link> tags to <head> but it does not always work. The files always load (I am watching XHR info in Firefox) but do not always seem to work correctly.
For instance, if I load page1.html & associated files (including jQuery functions for UI), everything works fine. However, if I then load page2.html and go back to page1.html, the files load but the jQuery functions are not responding.
Is there a better way of loading javascript & css files associated with the content I am loading?
Reloading the same javascript that you have previously loaded may not do what you want because all the variables and functions are already defined from the previous load and some state may already be in place from the previous load. Loading it again into the same page doesn't start from scratch which is probably what you want.
If you control the pages you're loading, then you can write the javascript in a way that will work by just having the scripts in the content load specifically designed so that they set the state exactly how you want it and clean up any previously loaded state, but you would have to write them that way in order to work that way. This would include resetting any DOM modifications, event handlers, global variables, etc... that the first invocation of the script may have modified.

JavaScript does not work on phonegap other than the first page?

I created a phonegap application, the first page navigates to the second page by "href".
in the second page, I have a JavaScript function that I want to execute.
The problem is that the page doesn't know the JavaScript, just if I copy the function to the
first page - it works.
I include the JavaScript in the page.
what is the problem?
For each page in the application you will have to include the JavaScript code you wish to execute on that page. For instance on page1.html you have a referenced function called getData() you will be able to call it on page1.html. If you follow a href to page2.html the function getData() is now out of scope. It is worth mentioning this is exactly how things work in web browsers.
The way around this is to move getData() to an external JavaScript file like main.js. Then you reference main.js via a script tag in both page1.html and page2.html. Now you'll be able to call getData() from either page.
Done use anchor tags with href values to change pages.
Use the jquery mobile function changePage http://jquerymobile.com/test/docs/api/methods.html
to change pages, as changePage wont load a new html fully but would load just the topmost jquert mobile "page" in that html file into the dom.

How to use Ajax to bring a page into my site then wait until it is fully loaded scripts and all

I have a site which pulls pages into a dynamic interface. Currently, the main page requires that any javascript the external pages will need be loaded with the main page. Most javascript the external pages have are objects that are built when the page gets pulled in, but first, which causes issues.
It's a little hard for me to explain for some reason so here's a simple walk through of process.
1.Request a page be pulled in
2.Based on a variable passed to function create a specific object which will be associated with the physical html coming from the page ( This is the external Javascript)
3.Load page into the objects frame
This flow requires that the external javascript be attached to the main page not the page being pulled in.
I want to switch steps 2 and 3, but I assume that I will need a way to know that the page and all its scripts have fully loaded before attempting to create the designated object, but I have no idea how to do that.
I am using jQuery and hope that this can be accomplished without a plugin but if it is needed then so be it.
Thanks
Update
Good questions. So the pages are local pages that we build at this point, so we know what to expect. Also the pages are loaded just into basic div structure.
Specifically the main page makes a request to get a page. That page is returned in the form of a string and is then pasted into a div element that is on the main page. The pages are more like fragments I guess. But they can range from fairly complicated and require a bit of javascript to not using any javascript at all.
And the external javascript would generally be added via a script tag and is not inline.
Due to the dynamic nature of the page we do NOT use IFRAME's, they cause issues with the movement of our modules.
If you're using an iframe then I imagine you are changing it's src attribute. To get an alert on when that iframe is done loading you should include a script on the page within the iframe:
<script>
$(window).load(function() {
alert("All Done");
});
</script>
If you are just requesting a string version of a page via AJAX and populating a div you need some extra JavaScript to detect when those dynamically loaded script files have finished downloading to the client.
I would visit this link to get you started.
A combination of Nick and Mic's solution.
In your IFRAME pages, you need a way to determine when the content is done loading, or ready, and then alert your main page:
<script>
$(function() {
parent.frameReady();
});
</script>
In your main page, you can code in the hook from your IFRAMEs:
<script>
function frameReady() {
// attach custom js to iframe here
}
</script>

Categories