Run Script Loaded by $.getScript( ) on Get

[iwato]

QUESTION:  What is the best way to trigger a script stored in a fetched file.

BACKGROUND:  I send a query string via an HTTPRequest to a file that upon confirmation loads a script containing AJAX calls.  I want to know the best way to get the AJAX calls to run when the file in which they are contained is loaded into the file that contains the HTTPRequest.

PROPOSAL: Someone on the internet suggested that the code be placed in an anonymous function that is triggered with the ( ) operator.

//data.js
function() {
	code to trigger
}

$.getScript('data.js', function(data) {
	();
}

Does this make sense?  What would you recommend?

Roddy

[Ingolme]

No, that wouldn't work. The function needs a name if you want to use it like that, and there's no guarantee that the file has been parsed yet when the callback is executed.

If you want to go with the anonymous function, have it executed as soon as its declared like this:

(function() {
  // Function content
})(); // Executed immediately.

// Load the external file, it runs on its own so nothing else needs to be done
$.getScript('data.js');

 

I don't really get the point of loading a separate file containing Javascript, though. It's better to just load a script file containing all the functions when the page loads using a <script> tag and then call those functions by name whenever they're needed.

[iwato]

Thank you, Ingolme.
The idea is to use the same code in different places more than once.  Kind of like a class in PHP.

Roddy

[Ingolme]

There's no reason why you can't include the same Javascript file in multiple pages. Declare all your functions in one file, then include the file on any page that needs to call any of the functions.

[iwato]

As you probably know, I work with inserts rather than frames, and Ioad the CSS, HTML, and Javascript only when the insert is called.  In effect, my goal is two-fold:  one, load the CSS, HTML, and Javascript at the same place in the host page; two, leave as small a footprint as possible in the HTML that defines the document.  By keeping the CSS, HTML, and Javascript together it is easy to see what is going on.  Placing the Javascript at the top of the host page separates it from the rest of the insert "package".

I suppose I could write a snippet that would insert a <script> tag at the top of the host page. For, after all, this is how I get the CSS to run.  What, however, would be the advantage of this?

Roddy

Edited February 13, 2018 by iwato

[Ingolme]

I'm not sure what you mean by "insert" in this context. The issue you get when calling $.getScript() is that there's a time delay between the time the function is called and the time when the contents of the loaded file begin executing. The page would respond a lot faster if all functions were already available as soon as the page is loaded.

You might want to consider if your page still works properly if Javascript had an issue while executing or failed to load.

[iwato]

What I mean by insert is to replace the contents of a <div> element on the host page with hidden contents on the same page or the contents of another page.  In the current scenario I am replacing a <div> element on the host page with the contents of another page.

Roddy

Edited February 13, 2018 by iwato

[iwato]

Well, in any case, it worked.

i can now replace file content with other file content in the same domain from a call in the same or other domain.

From third party domain: https://www.grammarcaptive.com/overview.html?newsletter=1

From same domain:  

1. Go to the Grammar Captive Podcast Hostpage
2. Find the menu item called Seven Gates in the navigation bar
3. Open the Details option and click on the phrase Subscribe ...

Hooray! Hooray! Hooray!

Roddy

ps.  Apparently the called function is called an IIFE (Immediately Invoked Function Expression).