I have the following function in my Node.js code that renders an HTML page and passes it an javascript object called htmlParamObj
exports.getPage = function (req, res, next) {
var htmlParamObj= {
propertyOne: 'yada',
propertyTwo: 'yada yada'
};
res.render('myPage.html',htmlParamObj);
};
I can access the incoming parameter (htmlParamObj) with EJS like so: <% propertyOne %>, but I don't know how to access htmlParamObj via the document itself. I believe htmlParamOb' will be attached to the document of the html - but what field in the document can I find it in? Is it in the head, the body, the childNodes? Where?
The object passed is only used while rendering the HTML, and will not be passed to the browser in any way.
If you need that data inside the page you need to put it there.
The solution I've used when I need to pass complex data to a client side script is to place a script tag near the top of my HTML EJS file and populate that with my data. For example I might add the following to my template:
<script>
window.MY_DATA = <%= JSON.stringify(myData) %>
</script>
Notice that since JSON is a subset of javascript, I can use JSON.stringify to serialize my data into a form suitable for placement inside a script tag, and assign it to whatever variable I want.
The limitation here is that you can't send any data that can't be serialized with JSON.stringify. Not a heavy burden, but could trip you up if you want to send a function or other object.
The solution I found is to define a global attribute in my HTML like so:
<a name="team" value="<%=team._id%>"></a>
then I can access it in any script like so:
<script>
var team = document.getElementsByName('team');
</script>
This will return the correct object.
However, I don't think this is the best answer, especially given that any globally defined variable is usually a bad idea. I am hoping another answer is given to this question.
Related
I have seen websites that have url parameters in the form of example.org/#Parameter, instead of example.org/?parameter=123. I am not talking about a url that scrolls the page to the id of an element, but rather in express.js, extract the value that comes after the # in the url. how can I do this?
You can use the global variable window.location.hash for get the value of hash variable of some URL.
Additionally you can catch hash value changes using the bellow jquery function:
$(window).on('hashchange', function() {
//some code
});
EDIT:
As far as a know, the window.location.hash is never sent to server/middleware, so it's not possible to obtain this parameters on express.
You should use the query strings parameter (example.org?parameter=123) instead.
I'm developing a ASP.NET Core web application where I'm using DataAnnotations to decorate my view model with validation attributes. When I open a detail page with my inputs, I see that Core added the HTML5 validation attributes to the rendered HTML (i.e. data-val="true").
However, I wrote custom client-side code when the user clicks on the Save button like this:
$(document).on("click", "#SaveAsset", function (event) {
event.preventDefault();
Asset.Save();
});
I also have a Save function defined like this:
window.Asset.Save = function () {
var postData = {
'Id': $("#Id").val(),
'SerialNumber': $("#SerialNumber").val(),
'PartNumber': $("#PartNumber").val(),
'assetTypeId': $("#AssetTypeId").val()
};
$.post('/Asset/SaveAsset', postData);
}
I need to validate on the client side first before calling $.post but I'm confused about how to do it. Microsoft shows that the unobtrusive javascript works automatically when you use it with forms. But I'm not using the HTML form element to submit my page. So how can I trigger the HTML5 validation attributes?
I added the links to jquery.validate.js and jquery.validate.unobtrusive.js. Right now, if I click the Save button the data is sent to the server and the controller checks the ModelState. But it shouldn't even be sending anything to the server. The client should stop the validation.
Should I even stop doing it this way? For example, creating my postData JSON object by getting the val() of each input.
Should I use the form element? I stopped using it because my page has hundreds of inputs so I was worried I would have problems. This way, I have control over each input.
Use a javascript solution like jQuery Validation Plugin to validate data before sending to the server. Otherwise, send the data to the server, and return a the errors with a bad request if validation fails.
Eg.
Return BadRequest(string[]{"Name is required", "Id must me a number"});
then capture the errors and shoe to the user
I have several pages that are arrived on with valid GET data, such as http://website.com/?id=12345
I have a generic HTML form that is pulled onto many different pages using php's "require" and submits using POST. Regardless of which page this form is located on, it should always submit back to that same page. However, after the form is submitted, I would like the ?id=12345 to be stripped out.
So, for example, if the user is on http://website.com/new.php?id=12345, it should post back to http://website.com/new.php. If the user is on http://website.com/old.php?id=12345, that same form it should post back to old.php
Previously the best solution I found was to style the form as such:
<form action="?" method="POST">
Which will change all links to http://website.com/new.php? or http://website.com/old.php? which is very close, but not perfect.
As it turns out, I finally found the solution to my problem by using JavaScript:
url = location.href;
qindex = url.indexOf("?");
This can pull whatever is on the address bar as a string and find the index of the first ? mark. From there:
if(qindex != -1)
tells me that there is a ? mark
var plainUrl = url.substring(0, qindex);
Can get, as a string, everything up to the ? mark, but not after. Finally:
window.location.replace(plainUrl);
Will rewrite the address bar to the plain URL, not including the ? or whatever comes after, and without redirecting the browser.
Since your page will not undergo any server-side processing, you can achieve what you want via a combination of the following two tricks.
First, change your particular querystring to a hash, which is thereafter directly editable without triggering a page reload:
http://yourdomain.com/page.html#search=value
Then modify such a script as this to do what you want to do, according to the query string passed in.
<script type='text/javascript'>
// grab the raw "querystring"
var query = document.location.hash.substring(1);
// immediately change the hash
document.location.hash = '';
// parse it in some reasonable manner ...
var params = {};
var parts = query.split(/&/);
for (var i in parts) {
var t = part[i].split(/=/);
params[decodeURIComponent(t[0])] = decodeURIComponent(t[1]);
}
// and do whatever you need to with the parsed params
doSearch(params.search);
</script>
now you can delete the query string suffix in the following way:
As detailed elsewhere, namely hide variables passed in URL, it's possible to use JavaScript's History API in modern browsers.
history.replaceState({}, null, "/index.html");
That will cause your URL to appear as /index.html without reloading the page
This little gem is explained in more detail here:
https://developer.mozilla.org/en-US/docs/Web/API/History_API
I have a jade file called syntax.jade. What I need is a way to convert syntax.jade, along with the information I would normally pass it with a res.render statement, into a html document in node so that I can manipulate it in that form. Basically what I want is this:
when I use
res.render('syntax', {comment: comment}, function(err, html))
html contains the html of the page as a string. I need another way to get that code that doesn't require me to render the page in the browser.
The reason I want to do this is so that I can include the resulting HTML code in another res.render statement in order to provide formatting instead of doing all the formatting in the front end.
You can just require Jade as a Node module and use the renderFile() method.
var jade = require('jade');
jade.renderFile('syntax.jade', {comment: comment}), function (err, html) {
if (err) throw err;
// rendered string is in html variable
});
If there's no error, then you have a rendered HTML string as a result. If you want to do this synchronously, then just don't specify a callback:
var html = jade.renderFile('filename.jade', {comment: comment});
That is already what you have. From the express docs on res.render
When a callback is provided both the possible error and rendered
string are passed, and no automated response is performed.
So res.render(viewName, locals) does BOTH rendering of the HTML and sending that HTML as the HTTP response body. However res.render(viewName, locals, callback) with 3 arguments just renders the HTML and passes it to the callback without sending any HTTP response. Thus you can do whatever is needed with the HTML and then send a response later.
There is also app.render which is another general utility to render stuff without having anything to do with a particular http request/response.
So I am planning on dynamically changing a page's content by fetching it from another page.
To do so, I used Mootools' Request class:
var tabContent = new Request({
url: 'foo/bar/baz.php',
onSuccess: function(data) {
$('tab_container').innerHTML = data;
}
}).send();
In any case, the HTML is fetched fine, and returns without a hitch. However, I'd like to add some events to THOSE fetched elements (Fx.slide, to be precise), and that requires some js to be included in the requested file.
Upon inspection of the returned data, the javascript is intact. However, it does not show up in the final product. That is, somewhere in between having received the data, and rendering the data (via the innerHTML bit) it seems as though the javascript has been excised out for some reason.
Hm.
add evalScripts: true to the Request options, then include the script in a simple <script></script> block at the bottom of the response.