I am calling a servlet with params
window.location.href = "/csm/csminfo.jsp?CFG_ID="+cfgid+"&path="+path;
In the other csminfo on body load i am calling a function to retrieve these params
<body onload="getConfigDetails(<%= request.getParameter("CFG_ID") %>,<%= request.getParameter("path") %>)">
JS
function getConfigDetails(cfgid,path)
{
alert(cfgid+","+path);
}
But no alert gets popped up, what is the problem here?
I am using firefox, using error console i got this error
You didn't quote the strings properly:
<body onload="getConfigDetails('<%= request.getParameter("CFG_ID") %>','<%= request.getParameter("path") %>')">
Some other issues:
When building the URL on the original page, you should make sure the parameter values are properly encoded by using the JavaScript built-in "encodeURIComponent()" function.
JSP scriptlets are an old, ugly way of doing things, and really have no place in new code. You should look for resources to learn about JSTL:
<body onload="getConfigDetails('${param.CFG_ID}','${param.path}')">
Whether you use JSTL or scriptlets, values you pull from the HTTP parameters and inject into your page source should be run through an HTML escape mechanism. In JSTL, that'd look like this:
<body onload="getConfigDetails('${fn:escapeXml(param.CFG_ID)}','${fn:escapeXml(param.path)}')">
Related
I'm trying to create a "Back" button as a function or directive. Upon clicking it, it would call a function that has several things to do before redirecting the user to a url.
Normally, in pure JS, I would have a simple div with an onclick function to which I would pass the URL to go to then the function would do its thing then make a window.location.href = url and it would be ok.
Here in angular, the URL i'm trying to send is part hardcoded, part coming from a ng-model: url="#/clients/editer/{{client._id}}"
When trying to use a simple function to which I would pass this as a string, my function doesent get the client.id as a string though the HTML inspector of firefox says it does. But if I console.log the URL the function gets, it says
"#/clients/editer/{{client._id}}" instead of "#/clients/editer/56684b4fe7b59ff020b85590"
When trying to use a directive instead of a function, as being new to all this, I dont understant how I'm supposed to pass thir URL to the directive. Since the URL could change radically from a module to another (from "#/clients/editer/{{client._id}}" to "#/materiel/editer/{{materiel._id}}", I need to pass the decoded URL directly to the directive which would then execute the onclick function.
Hope someone can help me !
I made simple test code
js
scope.client._id = 9;
scope.somefunction = function (url){
console.log(url)
}
Html
<div ng-click="somefunction('#/clients/editer/{{client._id}}')">link</div>
Result: #/clients/editer/{{client._id}}
<div ng-click="somefunction('#/clients/editer/'+ client._id)">link</div>
Result: #/clients/editer/9
Is this the result you wanted to achieve?
I understand that this a bit odd of a question but here I go. I am writing an application that will be switching environments (dev, test, prod, etc). I need the base URL for my REST calls to change as I switch environments. Well, our current solution (and I am all ears for better solutions) is a local REST call asking the server what environment I am in and what URL I should be using for my base. The external REST calls are separated from the front end completely.
With the local REST call I could do an ajax call to get the data somewhere in my javascript or I could include the REST call as follows:
<script src="/rest/configs"></script>
The problem with the above solution is that it returns an object that is not assigned to a variable thus throwing errors. So my over all question is, Can you load a REST call through a script tag straight into a variable and if so, how?
If you do this with a script tag the response of the request ( not AJAX at all ) will be parsed and executed as javascript.
What you could do is to return valid Javascript, rather than JSON object. Something like
window.config = {"env":"test"};
rather than
{"env":"test"}
Other option is not to do this with script tag and just write inline javascript with an ajax call. If you use jQuery it would look like :
<script>$.get("/rest/configs", function(config) { window.config = config; });</script>
This will do the Ajax call and assign it to a global variable config. Of course you should make some adjustments and execute the rest of your javascript after this is executed.
Anyway as a standard, this value is usually hard-coded in the scripts. I would suggest to create a script that is modified for test/dev/production environments.
Can't your rest call just return a Javascript object, like so:
var env = "experimental";
Your webpage should be able to interpret this as Javascript and the env variable should be usable in the rest of your page:
<html>
<head>
<script type="text/javascript" src="/rest/configs"></script>
<script type="text/javascript">
console.log("env: " + env); // prints env: experimental
</script>
</head>
<body></body>
</html>
There is a similar post Retrieving HTTP status code from loaded iframe with Javascript but the solution requires the server-side to return javascript calling a function within the iframe. Instead, I would simply like to check the HTTP status code of the iframe without having to call a function within the iframe itself since my app either returns the full site through HTML or the single object as JSON. Essentially I've been trying to implement a callback method which returns success|failure dependent upon the HTTP status code.
Currently I have uploadFrame.onLoad = function() { ... so far pretty empty ... } and I am unsure what to check for when looking for HTTP status codes. Up until now, I've mainly relied upon jQuery's $.ajax() to handle success|failure but would like to further understand the mechanics behind XHR calls and iframe use. Thanks ahead of time.
UPDATE
The solution I came up with using jQuery
form.submit(function() {
uploadFrame.load(function() {
//using eval because the return data is JSON
eval( '(' + uploadFrame[0].contentDocument.body.children[0].innerHTML + ')' );
//code goes here
});
});
I think the best solution is injecting <script> tag into your iframe <head> and insert your "detecting" javascript code there.
something like this:
$('#iframeHolderDivId').html($.get('myPage.php'));
$('#iframeHolderDivId iframe head').delay(1000).append($('<script/>').text('your js function to detect load status'));
Maybe it's not the best solution but I think it works
I'm trying to make a variable (eventually to be replaced by more complex json selected from the database) accessible to client-side javascript. I wanted to load it when the page is rendered instead of an ajax call and its not going to be rendered via a template like ejs (I want to pass the data to an extjs store for a combobox). So I have a standart response I render:
function (req, res) {
res.render('index.html', {foo: ['a','b']});
}
and a blank html page I want to access foo:
<!DOCTYPE html>
<html>
<head>
<script type=text/javascript>
console.log(foo);
</script>
</head>
<body>
</body>
</html>
any ideas? I've thought of maybe writing the whole html page via res.send() (which has a few more things than the example above) but that seems like such a workaround for something that should be obvious to do...
Assuming the same array foo in your question above, here are a couple ways you could do this.
This one uses an EJS filter to write an array literal:
<script type="text/javascript">
var foo = ['<%=: foo | join:"', '" %>'];
</script>
This one encodes it as JSON, to later be parsed by your client-side javascript:
<script type="text/javascript">
// note the "-" instead of "=" on the opening tag; it avoids escaping HTML entities
var fooJSON = '<%-JSON.stringify(foo)%>';
</script>
IIRC, ExtJS can handle JSON directly as its data. If not, then you could use its JSON parser first and then hand it a local variable. If you weren't using ExtJS, you could use this to parse on the client: https://github.com/douglascrockford/JSON-js
If you choose to encode it as JSON, it would make it also make it easier to later switch back to AJAX for retrieving your data. In some cases, that would have an advantage. The page could load and display some data, along with a busy icon over the element for which you're loading data.
This isn't to say there's anything inherently wrong with including all the data in the original request. It's just that sticking with JSON gives you the flexibility to choose later.
In EJS the following should work
<script type=text/javascript>
console.log( <%= foo %>);
</script>
I do recommend against dynamically generating JavaScript though as it breaks seperation of concerns and forces JavaScript to be on.
Edit:
Turns out the above doesn't work nicely for arrays. So simply encode your data in semantic HTML. Then enhance it with JavaScript. If the JavaScript must get data then store it somewhere more sensible like the cookie or retrieve it through ajax.
If I need to call some action method of a controller from within javascript code I can call it just passing the href, right? Something like that:
$.colorbox({ href: '/Calendar/SessionPropertiesEditbox?starts='+start+' })
That's not gonna work. The problem is the exact link should include the domain name also.
But you don't know what the domain name would be. It could be "http://localhost:7741" today, tomorrow could be absolutely different.
So how to emulate ActionLink behavior in javascript code?
You are incorrect; that will work.
It's a domain-relative path, so the browser will automatically add the current domain.
If your application is not running in the domain root, it will not work, since it will look in the domain root.
If so, you'll need to call Url.Action and pass its result to your Javascript.
In a Razor view, that would look like
<script>
var url = "#Server.JavaScriptStringEncode(Url.Action(...))";
</script>
Try to use JsAction
http://jsaction.codeplex.com