Pass xml config file into javascript library via require.js? - javascript

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.

Related

How to combine MVC bundling and asynchronous loading of JS files

I have an MVC page that has a number of JavaScript dependencies, let's call them depend-A and depend-B where depend-B depends on depend-A. These are both included in different bundles in MVC that is being included on the page. After running this through Google's pagespeed tool it suggested that we should be including the JS asynchronously to prevent render blocking.
Because of the dependencies, they need to load in particular order so I have looked into utilising LABJS to load them asynchronously in the correct order to prevent the render blocking.
This works by including the bundle's URL, but I lose the ability to be able to have the debug versions of the JS files locally while developing.
Can anyone suggest a way around this, so that we can load the JS files asynchronously but in order and maintain the debug versions locally?
Here is what I am currently using.
<script src="~/Scripts/LAB.min.js"></script>
<script>
$LAB
.script("#Scripts.Url("~/bundles/jquery")").wait()
.script("/scripts/fileone.js").wait()
.script("/scripts/filetwo.js").wait(function() {
FunctionInFileTwo();
});
</script>
The page source with the above code is as follows.
<script src="/Scripts/LAB.min.js"></script>
<script>
$LAB
.script("/bundles/jquery?v=GnU3whLS74nHNYUsUJjcWJKdXvKBNbFqBrkQVKSNlKc1").wait()
.script("/scripts/scripts/fileone.js").wait()
.script("/scripts/scripts/filetwo.js").wait(function() {
FunctionInFileTwo();
});
</script>
It doesn't look like there's any clean API available for this.
Scripts.Render("~/bundles/yourbundle") returns an IHtmlString of the necessary script tags - you could make a method that scavenges the script srcs from that string and generates the correct $LAB invocations.
Scripts.Manager.RenderExplicit(tagFormat, paths) comes close, where you'd just pass a better format string as the first argument, but reading the code it looks like it could start including differently formatted script tags verbatim in the middle of the list.

Is it possible to use Mojolicious tag helpers in external JS files?

I am currently working on cleaning up a little web app I've written in Mojolicious. As part of that cleanup I am separating out my javascript into the public directory from my html.ep files.
The problem I have though is I don't seem to be able to reference tag helpers any more, like 'url_for' or even referencing values in the stash such as '<% $stashvalue %>'.
Any idea's on how or if I can do this is very much appreciated.
cheers.
The stuff in the public directory is served statically, optimally by your webserver, not by Mojolicious or Plack, so that file does not get processed by Mojolicious, thus <% $stashvalue %> not meaning anything.
A solution would be to embed those parts of javascript that need to access server side variables in the mojo templates - rather ugly, but less code to be written.
Another one would be to make an ajax call from your javascript files, when they are loaded, and get the values sent by the server - more elegant, but more code to be written.
Another one that I can think of, would be to move those javascript files under a folder that gets processed by Mojolicious and include them parameterized - in your html.ep file that needs that js file, do :
<script type="text/javascript" src="http://example.com/url/served/by/mojo/?param1=<% $stashvalue %>&param2=<% $stashvalue2 %>"></script>
And, in the controller that responds to /url/served/by/mojo/, render that js file, with the params replaced by the ones from the query. As an alternative, you could store/receive those params also on the session
As usually in Perl, there is more than one way to do it.
What I typically do is encapsulate most of my javascript in function calls or objects in pure javascript files. Then in my templates I include those pure javascript files and use the api that I built in those files from the template, interpolating the server-side variables into the arguments of the functions. You can peruse the code for Galileo to see several examples.
For example, see how this template passes stash values to this pure javascript file's functionality.

Access function defined in separate .js file from a .js file

I've seen quite a few questions regarding loading a .js file into an HTML file, and I know how to do that. However, say I have the file "classlist.js." How can I go about using the classes defined in that javascript file in another javascript file? I keep seeing answers that suggest using the
<script type="text/javascript" src="filepath"></script>
syntax. When used in a .js file, though, it throws a syntax error on the "<" so I assume this code is invalid.
So, how would one utilize a function in a .js file that was defined in a separate .js file... that works, and is efficient (If there is one)?
EDIT:
I'm going to clarify some thing for the future, since I'm still fairly new to Javascript, and it looks like there were a number of other factors I didn't even know came into play.
I had two .js files, one of which declared classes that were extensions of classes in the other file. I wanted to use the extended classes in a webpage, and I thought I had to load the originial classes into the second .js file, THEN load that .js file into the HTML file. I wasn't programming completely outside of HTML.
Sorry for any misunderstanding, hopefully this thread is helpful to somebody else in the future.
Assuming you are talking about javascript in a web browser, all js files are loading in an html file, typically index.html. You need to use the script tag to load the javascript in the proper order in that html file, not in the javascript file. So if file B requires the things in file A, you need to load file A first, meaning put the script tag that loads file A before the script tag that loads file B.
Two answers:
Non Browser
If you're using JavaScript in a non-browser environment (NodeJS, RingoJS, SilkJS, Rhino, or any of a bunch of others), the answer depends on the environment — but many of these use the CommonJS require mechanism. E.g.:
// Get access to public symbols in foo.js
var foo = require("foo.js");
// Use the `bar` function exported by foo.js
foo.bar();
Browser
If you're using JavaScript in a browser, you put script tags like the one you quoted in the HTML, in the order in which they should be processed (so, scripts relying on things defined in other scripts should be included after the scripts they rely on).
If you want to maximize efficiency in terms of page load time, combine the scripts together on the server (probably also minifying/compressing/packing them) and use just the one script tag.
The answers posted above should do the trick however since you mentioned doing it efficiently you can consider taking a look at javascript module based loaders like require js( http://requirejs.org/ ) based on AMD
You have to put the reference to classlist.js in your HTML file (not your Javascript file), before any other SCRIPT element which requires it. For example, within the 'head' element:
<html>
<head>
<script src="testclass.js"></script>
<script src="file_using_testclass.js"></script>
<script>
var tc = new TestClass();
</script>
</head>

Using jQuery to send a variable to an external script and grab the results

I have a basic webpage set up and I would like to use jQuery to send a single variable (user-generated) to a javascript script (external -- well not really, still on the server, just not embedded in the webpage). This script will do a bunch of stuff with the variable and spit out a large array of results. I then need to update my page with the results.
I've done something similar using AJAX to POST stuff to a PHP script, but how can this be done with a JS script?
well ... including your script using the following (as opposed to embedding it) will keep your source neat and clean:
<script src="yourscript.js" type="text/javascript"></script>
The file could contain a function which you then call from outside (ie, the actual page source). As JavaScript is executed on the client-side (ie, the browser), downloading the file is unavoidable (unless you take extreme measures like an apache::mod_js, or rewrite the function in PHP). Best to keep things simple and use the above.
<script type="text/javascript" src="path/javascript_file.js"></script>
I think this is more what Kaustubh means. You do not have to put the actual code blocks into the page, just reference it this way.
When the page loads it will also load the javascript file (clean)
you can then call the functions seamlessly.

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