How to inject server variable to a client side js/html file - javascript

How can a Javascript variable set on a server(via properties file) be injected to an Angular js/JavaScript app?
There is a Java Jersey application that has client files (js, HTML, CSS, etc.) under the /src/main/webapp folder and there is a javascript variable that I would want to set before it gets served to the client. For example , please consider the following:
<script type="text/javascript">
var serverHost = "<%serverHost%>";
</script>
How can I replace the value of "<%serverHost%>" String with a value of my choice that will be evaluated at runtime? Preferably via properties.
The goal of this is that the client has Rest calls and the URL cannot be relative and has to be full because the application will be accessed via a different/middle man server, so ultimately the rest calls need to reach the originated host server. The value is need via a properties file so the application/same build can work on different environments.
Would appreciate any ideas.
Thank you

The problem you are trying to solve needs server side rendering.
In your case, for example,
You can retrieve the host URL from the properties file on the server side, pass it to the view using the controller, and in the view, using JSP tags, generate an HTML for which the serverHost variable is dynamically set
HOWEVER....
As you are using AngularJS, this type of rendering is clearly against Angular's philosophy.
You can create a constant in angular,
angular.module('myApp').constant('SERVER_URL', 'http://localhost:8000/');
You can set the value of this constant during the build.
OR
You can create a simple API where you'll retrieve the host url value from the properties file, preferably in JSON format, then you can simply call that API to set this constant value.

Related

How to declare a node.js variable that i can later use in my js file?

So I have set up a node.js file that i'm calling "app.js". It looks like this:
const fs = require('fs')
var myInfo = fs.readFileSync('info.txt', 'utf8')
I have stored the content of 'info.txt' in the variable "myInfo". I want to display that content in an html page that is named "index.html". I wonder if there is any way I could get access to the variable "myInfo" from my javascript file, that I call "script.js" (which is linked to the html of course).
All of these files: "index.html","script.js","app.js","info.txt"
are stored in the same folder, which I call "node-test"
A program running in a <script> element on a webpage and a program running under Node.js are two different programs even if they are written using the same programming language.
They cannot directly share data.
Typical approaches to this problem would involve writing a webserver using Node.js and either:
Replacing index.html with a template so when you request / from that webserver, it gets populated with the data.
Providing a web service that the JavaScript in the webpage interacts with by making an HTTP request (typically with the fetch API).
Either way, it would be useful to take a look at the Express module for Node.js.

knockout.js external model js file

I have an MVC.NET app which using Knockout.js (+ knockout.mapping) to deal with some cascading dropdowns. The data for these comes from a WebAPI call to an external service. As it happens this service requires an authentication token which expires after 2 hours, so I have the MVC app put the data from the service in a System.Web.Caching.Cache and return it from there unless the token has expired where it will grab it again from the service.
This is working fine.
However when I need to get this to the View, I am currently using the following method, which is to have a property of the ViewModel that I assign the service/Cache data to and then do this in the view:
var model = new ViewModel(#Html.Raw(Json.Encode(Model.ReferenceData)))
ko.applyBindings(model);
where Model.ReferenceData is the data from the service.
again this is working fine, but... the thing is with this, that the page then has all that Json data dumped in it on each request.
I would like to use an external JS file for the ReferenceData as then at least it can be cached by the browser and lessen the weight of the page on future requests.
However, I imagine that the overhead of generating a JS file is not that small, along with – what I really need is it to generate a link to that file that changes in much the same way that the built in MVC bundling of js files works – generating a link with a querystring.
My question is: is there an easy way of doing this?
For sure I can, when the cache is filled that first time, generate a js file and reference that from the View, but as I say getting that to change its link each time it is refreshed – or at least working out whether the data in it has changed and updating it only then is where the problem lies.
Any insight to this would be of great help
Thanks
Nat
Version the JS file (you can keep a GUID in the file it-self).
In Application_Start() get this version ID to a static variable.
In your controller pass this static variable data to ViewBag.
Ref your script with this ID
When you regenerate the file, update the version in file as well as your static variable. Next request from the client get the new version with new key.
Now if you want to update clients on the new version you have to use bi-directional protocol like web sockets or long-polling.

Javascript or jQuery method to parse ASP.NET MVC Route URL

I'm building an ASP.NET MVC 4 website that needs to be available offline (HTML 5 manifests/caching), so I will be unable to take advantage of server side HTML generation.
Right now, I just have generic/cacheable HTML on the View (.cshtml) and I'm making jQuery AJAX calls on document ready to load the data from the server and using mustache.js to generate the HTML.
Being constrained to doing HTML generation only in the client side, I'm unable to use Url.RouteUrl to generate links and also constrained to having to parse the current URL manually when navigating to a details page, and using the Id (or whatever the parameter is) to make the AJAX call to retrieve the information for the specific record that I need.
Since I'm still using MVC URL Routing (and would like to keep using it) to return the corresponding View (as in, http://localhost:27954/Route/Test2/7?mytext=hellow), I'll need a javascript or jQuery function to both be able to parse URL's and retrieve the value for a given querystring parameter, and ideally another method to generate URLs.
Since I'm obviously not the first person in this situation, I was wondering if anyone had any proven methods already that they could share, or any recommendations.
Thanks!

how to pass javascript variable to the jstl code

I have something like the below code. I need to pass the variable selectedIndex to the JSTL code. How can I do this?
function updateSP(selectedIndex)
{
<c:if test="${entry.key eq IC.oList[selectedIndex]}">
}
First, you need the following concept right: Java/JSP runs at the server machine and produces a HTML/CSS/JS page. The server machine sends HTML/CSS/JS page over network (HTTP) to the client machine. Client machine retrieves HTML/CSS/JS and starts to interpret HTML to display a markup structure, apply CSS to style and position the structure and execute JS on the resulting the HTML/CSS.
There is no means of any line of Java/JSP code at the client machine. Rightclick page and view source. The only way to pass Java/JSP variables to Javascript is to just output them as if it's a Javascript variable so that it has instant access to it once it runs at the client machine. The only way to pass Javascript variables to Java/JSP is to just send a HTTP request with that variable as parameter and have Java/JSP to listen on that specific request.
More background information and code examples can be found in this article.
jstl is executed in server side so you can't pass a javascript variable to jstl.
What you can do is generate dynamic javascript using jstl.
Please use the tool to format your code.

Load mysql's value into javascript

i have stored values in mysql and i want to retrive that value in webpage
but the webpage is creted only using javascript
so how can i use that database's value in javascript
You need to have a server side script in the middle so you can retrieve the value using ajax.
What you're asking for is only possible with a restful nosql database like CouchDB.
You really need to give more information as to what you want to do, but as you implied that the page isn't dynamic the method would be to use ajax to request a dynamic page (written in a sever side langugage) that retrieves the data from the database and outputs it in the required format.
You'll need to either...
a) Have a separate, server-side script which can run the appropriate query, and then pass through the data to the page through an AJAX-type call (jQuery et cetera have functions to simplify the AJAX side of things, if you so desire),
OR
b) Put some server-side code into the page that is evaluated before the page is served and writes the data into the page within something that the Javascript can access it from (i.e. the definition of a variable or some such).

Categories