Please help im scratching my head here and what I want to do might not even be possible.
Here are the list of items in my project:
[1] - DHTML webpage
[2] - Locally running VBScript
[3] - Locally running application containing source data
Requirement : [2] needs to look at [3], retreive data and post the data to [1].
In [1] I already have a javascript function called InsNewRow(Col1,Col2) which populates a Dynamic table with static data without any issues (this is currently trigged from a Dummy Button OnClick method within [1].)
What I need to do is call the InsNewRow(Col1,Col2) javascript function from [2] and populate the parameters with data sourced from [3] thus dynamically updating the table in [1] with data from [3]
Use VBScript to get the data, then pass it to JavaScript using global variables. JavaScript has access to the VBScript global scope, so it can call the function itself with the dynamic data, which saves time compared to rewriting the function in VBScript or troubleshooting calling the JavaScript function from VBScript:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
<script type="text/vbscript">
Dim jscol1
Dim jscol2
function InsNewRow(col1,col2)
jscol1 = col1
jscol2 = col2
InsNewRow = true
end function
call InsNewRow(1,2)
</script>
<script type="text/javascript">
function InsNewRow(col1,col2)
{
alert([col1,col2]);
}
InsNewRow(jscol1,jscol2);
</script>
</body>
</html>
Related
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
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.
I have tried out a scenario which I'm confused of. This is may be javascript 101, but I'm missing a point here.
Assume you have JS library which has a global variable defined. Also it has two functions called setData and retunData .I have separate html with a script within it's Head tag. This HTML file imports above library.
Now on the html I have a text field with two buttons.Buttons are send data and view data. The flow is, user type something and click send Data button. On its onClick I'm getting the text value and pass it to above JS library setData function which sets data to global variable. When i click the view data , on it's onClick it will call the returnData functio of JS Library and I'm alerting the value.
My question is, if I run my html on two browsers , and from one browser if i set the value "ONE" , on the same browser when i retrieves it says "ONE". On the second browser if returned the value it should be "ONE" because that variable is global and value is already set by first browser.
But it works as two requests. it won't override the global variable value. I know it should be the ideal case. But WHY? That's a global variable right? I hope my question is clear.
on the jsLibrary i have this.
var checkVal;
function setData(val){
checkVal = val;
}
function viewData(){
return checkVal;
}
My html is this.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/jsLibrary.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<title></title>
<script type="application/javascript">
function sendData(){
var val = $("#idTextVal").val();
setData(val);
}
function viewData(){
alert(returnData());
}
</script>
</head>
<body>
<input type="text" id="idTextVal">
<input type="button" id="idConnect" onclick="sendData()" value="SEND">
<input type="button" id="idChecj" onclick="viewData()" value="VIEW">
</body>
</html>
WHY? That's a global variable right?
It is global, but for this particular tab/page instance. If you open that same page in other tab, javascript engine will initialize all variables, because it doesn't know that you have other tab.
In your case you have multiple options. Perhaps, the most straightforward is to use serverside storage to preserve state. Or you can use simple cookies/localStorage approach, they are also shared by all pages on the same origin. I would go with WebStorage as simpler:
function setData(val) {
localStorage.checkVal = val;
}
function viewData() {
return localStorage.checkVal;
}
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.
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.