parsing different javascript from same source - javascript

i know these things can be done easily through php but in shopify store i saw javascript attached like this async.
https:\/\/sometime.com\/shopify\/script.js?shop=storename1.myshopify.com
https:\/\/sometime.com\/shopify\/script.js?shop=storename2.myshopify.com
https:\/\/sometime.com\/shopify\/script.js?shop=storename3.myshopify.com
and to my surprize all three code was different.
anyone can tell what is happening behind the scene. how it is possible that different javascript is passes from same script.js ??
any help will be great learning

Here
https:\/\/sometime.com\/shopify\/script.js
is essentially not like there is a file script.js inside directory /shopify, rather it is a route. And then the shop acts here as a query parameter for GET request, the server reads it and returns the response accordingly.

Related

How can I generate and serve dynamic .js files with a Node.js-server which deliver useable functions to the client?

The content of the .js file is different depending on the settings on the server and the variables provided by the client(s).
I have managed to send a dynamically generated string as a file using Express' res.type(".js") and res.send(file_as_string). I create this string by appending a stringified object behind "var name_of_an_object = " using JSON.stringify().
This works in most cases, but not for functions. Functions, whether within an object or not, magically morph into {} (empty objects). I just need a way to make the functions into strings that are immediately readable by the client when it has loaded the .js file.
Since I get a feeling there has to be a more robust way of doing this, I would love to know about it. If there isn't, I would like to know as well. Andy ideas?
I thank you in advance.

Duplicate an HTML file (and its content) with a different name in Javascript

I have an HTML file with some Javascript and css applied on.
I would like to duplicate that file, make like file1.html, file2.html, file3.html,...
All of that using Javascript, Jquery or something like that !
The idea is to create a different page (from that kind of template) that will be printed afterwards with different data in it (from a XML file).
I hope it is possible !
Feel free to ask more precision if you want !
Thank you all by advance
Note: I do not want to copy the content only but the entire file.
Edit: I Know I should use server-side language, I just don't have the option ):
There are a couple ways you could go about implementing something similar to what you are describing. Which implementation you should use would depend on exactly what your goals are.
First of all, I would recommend some sort of template system such as VueJS, AngularJS or React. However, given that you say you don't have the option of using a server side language, I suspect you won't have the option to implement one of these systems.
My next suggestion, would be to build your own 'templating system'. A simple implementation that may suit your needs could be something mirroring the following:
In your primary file (root file) which you want to route or copy the other files through to, you could use JS to include the correct HTML files. For example, you could have JS conditionally load a file depending on certain circumstances by putting something like the following after a conditional statement:
Note that while doing this could optimize your server's data usage (as it would only serve required files and not everything all the time), it would also probably increase loading times. Your site would need to wait for the additional HTTP request to come through and for whatever requested content to load & render on the client. While this sounds very slow it has the potential of not being that bad if you don't have too many discrete requests, and none of your code is unusually large or computationally expensive.
If using vanilla JS, the following snippet will illustrate the above:
In a script that comes loaded with your routing file:
function read(text) {
var xhr=new XMLHttpRequest;
xhr.open('GET',text);
xhr.onload=show;
xhr.send();
}
function show() {
var text = this.response;
document.body.innerHTML = text;//you can replace document.body with whatever element you want to wrap your imported HTML
}
read(path/to/file/on/server);
Note a couple of things about the above code. If you are testing on your computer (ie opening your html file on a browser, with a path like file://__) without a local server, you will get some sort of cross origin request error when trying to make an XML request. To bypass this error, either test your code on an actual server (not ideal constantly pushing code, I know) or, preferably, set up a local testing server. If this is something you would want to explore, its not that difficult to do, let me know and I'd be happy to walk you through the process.
Alternately, you could implement the above loading system with jQuery and the .load() function. http://api.jquery.com/load/
If none of the above solutions work for you, let me know more specifically what it is that you need, and I'll be happy to give a more useful/ relevant answer!

In webpy, how can I assign a javascript value to a python variable?

I'm looking for a simple way to assign a value held by a javascript variable to a python variable in a webpy template. I have an int value held by a js variable that I want to use to get an element of a python array. For example (if I want $list[0] in a template):
<script>
...
foo = 0
$i = foo ??? (doesn't work...)
return $list[ foo ] ??? (doesn't work...)
...
</script>
Sorry if that isn't as clear as I hope it is. I've tried a ton of different ways to do this, and I can't seem to make it work. Thanks!!!
To expand on Pointy's answer, what you are asking for does not make sense because web pages code is run in a certain order, and you are trying to make it run backwards.
The webserver (python) gets a request. It uses templates to construct a response for that request, and returns and HTML page and sends it to the client. At this point, generally, the python code is done running.
The client (browser) gets the web page. It loads all the other resources it needs to display it, and then runs the javascript.
The javascript and python, therefore, are running on different computers at different times. The solution to your problem is probably going to be a little more complicated then you were hoping for: you have to make a server request from javascript to get the data from the server after the page is loaded on the client, and then manually add it to the DOM.

How to use JavaScript inside EL expression (ui:param with value)

I want to be able to pass a value of javascript function to an ui:parameter like this:
<ui:param name="paramName" value="someWidget.function()"/>
But this obviously does not work (it thinks that: someWidget.function() is a string parameter).
If I try:
<ui:param name="paramName" value="#{someWidget.function()}"/>
It thinks that someWidget is a bean name.
Is there any way to place there a value of javascript function on a widget? If not, what would be ideal way of including a value of javascript function in a parameter in JSF?
There's a major conceptual misunderstanding going on. JSF runs in webserver and produces a HTML page with therein some CSS/JS code which get delivered to the webbrowser. That HTML page with CSS/JS in turn runs in webbrowser. JS thus definitely doesn't run in webserver "in sync" with JSF somehow. To JSF, JS is like HTML just part of template text which it needs to produce.
You need to look for the solution in a different direction. As the concrete functional requirement is unclear, I can't give any hints in the right direction nor kickoff examples. To the point, you should perform it in Java instead of JS, or to let JS during page load send an ajax request with the desired variable as request parameter.

Javascript .js File Guidelines - How do I use a function outside of this file?

So two part question here. Basically, what is the proper practise for javascript function locations? I assumed it would be to have several MyScriptFile.js files, each with a few functions instead of one huge AllMyScripts.js file, as not every page needs every function.
However I'm not sure how to reference another function from outside of this file...
My situation: I'm using an AJAX request in many of my pages. Each request response is different (drawn from different files, etc) and is very hard to make dynamic (one-script-fits-all would be difficult). However, I do have my MakeAJAXRequest() function which creates the request object, which is standard to all DoSomethingWithRequest() functions.
How do I include MakeAJAXRequest() in the other files which contain the DoSomethingWithRequest() functions? It seems as though I should have been able to find this.. but I havn't come across it.
tl;dr I have MakeObject.js and UseObject.js. How does UseObject() reference MakeObject()?
EDIT: Found that if you include MakeObject BEFORE UseObject in your HTML <script> tags, UseObject will be able to reference MakeObject. Seems a little dirty still, as anybody who wants to use the UseObject script will have to be aware of the MakeObject dependency...
If you want to ensure your dependencies are loaded, you could use a function such as this: http://phpjs.org/functions/include:433 There is also include_once(), require(), and require_once()

Categories

Resources