I have to implement following in java script/HTML
first page(1.html) there will be button. When the user press ok button it should open second page(2.html).
In page 2 (2.html) there will be one text box and button . when the user enter some value in text box and press ok button the value should be availble in the one page 1.html.
How to do it in java script/Html
There are 2 cross browser ways to do this, setting a param in the url or using a cookie. Both can be done with javascript. However, not knowing the length of the data ( and personal preference against insanely long urls ) I would recommend using a cookie.
The easiest way I have found it interact with cookies via javascript is with the jQuery cookie plugin. https://github.com/carhartl/jquery-cookie
//page2
$('#okButton').click(function(e){
e.preventDefault();
var getInput = $('#yourTextInput').val();
$.cookie('mycookie', getInput);
});
//page1
$.cookie('mycookie'); //this will return the value of yourTextInput
Depending on the level of compatibility you require, using the HTML5 Local Storage features might be a good idea.
On your 2.html, set the value using setItem:
localStorage.setItem('aNameForYourData',data_var);
Then, to get it on 1.html, use getItem:
data_var = localStorage.getItem('aNameForYourData');
If you need support in less modern browsers, consider cookies. You can find information about using cookies here.
Related
I have a question about jquery, I want the user to be able to change the color of his/her profile. How could I manage to let the website "remember" that the changes were made?
$(document).ready(function() {
$('#color2').click(function() {
$('#color').css("border-color", "#3498db").css("color", "#3498db");
$('.navbar-default').css("background-color", "#3498db");
});
});
this is what I have to make the change
If it's a simple application, you might want to use the local storage of the browser.
localStorage.setItem('color', '#123456');
localStorage.getItem('color');
localStorage.clear();
Note that it's not bound to the users' profiles but scoped to the browser in use. If they go with another browser or use a different machine, the setting isn't known, which can create a weird issue when they jump between settings without understanding why.
In such case, you're better off seding the value picked to the server and storying it there. That requires you to managed it in the server-end code, which might be pulling a nuke to kill a fly.
This could be done via cookie or save it on your database using php not jquery, because jquery is used for user interaction or interface but you can use it to retrieve data using ajax.
I'm trying to implement a gmail like save message as draft functionality in my form.
Use Case: There is one form with certain fields which includes some text box, some image uploads, etc. My problem is how can I retain the values of these if these have been filled by user on a page refresh. Remember page is not yet submitted by user. If it has been submitted then I could have retrieved the values from server but how can I store values in input box now in case no submit button is clicked.
Should there be some api which will save the values regularly or can there be some api which can be invoked only when user is about to close the page or refresh it ?
I have no idea about this and would appreciate any pointers in this.
Update:
Based on the suggestions, I tried to explore some tutorials/blogs which can show the preoper design and implementation for using local storage. I found following good links:
http://yeoman.io/codelab/local-storage.html
https://domantasjovaisas.wordpress.com/2014/09/05/angularjs-saving-global-variable-in-localstorage/
Few doubts:
It seems we can store a JSON object in local storage but how can I store a given object for a given user.
Use Case: A user can create multiple messages. I just want to keep the last message which was not saved neither sent. How can I design this so that storage works fine ? For a given userId I want to keep some data in local storage. Is it safe to store a db Id in local storage ?
Please suggest
I suggest using a library that abstracts over localStorage and defers to cookies if you are looking to support older browsers. Use JSON.stringify and pass it to your storage service. You can also append usernames to the key if you are likely to have multiple users on one machine. It would be good practice anyways.
Examples include:
https://github.com/grevory/angular-local-storage
http://ngmodules.org/modules/ngStorage
You can hook into ng-change, watches, event listeners or use a timer as someone else suggested.
UPDATE: You can find a trivial implementation here, http://scionsoftware.com/Blog/saving-form-state-with-angular-js/
If you're looking to do it for only one string value as you implied, simply remove the JSON.parse and JSON.stringify pieces from the javascript.
I've been trying to figure this out on my own, but I can't seem to get it sorted.
I'm building an accessibility section on a client site, and i've got two buttons, the buttons add a class to the body, one is font-size the other is greyscale.
I need these classes to stay on the body until clicked again to remove, as users don't want to have to keep clicking the buttons to be able to see the site.
I want to store these classes with a session or cookie, but having done some reading, sessions store cookies anyway, so whichever is the best option.
I'm using wordpress for the site, so if there's something I can use function wise, that'd be useful to know!
Can anyone help me out?
If you want to use localStorage you can use this code.
// Check if localStorage is supported
if ('localStorage' in window && typeof localStorage == 'object') {
$(document).ready(function() {
// Set the class if greyscale is set
// Note that localStorage saves everything as strings
if (localStorage["greyscale"] == "1") {
$('body').addClass('greyscale');
}
// Register click listener for the button
$('#button').click(function() {
// Toggle greyscale on and off
if (localStorage["greyscale"] != "1") {
$('body').addClass('greyscale');
localStorage["greyscale"] = "1";
}
else {
$('body').removeClass('greyscale');
localStorage["greyscale"] = "0";
}
}); // - button click
}); // - doc ready
}
JSFiddle
Session is usually using cookies but data is stored on server side and cookie is only used to identify it.
Assuming you have no reason to know if user is using gray scale on server side you can do this entirely in JS.
For example using some neat jQuery plugin for cookies https://github.com/carhartl/jquery-cookie
//set cookie and add class on button click
$('#button').click(function(){
$.cookie('greyscale', true);
$('body').addClass('greyscale');
});
//check for cookie on document load
$(function(){
if($.cookie("greyscale")){
$('body').addClass('greyscale');
}
});
Also please have in mind that this cookie will be sent to server and back over and over again so if you don't need this on server side you should use some more modern solution like HTML5 localStorage. There are few libraries that can be used to keep data on client side. They use modern features and fallback to old ones(like cookies) on older browsers. Please check http://pablotron.org/software/persist-js/ for example.
As mentioned in this answer:
The main difference being that session data is stored on the server, while cookie data is stored on the client. Therefore, a client can easily modify the cookie contents, but will have to work way harder to modify the session contents.
There are a couple ways to approach this
1) Keep the information in $_SESSION.
2) Keep the information in cookie.
Based on your case and on the data you want to store (which are not critical), I'd suggest you store it in a cookie and not bother the server to keep track for every user.
You could easily store information in a cookie via javascript.
Here is a javascript cookie reference for you:
http://www.w3schools.com/js/js_cookies.asp
After storing your info inside a cookie you could retrieve the info stored inside a cookie via javascript or php.
Keep in mind:
Javascript = client side (server wont be bothered) & after your dom is ready you will have to add the according class to your body.
PHP = server side, meaning that you wont have to add a class after the dom is ready and print your html with the appropriate class already set on the element.
PHP cookie references:
http://www.w3schools.com/php/php_cookies.asp
http://davidwalsh.name/php-cookies
Store it in a cookie.
Using cookies you can choose when will the cookie expire, when using sessions - when session is destroyed information is lost eg. when user logs off.
User will have to manually delete your cookie to delete the "body class information"
I have a html form which are paginated.I need javascipt that can save the history of value of input, user click next pages and when return to previous page can see what was wrote.
You have several options. You can for example use local storage.
But since that is not supported in older browsers, you can fall back to a cookie mechanism for example. Check out jstorage.info for a library that handles this fallback behaviour for you.
Use Cookies method in javascript to store text box value.
Keep a JavaScript variables value after a page refresh? this page gives more information about cookies.
I have three radio buttons and 4 check boxes.
I want to preserve the radio button and check box values after the browser refresh.
I do not want to use cookies (due to some other reason).
Could anyone please help me?
I don't think this is possible because HTTP is stateless, cookies or server side scripting provide 'state'.
You could use sessions instead.
EDIT: My bad, I read PHP and not Javascript. However I did find this link after a quick Google search. Session variables without cookies in JS
You might be able to use the hash url.
something like this (don't remember if you need to specify the name of the page as well, but I don't think so):
document.location.href = '#radio1=1&radio2=0'
The hash means it just directs things on the current page and not going to another page (and the browser updates it in the address field, so if the user reloads the page, it will still be there). Then you can read it from javascript as well and set it.
Not as good as using server side sessions, but it is an option :)
If you're using a form to trigger a new page loading you can make the onsubmit event call a javascript function to change the window location and append URL parameters that store the values of the radio buttons. When the page loads you would then read the parameter values from the URL. Something like this:
<script type="text/javascript">
function changeURL(){
var str = window.location+"?radio1=1";
window.open(str);
return false;
}
</script>
...
<FORM onsubmit="changeURL();">
<INPUT TYPE="submit" value="click me" >
</FORM>
A new facility is being developed to allow web sites to store persistent data on the client machine. Available in some browsers already this allows you to save the the radio and checkbox states and recover and restore them next time the user visits your site. For more info see here https://developer.mozilla.org/en/DOM/Storage and here http://dev.w3.org/html5/webstorage
Have some JS on the page submit all radiobutton/checkbox events to the server, and store their state in your database. When the page (re)loads, send this state as part of the HTML.