Include javascript file in jsp from anothe javascript file dynamically - javascript

Is it possible to include a javascript files in jsp dynamiacalyy, ie. in any listener or anything like that from the current javascript file. This is for speeding up the page load.

Yes, there are multiple options, for example jQuery has $.getScript method. Or you can use http://requirejs.org/

Related

JavaScript file dependend on JavaScript code block in Yii2 (for dojo configuration)

I'm trying to register the dojo javascript files with Yii 2.0.
According to the dojo documentation, the code block for dojo config must be loaded before the actual dojo.js in order to be considered. However, in the HTML output my custom javascript code is always loaded after dojo.js.
This is my code:
$this->registerJs('dojoConfig="async:true,isDebug:true";', $this::POS_HEAD,'dojoconfiguration');
$this->registerJsFile('/dojo_toolkit/dojo/dojo.js', ['depends' => [\yii\web\JqueryAsset::className()], 'position' => yii\web\View::POS_HEAD]);
And in HTML it looks like this:
<script src="/dojo_toolkit/dojo/dojo.js"></script>
<script type="text/javascript">dojoConfig="async:true,isDebug:true";</script>
Any advise?
For the same position Yii2 always puts the inline scripts first and then the actual external files. So you can't fix this by adding them both to the <head>.
Its best to give the registerJsFile() call a POS_END to load it at the very end. It will still be loaded before the document.ready() call is made.
That way you can be sure that the configuration in the header is parsed before the load. Worst case scenario you can use POS_BEGIN to load it right after the body tag is opened, but since loading javascript is blocking I would try to avoid that.

Minimize javascript code

I am only new to javascript. I am using minify to minimize load time of CSS and JS files. I also compress the javascript in my HTML document (functions) using jscompress I am wondering if it was possible to even minimize the functions? I am running ajax updates so in my HTML document I don't want my linked PHP files listed.
Is there a way to minimize the function codes found in the HTML using minify or another alternative method to do this? Thanks.
Yes, you can extract the javascript code found in your html pages into a separate file.
Wherever you are referencing php code like this <?php echo var_name ?> or something of that sort, send that as parameters into the appropriate "functions" in the new js file.
Now, process this newly created js file through the compression library.

How to write javascript code using external files only

When using HTML5 Boilerplate, you are given a script.js file and the jquery file are all loaded after the body.
How do I know when to call certain code for a specific page? For eg. What if on /maps I want to load google maps dynamically, how do I accomplish this without putting it on the page and using script.js file while having it not load the map for all pages?
Basically, how do I structure my code when I can't have any script in my pages? How do I know what code to call for a particular page?
Script files that are included are immediately executed, so inside the script file you could have a section check the URL of the page you're on.
For example, something like this:
if (window.location.href === "http://myapp.com/maps") {
// call the map function or whatever ...
}
But, out of curiosity, why can't you add a script file to the specific page you're on? I'd only recommend the solution above if you absolutely cannot edit the HTML of your pages.
I too have the same question. I searched and just found these two
http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/
http://www.viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready-execution/
I am going through of this, and not yet completely reviewed. See if it is useful to you in between.

How to include my javascript file after Telerik includes their javascript

I would like to override Tekerik's javascript function. To do that I want to include a file that contains modified javascript after Telerik's js include.
I include my js files using ClientScriptManager.RegisterClientScriptBlock method. My files are included before Telerik's preventing me from overriding their function.
<script type="text/javascript" src="myScriptFile.js"></script>
<script src="/atlas/Telerik.Web.UI.WebResource.axd?....></script>
How can I include my javascript file after Telerik's?
One option that I found is to use RegisterStartupScript method that
"emits the script just before the closing tag of the Page object's <form runat= server> element."
which is after Telerik includes their files. This doesn't include a js file but at this point I can call a function that overrides Telerik's function.
Assuming you want to do this globally, had you considered editing the Telerik source file rather than overriding it?

ajax and $.getScript() to get a new script

I'm trying to add a js function dynamically so I read about $.getScript(). Correct me if I'm wrong, but it seems $.getScript() will just call a .js file that's already there in the public folder and will just sort of "load it" and make it available, but the js file itself being called is just a static js. What I'm trying to do is call a dynamic js script and the content of this js script changes considerably, so it has to come from the server.
I think this isn't possible with $.getScript() alone, or is it?
If not, I could make an ajax that returns the function syntax, but how do I then add it somehow to the current js or how do I create a js file for it and load that js?
I would possibly like to delete the new js later, but that's not a priority.
So can $.getScript() help with this or a combo of $.getScript() and .ajax?
Pekka's comment is correct - jquery doesn't care what the extension of the file is.
$.getScript("dynamicScript.php") will work just fine so long as that file outputs valid script (no script tags needed)

Categories