Simple question here, I've got a button with JavaScript that changes from ON to OFF changing it's class attribute.
So, the default value is OFF, and when you click it, swaps to ON. The problem is that everytime you navigate through the website's pages it always displays as OFF from default even if you selected ON previously.
Is it anyway with JavaScript or jQuery to remain the option selected from the previous page? I'm using class attribute to change the element from ON to OFF
Thanks in advance for your help!
There are two ways that comes to my mind where you can get the value from the previous page. In each case the previous page would need to store the data (option value) somewhere and the next page would need to load this data from there.
SERVER-SIDE Solution (Permanent Solution)
When user selects the option on the previous page, the page should then send the data to the server via AJAX, or using the <form> element. Server can then store the option into the database, file or session storage...
When you load the next page from the server, this page can be set to already include the data on loading or fetch it dynamically via AJAX.
CLIENT-SIDE Solution (Data persistency not guaranteed)
When user selects the option on the previous page, the page should then save the data to the local storage of the browser. This means if user clears the data in the browser, it will be lost forever.
When you load the next page from the server, just fetch the option from the local storage. It's easy...
http://www.w3schools.com/html/html5_webstorage.asp
Furthermore:
The data can be stored in cookies. Similar to local storage but will be sent to server with each HTTP request. This would be overhead if you don't need this data on the server. Use local storage instead.
The data can be passed in the URL. Only if you want the user to be able to change this data.
Related
So I have a NodeJS site and on the home page is a form containing some radio buttons. When the user clicks "Submit," I would like for the user to be redirected to another page based on the answer. This I have figured out (The buttons have an onclick attribute that changes the action attribute of the form element). However, I need to keep the data from the original form, so that after the user has "chosen their path," I know what path the took and the answers they made along it. Thank you in advance!
You could persist the client's state in a session. If you're using express, one alternative could be express-session. The way it works is that it assigns a unique identifier to the user in the form of a cookie and saves the data somewhere (memory, database, a file, etc. depending on which you choose). Then when the client makes another request, the server gets that data back with the identifier from the cookie.
I need to send form data to another page that will allow the user to do something in a form and return the result of that form back to the original page? Is this possible? I know it's not ideal, but the issue is that I need to make a "drop-in" solution that does not need to be integrated with other code. I know it's a very specific request and scenario.
I know how to send POST data that doesn't require any user input on the processing page. i.e. I can send POST data to 'calculate.php' which will do the math and send it back, but if I need additional user input on 'calculate.php', how can I still send it back?
An example of expected results would be:
Page #1: User enters a number and presses submit to go to next page.
Page #2: User enters a second number and presses submit to finish.
Back to Page #1: User receives sum of both numbers.
Obviously, this is a really redundant thing to do, but I'm trying to simplify the problem as much as possible.
EDIT: There a few restrictions I forgot to add.
Page #1 is not my application, I am developing Page #2 as a "drop-in" solution for Page #1. Essentially, I can only use Page #1 to call Page #2 and receive a response from it. The problem is that I need to be able to allow for user input on Page #2.
I know I can post to Page #2 and then post to Page #1 again, but what if I need to maintain the state of Page #1. For example, if there's an open Web Socket connection.
Please note, I understand that this may be impossible or extremely difficult, but if I don't ask I'll never know right?
You want it with PHP or any other language. If you are running Php on server side then you can use Global variables like $_GET and $_POST.
Page #1: Use Post/Get method to send data to second page.
Page #2: Receive all fields' values using Globe variables ($_GET and $_POST). You can use these values as default values of form fields. Now submit this data to page 1 using post or get method.
Back to Page #1: Here you will receive the data of first page from second page and newly posted data from page 2
Either of these should work:
Never leave the page - use AJAX / XMLHttpRequest to call out to other pages to process chunks of data
Do everything on page 1 using "postbacks" -- the form targets are the same page, there is a state variable like "stage=1", and you use JavaScript to add set hidden variables for any additional state that's needed.
... PHP state validation and processing for the different stages ...
... one or more blocks of HTML for the page (PHP if / else can be used to choose between multiple page views) ...
Edit for added restrictions:
Have page 2 use postbacks or AJAX to collect the additional information
I figured out a few ways to do it.
Update a Database (or Data Store of some sort, depends on security needs) and have Page #1 listen for events from a separate page (on the same server as the database). Very similar to the way PayPal's Instant Payment Notification (IPN) works. I was actually able to set up server sent events with it as well.
Essentially, Page #1 sends data to Page #2 where the user will perform the function and then Page #2 will send POST data to a listener somewhere (either on the same server or Page #1's server), the listener will update a database and Page #1 will be listening or pulling to an event handler that will send an update once the database updates.
Use JavaScript Child/Parent Window functions. This is okay if Page #1 and Page #2 are on the same server, but can get messy and browsers have a lot of restrictions and it varies depending on browser.
Page #1 will open Page #2 in a child window, after the user performs a function, Page #2 will call a function that accepts the result data on Page #1.
On page load, say for a particular route for (e.g. https://localhost:8000/home/index), a service is called and the response from the service is rendered to the page at the client side.
On the same page, I have a link that pops up a Backbone.js modal and from the modal a click event triggers which hits another url (e.g. https://localhost:8000/home/index2) upon which another service call triggers and the response is rendered to another html page.
On the same html page, I want to display a value which I got from the first service call on page load. However, I am unable to retain that value as there are two different requests each time. Hence, I cannot even append the value from first response to the request object and use it a second time.
You can use JavaScripts Web Storage API to storage information on client browser.
MDN Web Storage API
For example, If you are on the first screen and call a service, store the service information on localStorage
localStorage.setItem('firstService', serviceResponseObject);
Once you are navigated to second page, you can use localStorage to read to previous service information
localStorage.getItem('firstService');
There are multiple ways to store state between requests.
From the server, if you're using say Express etc, you could store the result in a Session. Or you can even store state in the requests query params, or from a POST request.
You could also store some data on the client end, using say Cookies or localstorage.
What you choose really depends, it might be best if you explain in more detail what sort of information your passing between pages.
If it's just a simple value, I would go for using query params.
eg. Just place in your url https://localhost:8000/home/index2?value=123, and then from node.js, req.query.value would have your value.
I want to save modifications made on a HTML page(modifications made with JQuery), PERMANENTLY! I have read that this thing gets possible by sending an Ajax call and saving it in a table in a database, but what do you actually save in the database? The URL of the page? And what do you retrieve back in the Ajax call so that your modifications actually stay on the page?
This is a Spring MVC based web application, in case this information is needed.
I have no clue how to start or if to start trying saving it, because I have also read that this thing might not be possible, as we're talking about Client-Side modifications.
Modification that I am trying to make:
function versionOne() {
$('#title').addClass('text-center');
$('#title').css({"margin-top":"0px","color":"black", "font-size":"45px"});
$('#title').append('<hr>');
$('#content').addClass('col-md-6');
$('#content').css({"margin-top":"80px","font-size":"20px", "text-align":"center"});
$('#picture').addClass('col-md-6');
$('#picture').css({"border-radius":"25px", "margin-top":"50px"});
}
I'd be grateful for some suggestions!
Thanks :)
Saving the whole page won't work in most cases since it's very hard to also save the JavaScript state. So while you can save a static copy of the page without JavaScript with $('html').html(), that doesn't get you very far (or causes more trouble than it's worth).
What you want is "preferences". The site should remember some specific values. The usual approach is to load the preferences from the database before the server sends the page for the client. Apply them to the elements of the page and send the result to the browser. That way, the page looks as expected when the user sees it.
When the user changes these settings, use JavaScript to update the page and send the changes as AJAX requests to the server to persist them in the database.
When the user returns to the page, the code above will make sure that the page now looks as before.
I have a static page (by static, I mean html, css and javascript are fixed on the page).
On the server side, I can tell (based on server-side session info) whether this is the first loading of the page or not by a particular user. Now, based on this detail, I want to signal the front end (e.g. by setting something in the response header, maybe?), so that a javascript function on the page can perform some action based on whether this is the first time the user has landed on this page.
The server that actually serves the page is Nginx, and the server that handles the logic, session, etc is Tornado. So presumably I need to do something in tornado, and then instruct nginx to deliver the static page.
Is this doable? If so, what is the most robust way of doing so?
You could achieve this with cookies: http://www.quirksmode.org/js/cookies.html
WIth cookies you would send a specific cookie w/ the response headers on the first view. Then each time the page loads, have your javascript check the specific cookie
Or use local storage: http://diveintohtml5.info/storage.html
Similar to the cookie method, but on the first view have javascript store a key=value pair in local storage, and check against that each time the page loads. Something along these lines:
(function () {
window.onload = function () {
if (localStorage.getItem("SeenBefore")) {
// Not first time viewed
} else {
localStorage.setItem("SeenBefore", true);
// First view
}
}
}())
Another option is, on the serverside, you could set a session variable the first time the page is viewed, then check agianst that each time a user sends a request for the page. This could also be achieved using cookies.