JavaScript: how to pass additional information to source page? - javascript

I have a website and when a user follows an internal link I would like to pass some extra information to a new page, so JavaScript on the destination page could do some useful highlighting.
There is an option to pass that information via the link parameters (GET), but it will generate lots of virtually duplicate pages and break pretty URLs concept. Another way is to make a webapp using AJAX, but it will also bound content to a single URL.
How can I transparently pass some information to the new page during navigation w/o messing with site's URL structure?

You could store the data in local storage or session storage, and retrieve it again on the destination page.

So you have a few options.
Form Submission
First option post a form with the data. Add a hidden form, on the anchor click capture the click event, set the hidden fields with the values you want to send to the next page, and submit the form. On the next page, read the post parameters in the backend and update the page.
Local Storage
On click of the anchor, set localStorage to the values you want to appear on the next page. When the next page loads, read the localStorage values and update the page. Note: The server will not have access to the values
Ajax with pushState
Use Ajax to submit the form. When the Ajax call returns, use window.history.pushState to update the url with whatever url you want to be displayed to the user.

One of the options not mentioned is to create a dirty URL:
/destination/param1/value1/...
then strip additional parameters at server-side and redirect:
/destination
keeping additional values stored at server-side (e.g. via sessions). I still prefer using sessionStorage in a real application, but it worth mentioning anyway.

What do you mean it will "bind content to a single url"? AJAX request is the first thing that comes to my mind as the solution to this problem. You dont have to use the url of the page to make the ajax request, you can build the url inside your javascript based on whatever conditions exist in your application.
Besides AJAX and passing parameters in the URL, the only other thing I can think of is to use Cookies. That of course runs into problems if the user has cookies disabled. I think an Ajax call to your server is the most robust way of handling the problem.

Related

Node.js form update with and without ajax

What would be the "best" approach to dealing with forms which have to work without and with JavaScript enabled?
Would it be better to create different routes for each, like
AJAX request: route "API/contact" and return res.send("message")
without JavaScript: route "contact"and return a redirect with a query param of "message"
Or in one route and detect xhr and render it depending on this?
Or is there a better way of dealing with the problem of taking the user to the res.send("") when the JavaScript isn't enabled to give the user feedback on the submit?
To clarify:
I have a site which is working with AJAX requests for its forms to avoid full page loads. It lacks the fallback when JavaScript is not enabled and thus when a user clicks submit on a form, he receives the data from the post back with res.send and it replaces the whole page, instead of the desired effect which would be to just update a label with the "success/fail" message. The question then remains as above which would be the neat way of dealing with this?
Probably the best thing to do would be to check the X-Requested-With header and check that it contains XMLHttpRequest (but this might get deprecated as the new fetch API will slowly come into browser.
Based on that value, you might want to return a JSON payload, or eventually trigger a server side rendering, therefore returning an HTML page ready-to-be-consumed.
As an alternative, you can return a redirect response with a particular query string value; once the page is loaded, you will check for that value (using qs for example, or deparam in jquery and manipulate the client side accordingly.
Your server routes have nothing to do with client-side javascript. You don't need javascript to receive a "res.send" message.

How to use cookie set by JS in PHP

I am setting cookie using JS script on my page, but I need to use this value while generating HTML on server side PHP.
Let me expalain.
User requests page - > Of course PHP starts generating HTML -> User get response from server -> JS sets cookie.
Am I correct ? I understand this in this way.
But I need to use cookie set by JS while PHP generating response.
Of course it will work if reload the page,because new request is sent with cookies. But I need to use this cookies at a time I set it in JS.
Of course I can set in JS to reload page, but I don't think that is good solution.
What are possible solutions. I don't need to adhere to cookies. Maybe there are other possible ways to get data from JS to PHP.
If I understand your question right, there are at least 2 different ways:
load an initial page which purpose is to redirect (via JavaScript or Refresh header) to the main page;
load the entire main page in the first request, containing a placeholder block. Then set the cookie. Then fill the placeholder using AJAX technique (send another request using JS and replace HTML content of placeholer with a newly generated one).
For the 2nd approach you don't even need cookie, as JS can pass the value with a query string (GET request parameter).

How to pass javascript variable/object from one page to another?

I want to pass javascript object/ variable from page to another. so that i can use data for some fields, i want this values to be hidden and not visible while i my passing value from one page to another
I have already seen many examples of pass via http parameters, i dont want that and also session variables manage on server side, cause nothing has to be manage on sever side for that page.
i want to pass value as a hidden field or value to next page. how to pass it to new page when i open new page via
window.location="website/nextpage.jsp";
Also a note, i am beginner, so please sorry if the question seems to vague.
You can:
Use hashes in the url by reading the window.location.hash. Similar to GET requests, but does not need the server for passing. However, the parameters are visible in the url.
Using cookies. Have JS "plant" the cookies on the previous page and read them on the receiving page.
You could use DOM storage as well. Similar routine as cookies, plant and read.
Assuming you do not want to use session variables, cookies or local storage:
You can not "hide" a parameter so that your website user will not be able to see it.
If you submit data via a POST request - you can use hidden form elements.
<form method="post">
<input type="hidden" name="state" value="{YOUR PARAMETER}" />
If you use window.location - you will have to do it with a GET request
window.location="website/nextpage.jsp/param/{YOUR PARAMETER}";
I don't know about JSP specifically, but using a form with POST method hides data from (standard) users.
why dont you use html5's localStorage and sessionStorage for the purpose. for more help visit here

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.

Shall I use javascript for page submission?

I am working on a big site, and in the site there is a search module. Searching is done by using a a lot of user submitted values, so in pagination I must pass all these data to the next page, appending the values to url make the url very big.
Sso how can I solve this issue? I am planning to use a javascript based page submission (POST) with all the values in hidden fields to the next page the read all the values from the next page.
Will it cause any problems? Or should I use database to keep the search criterias?
I would create a server side object, possibly with a database backend which is updated by the different pages.
It is at my opinion the most clear and easy solution. Giving parameters from page to page, either by post or javascript or cookie will work too but it's more of a quirk in my experience.
Also if a search query is so complex that it needs multiple pages to create it, it might be helpfull for the user to have all the data stored on the server so he can change it more easily by switching back and forth between the different pages.
I would store all the search criterias in some kind of session-store on the server when the initial search is being triggered.
For pagination I would retrieve the criterias from the session-store and then just show the appropriate results. Also I would append some kind of key to the pagination links (so this would be the only hidden post-field) under which the search criterieas can be found.
Even though the session is per user, you might have several search windows open within the same session, and you don't want to mess them up with the pagination.
In order to make a reliable search with pagination, we need to do a bit more than normal.
We need to handle the following cases.
Once search is done, user may choose to do browser back and forward. Here, if you are doing form submission on every page, it would be an overload. Also, if user presses browser refresh button, it will unnecessarily warn him that data is being submitted.
Searching on a large database with lots of criteria is costly. Hence, optimization is important.
So you should NOT do the following:
Submit data on every page change
Not store data in cookie. (This is not secure and not even reliable.)
For large database with complex query, cache the result in session.
In case, you need very up-to-date and real-time result, ignore point (3) and try doing partial search for every page.
Thus, for your case, you can do the following:
When user searches first time, make the form POST data to a search page.
This search page will store the search query in session and generate a unique id for it.
Now render the result page. The result page will be passed the search id (generated in point 2) and the page number. Example result.aspx?searchId=5372947645&page=2
The result page will puck up the query from session using the searchId and then provide result based on the page number sent.
Using hidden fields and POST method should be fine too unless you are able to get them on the next page right.
To supplement Sarfraz's answer...
It's not necessary to use Javascript to make a POST.
<form action="destination_url" method="POST">
...
</form>

Categories