Grails.pass parameters from the controller to external .js file? - javascript

I have controller:
package plugin
class TestController {
def simply = {[name:new Date()]}
}
as you see i pass param name
my view page:
<html>
<head>
<!-- <script type="text/javascript" src="${resource(dir:'resource/js',file:'simply.js')}?color=FA8DFF">-->
<g:javascript>
alert("${name}")
</g:javascript>
</head>
<body>
</body>
</html>
this page run correct - afrer load i see alert window with current date :)
but, when
view page:
<html>
<head>
<script type="text/javascript" src="${resource(dir:'resource/js',file:'simply.js')}?color=FA8DF">
</script>
</head>
<body>
</body>
</html>
and external simply.js file:
alert("${name}")
i see empty alert window. So, my question: how i can pass params to external.js file?

There are two stages in parsing the view when it is displayed to the user. State one is the server executing any code contained in the view page. In your case
${name}
Is turned into the current date since that’s the value from the controller. This means that the text sent to the users browser contains 3/2/2010 instead of ${name}
The second stage that takes place when the user accesses a view is the browser parsing the HTML. The HTML that is sent to the browser depends on what took place on the server. Since in your example the JavaScript is contained in the view ${name} is replaced with the current date on the server. Then JavaScript containing 3/3/2010 is sent to the browser since ${name} was replaced by 3/3/2010 on the server. This means the popup box will contain 3/3/2010. If you include external JavaScript files they never get run through the first step since the browser directly downloads them and does not make a request to the server. This means that the first step never takes place so $[name} does not get replaced with the value from your controller. This behavior is the same weather you use the
<script>
or
<g:javascript>
tag.
In order to pass values from a view into JavaScript located in an external file you should define your JavaScript as functions in external files if you wish to pass parameters. For example in external.js
Function dispDate(theParam)
{
Alert(theParam);
}
Then from your view
<g:javascript src="external.js" />
<script type="text/JavaScript">
dispDate(“${name}”);
</script>
Where external.js is stored in the web-app/js directory.

Related

How to read local Storage JSON in angular index.html file and show in View page source as a script

I have JSON in my localStorage which I want to read in my angular index.html file and also I want to show this JSON when I see the View page source. Below code, I have tried.
Note: When I am seeing View page source then only Plain HTML is showing noting dynamic from localStorage.
<html>
<body>
<script type="text/javascript">
window.onload = function() {
alert(JSON.stringify(JSON.parse(localStorage.getItem('profileJson'))));
var data = JSON.stringify(JSON.parse(localStorage.getItem('profileJson')))
var nameFromJson = data.default.provider.name
document.getElementById("demo").innerHTML = nameFromJson;
}
</script>
<p id="demo"></p>
<app-root></app-root>
</body>
</html>
View page source only gets the raw HTML then displays it. Therefore, you wouldn't be able to access the local storage when you're getting that text out because it would require JavaScript to be run.

Get the contents of a div element from one site to another

I have an argument in JS which holds pretty much the data. It's the server information to my server. It changes often, e.g 20/64 or 32/64. You get the point.
I am trying to get the contents of the data to go on an external site, however, when I try, it doesn't work.
To summerise, I have a div which holds the data, I want to get that data using JS and put it on an external site which isn't using the same domain or web server.
HTML FILE:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="serverstats-wrapper"></div>
<script src="import.js"></script>
</body>
JS File:
$(document).ready(function(){
$.post("query.php", {},
function (data) {
$('#serverstats-wrapper').html (data);
});
});
var the_main = document.getElementById("serverstats-wrapper");
var the_data = the_main.textContent ? the_main.textContent : the_main.innerText;
I want to get the text from the html file to the js file then take it to an external website.
Tasid! This won't work! JS does't have such a technique implementet. To do so, you need node.js. This allows you to send the data over a socket to your other webserver.
It does't work difrently, because JS is executed direct on your PC.
You can grab data from another site; but you cannot inject JS code into another site. Here are some methods to retrieve html from another site: Include another HTML file in a HTML file

How define server variable into javascript context?

When I have a variable defined into server context, sometimes I need use it into javascript context; for example the session id.
What's the better way to do it?
I want to separate javascript files and view files (in my case jsp); for the moment I have found 2 ways:
1) myVariables.js.jsp: create a jsp file that returns javascript code
myLib = {
sessionID: "${sessionId}",
[...]
}
and import it as javascript into the jsp view file:
<html>
<head>
<script src="myVariables.js.jsp"></script>
[...]
</head>
<body>
[...]
</body>
</html>
I'm able to get the session id writing: myLib.sessionId.
Pros: handy and rapid.
Cons: write a jsp file that acts as js.
2) Save the server variable into hidden input fields (for example, in the main part of the template):
<html>
<head>
<script src="myLib.js"></script>
[...]
</head>
<body>
<form id="myVariables">
<input type="hidden" name="sessionId" value="${sessionId}" />
[...]
</form>
[...]
</body>
</html>
I'm able to get the session id writing a specific function into myLib.js library:
myLib = {
sessionId: function() {
return $("form#myVariables > input[name=sessionId]").val();
},
[...]
}
Pros: javascript and view completely separated.
Cons: more code to write; little harder to understand than the previous.
In my opinion first way is better because your pages will be clean and more readable. That'is very important! ;)
Best regards
There's a third way that I think takes the best of both of your suggestions: An inline script tag containing the variables:
<html>
<head>
<script>
var myLib = {
sessionID: "${sessionId}",
[...]
};
</script>
</head>
<body>
[...]
</body>
</html>
No separate JSP to write. Just as separated as the second solution in your question, as the JavaScript is tied just to the myLib, exactly as the JavaScript in your second solution is tied to the structure of the form.
There's a benefit to your first solution we should call out: It allows the HTML to be cached by the browser (by separating the variables into a separate request, e.g., for the .js.jsp). Combining the variables with the HTML (either as above, or the second approach in your question) means the HTML has to be served with caching diminished or disabled.

how to pass a variable through .js file

I am trying to pass a variable from page 1, that has a javascript that uses a .js file for the submit button. I want to take that variable and pass through the .js file to a frames page that needs to output that variable again.
Here is the "button" I am trying to pass the variable (located in the .js file)
window.location = SC.baseUrl + '/reservation/' + reservation.token;
The variable I am trying to pass is called $event_name
The variable is being queries from mySql and I am using codeigniter. When the page loads, the query filles in the event name, which I am then trying to pass that variable into another page through this .js script.
Any ideas?
I would highly recommend looking into using browser cookies.
You can't pass variables between 2 separate JS files. What you could do is have functions in both files that return something. For example:
JS File 1
function myFunction1 (arg1) {
return arg1;
}
JS File 2
function myFunction2 () {
return myFunction1 ("foo"); //myFunction1 is in a separate JS file
}
alert(myFunction2()); //Throws alert message that says "foo"
HTML
<!DOCTYPE Html />
<html>
<head>
<title>
</title>
</head>
<body>
<script type="text/javascript" src="theJS2.js"></script>
<script type="text/javascript" src="theJS.js"></script>
</body>
</html>
Both files would have to be loaded into the same page, of course. KIND OF the same concept of using jQuery or some other JS Library with your code.

Javascript include technique with dynamic SRC="url"

Is it possible (and a good idea) to pass dynamic data to a JavaScript include file via a hash url?
Such as:
<head> <script src="scripts.js#x=123&y=456"></script> </head>
I am looking for an alternative to inline js in dynamically built pages:
<head>
<script src="scripts.js#x=123&y=456"></script>
<script>
$( document ).ready(function() {
pageInit(123, 456)
});
</script>
</head>
Is it a good idea to avoid inline js? How can you pass dynamic data without ajax which creates a needless roundtrip network request?
Note: The hash bang url is a special because the browsers ignore the hash portion of the url when checking the cache. At least for html files.
So all of these will reuse the index.html file it is in the cache:
index.html
index.html#x=123
index.html#x=345345
index.html#x=2342&y=35435
This same principle should hold true for javascript files. What I hope to achieve is to reuse the cache version of script.js from page to page.
Going to index.php, include this:
<head> <script src="scripts.js#x=123&y=456"></script> </head>
Then going to fun.php include this
<head> <script src="scripts.js#x=898756465&y=5678665468456"></script> </head>
Then going to see.php include this
<head> <script src="scripts.js#session=887987979&csrf_token=87965468796"></script> </head>
From page view to page view, pass whatever info the page needs via the hash bang while at the same time reuse scirpt.js from cache.
So, is it possible to read the hash bang info from within the scirpts.js?
If the HTML file you are creating is dynamic, then just create inline JavaScript. Writing an include will just create an extra request from the browser, which you can avoid in the first place.
Edit:
just include a JavaScript file that reads the URL, you don't need to pass any variables (but of course, you also could):
$(document).ready(function() {
// pseudo code
hashbang = location.href.substr(location.href.indexOf('#') + 1);
if (hashbang.x && hashbang.y) {
pageInit(hashbang.x, hashbang.y);
} else if (hashbang.csrf_token) {
// do something else
}
});

Categories