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)
Related
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.
I've received a third party javascript library from a vendor with integration instructions that say use the following script include:
<script type="text/javascript" src="../Scripts/thirdpartyscript.js?config.xml"></script>
Note the "?config.xml" bit at the end of the src tag. It's an xml file containing data that the library parses and acts on. Removing the parameter causes the library to throw an exception as it tries to parse a null xml response object.
Require.js doesn't want the "?config.xml" parameter at the end. It treats it like it's part of the lib file name.
Rewiring the third party code won't be a manageable option. Can't remove the code as it's an integral component of the system. I don't want to dump require.js as the app is SPA backbone and require.js is module/dependency manager for the entire backbone code base.
Any viable options?
REVISED ORIGINAL POST FOR CLARITY:
You may be misunderstanding how the "src" attribute of the script tag works. All it does is include the script from the URL given. If the web server serving the file does nothing with the query string (?config.xml), it is just ignored. Remember, "script" tags just include code in your page and executes the loaded code, THAT IS IT. The script tag wouldn't even understand what you mean by "?config.xml" beyond that it is just part of the URL, and just loads scripts from the URL you provide it.
What you possibly need to do is include the script file and call some function or object/function in that script with the XML file as a parameter. The script can, perhaps, retrieve that XML file from the web server (via ajax, a library like jQuery can help with that) also and then process that XML. However, the process of doing that may be out of the scope of what my answer can provide without writing a small "novella" :)
Short Answer: The "?config.xml", as far as the script that is loaded goes, does nothing.
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/
Into my app I have included all needed JS files (my scripts, libraries such as Twitter Bootstrap etc.).
The problem is, that when I have a request which is called via AJAX, so in the called page are not included the JS files, which are included in my app and I have to include them into the called page.
Example: my_scripts.js contains lots of JS functions.
link to page called through AJAX
<a href="/articles/create_new" data-remote="true>Create New Article</a>
/views/articles/_create_new.html.haml
...some content of this file.. #here doesn't work the functions from the file "my_scripts.js"
when I put into the /views/articles/_create_new.html.haml this link
= javascript_include_tag "my_scripts"
...some content of this file..
so then in the /views/articles/_create_new.html.haml those JS functions working.
I would like to ask you, if exist any way, how to automatically put all JS files in my every single AJAX pages, because always include the JS files into an AJAX pages is not good way...
Thanks
use a script loader like RequireJS or $cript.
Have your pages reply 2 things also: the content and the scripts to load. This is best using JSON like:
{
"content" : "content here",
"scripts" : ["an","array","of","script","urls"]
}
then when the data is returned, parse and paint the content and after that, use the script loaders to load the scripts. Actually, you can make your own script loader. It's just a matter of dynamically creating a <script> tag, put it in the <head> and give it an src
I would achieve this in one of three ways:
jQuery
From http://api.jquery.com/load/:
Script Execution When calling .load() using a URL without a suffixed
selector expression, the content is passed to .html() prior to scripts
being removed. This executes the script blocks before they are
discarded. If .load() is called with a selector expression appended to
the URL, however, the scripts are stripped out prior to the DOM being
updated, and thus are not executed. An example of both cases can be
seen below:
Here, any JavaScript loaded into #a as a part of the document will
successfully execute.
$('#a').load('article.html');
However, in the following case, script
blocks in the document being loaded into #b are stripped out and not
executed:
$('#b').load('article.html #target');
Basically, you can add the JS references to the HTML returned by Ajax request and jQuery will execute them.
RequireJS or simular
Rather than return straight HTML, return the HTML as part of a JSON bundle that also contains an array of script references:
{
html: '<p>stuff</p>',
scriptRefs: [ 'js/one.js', 'js/two.js' ]
}
I would then iterate through the scriptRefs array with something like RequireJS.
Just add the code to base page
In all honesty, I'm more likely to just do this.
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.