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.
Related
I'm creating a game in Django more specifically in oTree with a Django Template Language and JavaScript frontend. When I click a button a value needs to be shown (got that covered) this is done with some JavaScript. But when I refresh/reload the page I need that value to still be displayed and not click the button all over. Does anybody know if there is a workaround for this in either Django or JavaScript?
The state of the show/hidden values must be stored somewhere: either client-side (browser) or server-side. For client-side storing, you can use localStorage, for server-side - session, DB or cache. If you decide to use server-side state - add some more js to buttons onclick event handlers and send state of the button to the server by ajax
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.
This code toggles the color of an element whenever you click on it. But how can I send a GET request with query string ?toggle=True on the first toggle and ?toggle=False on the second one?
Ow, I can see it appearing in Firebug, but not in the url of the page. Any idea why?
Making a request and changing the URI in the address bar are two different things unless you cause the browser to load a completely new page.
If you want to do that, then you should forget about using client side JavaScript and move your logic server side and use a regular link.
In the server side logic, the value of the query string argument would be used to determine the class of the div (which is used to set the style) and the href of the link (i.e. if it has True or False in the query string).
If you want to avoid loading a new page, then you are looking at two separate steps.
The first one you already have (the changing of the style using JS).
The rest gets more complicated…
First you need server side logic so that True/False in the query string will set up the initial state of the page correctly. This will be the same as the logic described for the previous method.
Then you need to update the URI so that it matches the one that would load the page in the state you are altering the current page into. This is done using the History API (pushState and friends). There are more details on the subject on this question.
If you want to notify the server of the change, then you'll need to use jQuery.get, as well as updating the page and changing the URI in the address bar. To be efficient, you should probably add an additional query string argument (so you can tell if it from Ajax from that a normal page load) and have the server return a simple acknowledgement rather than the whole HTML document when it sees that argument.
Just use jQuery's get method to do so or do it yourself in your toggle functions.
A pragmatic yet pretty basic solution may be to use a local variable as a counter.. If the counter is even, send True, if odd, send False.
Increment counter on each click :)
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.
Can anybody tell me how to assign javascript variables to jsp request or to jsp session.
I am doing something like this
Here deletedRows is a hidden field.
var del=45;
document.getElementById("deletedRows").value=del
alert(document.getElementById("deletedRows").value);
<%String del_values = request.getParameter("deletedRows");%>
<%request.getSession().setAttribute("del_rows", del_values);%>
I don't get the value of del in my servlet.
JSP gets compiled on the server. All the client gets is the "output" of the JSP: the HTML, CSS and Javascript.
The Javascript gets executed after this. Meaning everything in the JSP has become HTML et all when the javascript executes. You way want to think this as the Java/JSP part has "completed" and now the HTML/Javascript part takes over.
Now you want to pass on some value calculated/manipulated via Javascript back to the server. (I think this is what you mean when you say "assingn javascript variables to jsp request or to jsp session"
For this you have to submit the page to the server, and these values should be part of the form that is being submitted.
You may already have these values in some HTML elements (like a <input> or <select>), if not you can create hidden elements and populate these with the values before submitting the <form>.
In the code you have provided, you are populating the hidden field correctly, but you have to retrieve the value in the servlet, not in the JSP itself. Also, make sure that the hidden field in in a <form> and that form is submitted.
Once the form is submitted (to a servlet) the values can be retrieved in the servlet via request.getParameter.
There are few other mechanisms to send a value to the server, using a URL parameter or via Asynchronous (AJAX) requests, but I am not sure whether you are looking at these also.
Any form fields, including hidden fields, that are submitted from the browser will be accessible in your JSP using request.getParameter("fieldname");. Query-string parameters may be accessed the same way.
Make sure that your form fields have a name attribute specified because it is that name (not the id attribute) that becomes the parameter name in your server-side code.
What you've already done in the little bit of code shown in your question, i.e., set the hidden form field to have the value of a JavaScript variable, should allow that value to be submitted and then accessed in the server-side code. But it's hard to see why it is not working without seeing at least some of your form HTML, particularly the definition of the hidden field. It would also help to see how that is being submitted. (I'm assuming it is being submitted: if you are trying to make all of that code run just on the server it won't work, because the JavaScript is treated as document content by the server, it isn't executed. Again, I can't really tell how you're using that code without seeing more of the surrounding JSP.)
UPDATE: I see that your code has been formatted since I started typing my answer. You aren't expecting all five lines to run on the server are you? The JavaScript code only runs on the client browser after the page is rendered. The Java code in between <% %> is executed on the server before the page gets to the browser and so can't access JavaScript at all. Anything not in the <% %> tags is simply sent to the browser as is - the servlet doesn't interact with it as such.