0

I am using Node JS and Express.

Currently, in the server-side, i pass a certain variable (sources) to my EJS template, and use part of it to fill a list on the page.

When the user clicks an item of that list, I need to get hold of another part of this variable.

I know I could just AJAX the server for the variable again (sources), and solve my problem. But that seems unnecessary, since I already had the variable when the template was generating the HTML.

What is the usual approach to this? People use AJAX and fetch the variable, or is there some nice way to already store it in the page when the server is building it?

A "hack" would be to create a hidden element and store the value in it...

3 Answers 3

1

One way of doing this is to inject the data server-side in your EJS as a JavaScript variable

<script>var x = <%server data%></script> 

and then you can fetch it client side without making an extra HTTP request. Slightly cleaner than the hack that you mention.

Sign up to request clarification or add additional context in comments.

Comments

1

There are several factors which weigh in on whether or not to use AJAX vs hiding the element.

The advantages of using AJAX are that you can load the template of your page, and all the static content letting the browser render the page before the dynamic content is retrieved by the client. This gives an advantage if you need to load content from a database, or calculate an output. Basically the advantage is if you're loading something big, or something that may take a bit to retrieve, you should use AJAX after the page is loaded to allow the user to wait less to see results. Another advantage is that you can display results in realtime, and you can give progress reports to the client(ex. progress bar), or you can load search results in realtime as they are loaded from a source(db,google,facebook,etc).

The advantage of using hidden elements is that you'll take up less HTTP requests/responses to load a single page. If you just need to load a users name, or short biography and some links, you should load this with the template. But if you need to load results of all the users latest blog posts you should use AJAX for this. Using hidden elements is easier to implement, but alone cannot update in realtime. Also, a side note, this isn't "hackish" whatsoever. jQuery is does this for many things, like animating between elements, or jQuery-UI tabs which just hide inactive tabs. This is basically the intended purpose for hidden elements.

The question shouldn't be which to use, but when to use either of the technologies for each specific intended purpose. Consider these pros and cons, and you should be on the right path. When you don't need AJAX, you probably shouldn't. It can become wasteful if overused.

1 Comment

Ask yourself this. Does your variable change, and does the user need to know if it does in realtime? Does the variable take a while to load or send to client? If yes, then consider AJAX.
0

Probably you need this - use local variables for response, that is used for rendering http://expressjs.com/api.html#res.locals

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.