We Keep Coding

How to refresh a page once it's opened from a previous link?

I have a table with live data in it (meaning it is stored on the server and people who has access can view the data in their machine as well). I have a Create data page and View data page that contains the table. Once I have finished creating a new data and click a link going to the View page. The data should be there already.
I have tried the location.load() internal script in the View.html page that is triggered by the attribute onLoad="" but it's not working. However, when I create a button that has a function to refresh, it does work but I want it to be an auto refresh.

To make it easy and simple, use location.reload(). You can also use location.reload(true) if you want to grab something from the server.

You can simply use an jQuery Ajax call to make call to your backend API and fetch data, which you can add to your html table. This process you can handle in page/document ready or load events. I don't think you need to reload the page just to achieve this.
If you are working with AngularJs SPA (mentioning this as you added the tag), these two HTMLs/Pages can be rendered into the same layout based on the route and follow the above mentioned approach (using $http.get of Angular) to get view data and bind it to the respective view. As it is SPA, no concept of page reload.

How to work request.render in node js

I am using GET and POST methods for getting data from the server and getting response using request.send(object);.
However my requirements changed, I need to use request.render('pageName',object); but the render method refreshes my page but I only want to refresh a particular <div> section. I read on this link https://www.npmjs.com/package/ejs but I am not able to refresh only particular section without refreshing the entire page.

If you want to redraw only a part of the page then you probably need some kind of client-side rendering for your templates. You fetch the data from the server using GET just like you mentioned and then do the actual drawing of the page on the client instead of sending HTML with request.render.

How to get data from form using JS, when the form has been returned from AJAX itself?

Here we have a <div id="content"> and inside it AJAX loads data from the server. We have preloaded JS scripts in the whole file.
Some of the server's AJAX answers are whole forms. That forms have the same ids, but different structures. What is needed is to pick the data from freshly baked forms came from the server via AJAX, using JavaScript and create a kinda queryString to send its data again to the server via AJAX itself.
What has been tried:
I put a code which is getting data from the form on the page using JS. It works great when the form is a static part of the page and i loaded within the initial DOM loading, but, after AJAX re-loading the real DOM is differ than that in the cache, which has been initially loaded with the page.
I tried to put JS code into the answer from the server with the form. But, it does not work as well. Even simple alert('Hello!') does not work.
I am new in AJAX so, please, do not judge me with all the severity.
Thanks!

If your issue is picking up only the latest baked forms, you can try the following approach:-
In each ajax call of the page, before setting the response content to the desired div, find all objects having class name called 'lastUpdated' (or any other unique class name that you can come up with) and remove all the lastUpdated class associations using the jQuery code
$('.lastUpdated').removeClass("lastUpdated");
Now set the response to the desired div and add the class 'lastUpdated' to this div alone.
Thus at any point of time,
$('.lastUpdated')
will help you pick the data from freshly baked forms came from the server

Javascript: Change the ID of a div element and save the value

I have this code:
<img src="{$img_dir}/product_grid_view.png" class="pgrid" title="Grid View" onclick="document.getElementById('product_list').id = 'product_grid'; return false"></img>
<img src="{$img_dir}/product_list_view.png" class="plist" title="List View" onclick="document.getElementById('product_grid').id = 'product_list'; return false"></img>
The following code works well and does its job but the main problem is that it doesn't keep the new value saved after I refresh the page and keeps reverting to default value product_list which is mentioned in a .tpl file as the following statement: <div id=product_list" class="clearfix">.
Any suggestions on this matter would be greatly appreciated!

If you want data to persist between page refreshes, then you have to store it somewhere persistent.
That could be somewhere that is accessible client side (e.g. in a cookie) and then reapplying the changes based on the data there when the page reloaded.
Alternatively, you could use Ajax to inform the server of the change and have the server store the data somewhere (such as in a database) and generate different based on that data when the page is requested.
(The id, however, is a terrible thing to change dynamically).

Short answer: Not possible (at least, not as in your example).
Javascript is client side and when you refresh the page will be created server side.
If you really want this you should save the value server-side (by using AJAX) and use this value when the page is reloaded. But I really don't think you want to be doing that just to swap id's (which is strange in the first place).

What you are doing happens only on client side. It does not change your .tpl file. In order to get it updated you should send information on server, for instance with ajax, and save new id into database using PHP (as I understand, that is server side language you are using) and populate it in your .tpl file next time page is loaded.
At the same time - not clear why do you need to change an ID of an element that way. Looks like you are doing something wrong.

Value of hidden field is lost after loading the page in html

I want a scenario in which I will set some value of a hidden field in a particular page.
Then that page is submitted on server (form submit). Now, i redirect on another page and there I again try to retrieve the value which I set previously. But I am not getting there the value which was set, instead i get the default value which I provided in html page itself. (Hidden field is in header page which is common for all the pages in my web app).
i tried a dummy application in which i am getting the value of hidden field even after loading/refreshing the page once i set it.

When you redirected your user to another page, it became reloaded. Unless you chose to set a value to your form (by javascript for instance), the value of the form is the default one.
The value you "set previously" wasn't definitely associated to the input because everytime you reload the page, your server will generate again the HTML and the default values and your browser will display this HTML.
This behavior is normal.
Besides, if you want to keep the values of the form while submitting it, you can use AJAX submitting.

The other answers here are factually correct (that HTML doesn't normally do what you're asking it to do), but there are a few things you can do to make it work.
First, how things usually work: In order for the second page to get the proper value of the hidden field, you would process it in the server-side component. It sounds like you are redirecting to a new page in the server-side handler. The best way to make this work is to have that server-side handler process the value and attach it to the redirect as a parameter (likely attached to the querystring). Then have some server-side code generate the second page, which would process the querystring parameter.
Here's the work-around for pure-HTML/javascript implementation:
If you can't or won't have a server-side process to generate the second page, you could pull it out of the querystring using Javascript (just search for 'getting querystring variables in javascript').
If you use javascript, it could be feasible (though probably not advisable) to have the first form go directly to the second page by setting it as the form's action with a method of 'GET'. It's definitely better to include a server-side handler though.

What your trying to do is impossible through regular HTML since HTML is stateless. What you want is to put your values in a session or in a cookie and this way you can plant it on every page that is loaded.This cannot be done by default.

You're mis-understanding how HTTP works - it is stateless.
This means that every single page you request is completely separate to previous pages. Which is the reason your hidden textbox is being set back to default.
You have to explicitly set the value server side prior to it being sent to the client.