Develop Reference

How to have javascript work on php loaded content?

I have a php file that loads a different form based on a identifier passed in with a GET request.
Everything works.... except my Javascript/jQuery. Is there a way to re-load my javascript to get it to work on the form?
Or will I need to something else entirely ? like a template system?
Currently, when the page is being loaded by the browser it is commenting out my Javascript script tag that loads my functions.js file. I'm assuming this is because it is because the code relies on a form and as the form hadn't been loaded yet, some kind of error forces the script to be commented out.

You can rectify your problem in two ways:-
1. Put you complete javascript/jQuery code at the bottom of the page (very last) inside (<script></script>)
Or
2. Wrap your complete code inside $(document).ready(function(){ ...//your code ....});
Note:-
a. If you are trying to include an external javascript/jQuery file which have the custom code,then also include it at the bottom of the current page.
b. Take care that proper jquery library (if needed) will added before your code

jQuery(...).plugin is not a function because js file is not loaded

I use a plugin (in this example it is selectric). I only load the plugin javascript file on product pages.
The code I use is: jQuery('.myselectpicker').selectric({}); and is located in a custom javascript file witch is loaded on every page.
If I go to an other page then the product page, I get a jQuery(...).selectric is not a function error.
I understand why I get the error, because the plugin javascript file is not included in the head (only on product pages).
But is there something I can put around the jQuery('.myselectpicker').selectric({}); code so it doesn't return an error on other pages than the product page?
I don't want to add the code to the plugin javscript file or in a seperate javascript file only loaded on the product page.
And for performance reasons I don't want to include all javascript files on every page type.

You can use jquery's isFunction function - https://api.jquery.com/jQuery.isFunction/
// Will trigger selectric() function only if it's lib included
if( $.isFunction( $.fn.selectric ) ){
jQuery('.myselectpicker').selectric({});
}

An alternative to check if selectric is loaded is to check if any elements on your page need it, ie:
if (jQuery('.myselectpicker').length > 0)
jQuery('.myselectpicker').selectric({});
this will then give an error - so could be combined with isFunction (see other answer, no need to repeat here) - but, will let you know which pages need the plugin but are missing it, rather than just missing functionality without warning.

Can dynamically loaded functions finish writing the page that dynamically loaded them

Please Help.
Question: Can I dynamically load a JS file (/scripts/banner.js) and then use one of its functions -- writeBanner(document, t1, t2, t3) -- to finish writing the page?
I've read till my eyes bleed, but:
-- Every example I find assumes the reader will call a function AFTER the page is rendered, and
-- Every example assumes blocking is bad.
Unfortunately:
-- I need to call the functions in order to finish writing the page that loaded them, and
-- Blocking is not a problem. The app is deployed as an EAR file, so no JS files need thereafter be downloaded from anywhere else.
Why try to do this?
The initial window ("TAPP") loads a dozen functions from 6 JS files. All pages use them to write HTML in the page's body element that displays a consistent banner with up to 3 paramaterized title lines.
Level-1 Pages: These are opened in the initial ("TAPP") window by each other. It already has all functions loaded – works perfectly.
Level-2 pages: These are opened in pop-up windows opened by level-1 pages. They use "this.opener", i.e. "TAPP" to call those functions – works perfectly.
Now I want to be able to open Level-2 pages both
-- as pop-ups from a level-2 page, AND
-- as free standing pages.
NOTE: All level-2 pages.jsp being with this include to write the HEAD element:
<%# include file='/jsp-pages/level-2/headers/beg.jsp' %>
That way I only need to deal with scripting for all of them, in one place, at one time.
First Step: I added this code to beg.jsp:
<script language="javascript">
var SH = "";
if (this.opener && this.opener.name == "TAPP") {
SH = this.opener; // TAPP has all required functions
} else {
//Dynamically add the required <script> elements
/************************************/
// see code I tried below
/************************************/
SH = this; // "this" now has all the functions TAPP has
// alert ("Opener is NOT TAPP: " + SH);
}
// All pages can now call SH.writeBanner(document, t1,t2, t3) with their own titles
</script>
Here's the rub. When the alert () function above is uncommented BOTH tries (DOM and document.write() below) work perfectly. When it is commented out, level-2 pages opened as pop ups work perfectly BUT when opened as free standing pages do NOT write their titles. Obviously they are being rendered before the script is loaded.
My Tries to date:
-- Give up! Skip the code above. Hard-code six additional tags in "/jsp-pages/level-2/headers/beg.jsp" that will reload the functions in the six JS files every time any level-2 page is opened Either way.
Ugly, inelegant, redundant, a waste if the page is opened as a pop-up, to be avoided at all cost.
-- When TAPP is not this.opener, use DOM to load the JS files by adding script elements at the end of
<script type="text/javascript">
function dynamicload(){
var head = document.getElementsByTagName("head")[0];
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.setAttribute("src", "/scripts/banner.js");
script.async = false; // halt rendering until writeBanner() is loaded?
head.appendChild(script);
//alert ("DL Done");
}
dynamicload();
</script>
-- When TAPP is not this.opener, use document.write() to write the six scripts.
<script type="text/javascript">
document.write('<SCR'+'IPT src="/scripts/banner.js '><\/SCR'+'IPT>');
// and six more like it
</script>
So HELP!
Is it really NOT possible to use dynamically loaded functions to finish writing the page that dynamically loaded them?
glb

You can add things to the current page using dynamically loaded code. But, you cannot use document.write() to do so. You must add DOM elements directly to the page with methods like .appendChild() or .insertBefore() or set .innerHTML on an existing DOM element.
The problem with document.write() is that once the page had been loaded (and thus the document stream closed), any future calls to document.write() will clear the current page and start writing to a new, blank page which general ruins what you are trying to do.
And, when you dynamically load code, it will load AFTER the current document has finished loading.
document.write() is intended to insert content at the current location in the document stream while the document is in the process of loading which only works when the script is present in the original HTML either as a <script> tag or it can be used on a brand new document (such as the creation of a new iframe or new window).

Simple answer. You can't.
A page cannot load JS files with functions it needs to write the rest of the page.
No matter how you script to load the JS files -- add a script element with DOM, or write it in with document.write() -- the JS files end up being loaded AFTER the page is loaded when it is too late to write the page. (See discussion with nothingnecessarey.)
However, it still bothers me that if I throw an alert() in my the script, both conditional approaches work – DOM and document.write() -- i.e. I had titles! All I can think of is the alert causes the page to re-render itself and since the alert is called after the page is loaded, the JS files are loaded.
Thanks to all for their help
AFTERTHOUGHT: I dreamed that opening an empty page with an iFrame to load my level-2 might work. If so I'll return. If not ... I give up.

Linked javascript file not using the URL of its parent page

I have a function that loads more database results. This function is called on different pages so i have given its own file and then linked to it in each of those pages e.g.:
<script type="text/javascript" src="js/loadmorebuilds.js">
</script>
In that file, i run an ajax call to a file and use a segment of the pages URL.
If i create that segment in the file itself it doesnt work as im guessing it uses the URL of the page. My work around currently is like so:
<script>
var exampleSegment = window.location;
</script>
<script type="text/javascript" src="js/loadmorebuilds.js">
</script>
However i am writing a longer method of getting that segment from the URL and want to include it in with the js file itself so i dont have to go editing it on every page that i need it.
Is there a way to do this? Thanks, hope it makes sense...

So what you're asking is how you can get the url of the external script to go from there instead?
If the script is loaded with the page, it will be the last on the page as of the script running. So you can use a code like:
var scripts = document.getElementsByTagName('script');
var lastScript = scripts[scripts.length - 1];
alert(lastScript.src);
Source is another post on this forum Can code in a Javascript file know its own domain/URL

javascript function called is undefined while parts of the page are loading

I have an aspx page that includes a javascript file in the head tag. This page has a user control placed on it. The user control has a link with an inline javascript function that references an object that is defined in the javascript file loaded on aspx page.
The application consists of a master page and a number of other aspx pages. The page in question (with the javascript file) loads before any other page, and the link with the javascript file is rendered. However, if I click on the link, I get an error, saying "Microsoft JScript runtime error: 'Foo' is undefined". Where foo is an object defined in the javascript file. However, if I wait until all the parts of the page are loaded, the link works fine. What is happening here? How can I prevent this error from happening?
Thanks.

if I wait until all the parts of the page are loaded, the link works fine
That says to me the browser hasn't finished retrieving and executing the js file by the time you have clicked the link with the inline function.
One potential solution is to wait until the page has loaded to attach your click handler:
window.onload = function() {
var link = document.getElementById('myLink');
link.onclick = function() {
// on click logic
}
}
This is just an example. This would be placed along inside your js file so as to load all dependencies at once.
It's a little hard to be more specific as you've generalized quite a bit in your question.