Remember changes made in css - javascript

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.

Related

Save controller state on page refresh

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.

Adding a class to Body in PHP and keeping it with a session

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"

How to keep HTML Element on Browser Location Change

Is there a way when Page change location to keep some HTML Element's.
Like a div that will not be re-rendered but keep it's state.
You can find and example like that at Facebook Chat ,you can see that the Chat window does not change it's location or InnerHtml when you navigate to another page.
PS : I have no clue where to start so any documentation would be appreciated.And it would be nice if solution would be XHTML not HTML5
I don't know exactly how facebook chat works, but I do know all chat messages are stored in a database, so you can access them later via messages.
My assumption would be that a Session variable is set letting facebook's UI know what chats you have open, or perhaps its stored in the database as well. In either case, you'd have to use some outside script in order to do this. For sake of ease lets say you'll use PHP, and you'll store the data in a SESSION variable.
/* Storing the variable */
$users = array('user123', 'user456', 'user789');
$_SESSION['chat_windows_open'] = $users;
/* Retrieving the values */
foreach($_SESSION['chat_windows_open'] as $chat) {
/* Use $chat to get the username, query the DB for
the message content, and echo it in whatever form you
wish. */
}
When window.location changes, the page is automaticaly, entirely re-rendered. So, from this point of view, the answer is no. However, this effect can be obtained by using AJAX. Use ajax to make requests to the server while the page does not reload or changes location(window.location is always the same). Here's a good link to start with AJAX:
http://www.w3schools.com/ajax/default.asp
If you still want the page to change it's location, after you've made your ajax request and updated the content on the page, you can use javascript's history.pushState function. However you will have to find a way to make it cross browser(aka. make it work in IE).

Best way to store temp data to pass from web application to desktop application using javascript

I'm looking for the best practice here.
I need to store 10 variables of information, in a certain format:
lname: [John]
fname: [Doe]
etc...
using Javascript. I was thinking about using cookies.
My scenario is as follows:
The user would be in Salesforce.com and they would enter the customer's information into a record. They would then click a button get a quote. The button, using JS, would write the Salesforce fields to a temp file (cookie maybe). From there the other MS application would pick up that file and read in the values.
How would you guys do that?
Thanks for the time.
The browser will not allow you to write files, generally speaking. For this, you'd have to use a mechanism to get out of the security sandbox, such as a signed Java applet.
Cookies are NOT a good option here. Desktop apps should not be attempting to access browser cookies; at best, it's considered "badly behaved code"; at worst, you won't be able to do it, or your app will get detected as malware. Even if it was considered OK, you'll have to write cookie-reading implementations for any browser you want to support since there is no standard for how they are locally stored.
Why not make the desktop app access the web on behalf of the user? Write SFDC quote requests to a new SFDC custom object, like Quote_Request__c or similar, and the app can query the most recent record(s) created by the user via the API.
Clipboard integration, while it sometimes seems clunky, may be a low-cost option.
If you must write to a local file of some sort, you'll need to use Flash or Java, or make the user locally save some downloaded file (like any normal browser download).
Another option would be to register your desktop app as a URL protocol handler; so, say, myquote://firstname/lastname/product/price/etc could be clicked from a web browser to launch the app and parse the "URL". May work poorly with very long/complicated data though.
Yes, cookies are certainly an option in this case. Cookies are accessible via the document global object (e.g. document.cookie). It can hold a string and an expiration date.
Here is a cookie handler I wrote:
http://jsfiddle.net/zbaJz/1/
Using this handler, you can store information in a cookie, and would be able to view as well as delete it. Then, using JSON stringify, you can pass it an object.
var name = {
'fname': 'John',
'lname': 'Doe'
};
var jsonText = JSON.stringify(name);
var cookieMonster = new Ovenmitts();
cookieMonster.bakeCookie('name', jsonText);
Then, in order to turn the data back into an object to manipulate, you would use JSON.parse.
var cookieInfo = cookieMonster.admireCookie('name');
var revived = JSON.parse(cookieInfo);
You can add a thread/task to the MS Application that watches for changes in the directory whee the cookie is created. When you detect a new file that meets your requirements you can act on it. You will need to use DirectoryInfo for this approach.
You can also create and windows or webservice that the application listen to and can pass the data this way from the web app.

How to add javascript to page on login and logout in Drupal 6

I'm working on a module and am trying to add some javascript to the next page a user sees after logging in or out. Calling drupal_add_js() on hook_user (op == login) doesn't seem to work; I'm assuming this is because drupal_goto is called after the login is completed and a fresh page request is initiated.
I've considered using hook_user to set session variables which I can then respond to on the next page load but that seems somewhat fragile. Any suggestions?
If you want something to be carried over to a new page you only have a few options:
Alter the url.
Store in the database.
Store in session.
Altering the url, would probably be quite hard and messy. Storing in the session or database is basically the same thing. So you would probably want to use the Drupal session system instead of making your own.
You could add something in the session and then in hook_init check for it and if it's there add the js and delete it from the session.
I don't think you will find a much better solution, though it would be nice if there were.

Categories