Develop Reference

Retain Dynamically Added DOM Elements when logging out

I recently came across a feature that Salesforce Applications have, i.e. when we log out, the tabs opened during the session are preserved and are displayed again when we log back in at a later point of time.
I would like to implement something similar in my web application where I would like to retain the dynamically created DOM elements so that if I refresh the page or logout, those elements still are displayed unless the end user decides to delete/close/destroy those elements.
Has anyone implemented anything that sounds familiar? If yes, what would be the ideal way to go about it?
Appreciate the help!

I have a webapplication that holds users and adresses as well as various different values. I have implemented a review function as a helper if you go through your data on an infrequent basis. It marks each value as reviewed or not. As this feature is only a helper and a review flag or timestamp is not needed and implemented in the DB, I save an array of data as a JSON string locally using localstorage.
This is enough for my case. You could do the same for your datamodell. You can of course also save this data per user on a separate table in the db. Consider something like: id, userid, featurename, etc.. with this generic layout you can save the state for each feature of your app, be it a tab, a modal, a setting or whatever.
Of course, you need a (preferably JS) function that gets these settings and then can recreate the DOM elements or fetch them via AJAX. You need as well a function that sends an AJAX request to save the information that a feature/window/tab has been opened/closed/etc.
A lot of work for a "nice feature". Might not be a top priority on your bucketlist, but definitly enhances your user experience.

I refresh the page or logout, those elements still are displayed
unless the end user decides to delete/close/destroy those elements.
That can only be possible if before refresh/logout those dynamically created elements are stored.
That can be possible by either storing the value in database or using local/session storage.
Values of the dynamically generated elements can be stored in localStorage like
localStorage.set('someKeyName' ,'value of dynamically generated Elements in string format')
Then after refresh retrieve the values and create those elements and append it to dom

how to pop up a Notice Span when user just log in (but not just refresh to the home page)?

I do not know how to detect it is the first time that user login the web.
I thought i should write a pop-up span on the jsp that user firstly saw when he login.but the issue is then he refresh the page,the notic will show again,that is ridiculous.
I need detect if it is first login means to detect if the user JUST LOGIN or NOT REFRESH the page
how and where shall I detect if it is the first time user login ? and then i can make mind if the notice span pop up.
and I think it should use cookies or session,but which one should i use?

Maintain a field in database table that check if it is first login than show a popup and after that change the value of that field so that Popup do not appear next time.
Ex:
if($data['first_login'] == 1)
{
// show popup
}

If you want to show it only to the new user (the time user registers) you can use a table column in database where you can use it to check if the user if logging in for the first time (e.g firtsLogin the column name = 1 ). If he is logging in for the first time you show the pop-up and change the value of the field to 0.
Otherwise if you want to show to users that are logged in to a specific device for the first time you should use cookies.

I suppose that you want to detect the user logging in to your web-site the first time. There are multiple ways that you can do it depending on your desire to spend additional time writing the code, the location of your logging-in logic (client or server side), security that you want to have while proving your users with login functionality. In all cases - you would have to store the data whether the user has logged in for the first time. I think you are seeking a fast solution that will work without a big care for privacy or security as working with client-side cookies isn't the safest way to store data. The alternatives to cookies are web tokens, url query string, server-side sessions and data-base (RDBMS) storage.
Storing and retrieving the data on the client-side using COOKIES. They are the pieces stored in the user's web browser. Cookies were created to help servers remember the data about the user next time he enters the web-site. The most common usages are: to store location (if accepted by user), web-site locale (language in which the user was browsing the site), products added to cart, etc. Following that approach you can create cookie after the user has logged in to your web-site as follows:
This should be run by your JavaScript.
document.cookie = "firstLogin=true";
After having done that, you would have to add JavaScript logic that will hook-up to user's/client's COOKIE data and read up whether he has logged in the first time before.
This would probably look like a simple JavaScript cookie look-up.
var cookieData = document.cookie;
This will return all of your user's cookies that has been previously stored when he visited your web-site. It will return it as a string concatenated with "; ". If we had previously stored only one cookie, we would get firstLogin=true;
In case if you have multiple cookies set before, you would have to parse the cookie string and extract the data either imperatively by plain procedural JavaScript code or by writing the function which will be able to do that repeatedly. Detailed examples of writing such functions could be found here.

Trying to save Multi-Value Form on server for users to call up during another session

been searching here for a while on how to save form information to be re-called later.
Here is my site: http://d3barb.com
The purpose is people fill out the 100+ fields in the form and it will generate numbers corresponding to the game Diablo 3. The formulas all work perfectly, and sometimes the cookie will save the information, but I'm trying to figure out a way to save the entire "page", so users can call them up during a different session.
I've tried for about 6 hours to get setCookie / getCookie functiond to create a cookie with all the values saved, but can't seem to get it to work. Even if it was working, it would only allow the user to load their last seission when re-visiting the site.
How I would like it perform:
1.) User inputs information for the form to calculate.
2.) User fills out a "name" text field and hits a "Save" button (I have these on my test page, but don't want it live until its working), which will save the values on my server containing all the form information as they've entered it.
3.) The next time that User visits the page, they would hit "Load" to call up a previous session.
I'd like to avoid user-account log-ins, so if possible I'd like the server to save the sessions by IP address & user submitted session name, something like: 142.105.103.125.fire crusader
Currently, the page is html with js calculating everything. I can convert it php for server interaction, but if there is another way, I'm all ears.
I'm not looking for handouts, so any links to tutorials would be greatly appreciated. If someone has done something similar to this and wouldn't mind sharing that page or code with me, I can do my best to frankenstein it for my page. (pretty much how I do all my websites haha!)

Have you tried/considered HTML 5 local storage?
http://www.sitepoint.com/html5-web-storage/
should get you started :)

Is there any way to access browser form field suggestions from JavaScript?

Is there any way to access the autocomplete suggestions that appear under HTML input fields in some browsers (representing previously submitted data)? Is this only available to the browser?
I ask as I want to make my own autocomplete implementation in javascript, but I want to intermingle my own suggestions with the users previous searches. A bit like how youtube does (but youtube stores all the data obviously, and it is tied to a login, there are no accounts on my website and never will be).
I was wondering more if there was a way to do it with the data stored in the users browser rather than storing all the data on my server. Is there is a way to grab the data the browser uses to present previous input to a user?

Is the data that appears in html input fields representing previously submitted data only available to the browser?
Yes - until it appears in the DOM.
Is there is a way to grab the data the browser uses to present previous input to a user?
It's a browser-specific feature, and you can't access the data [history] directly (Where do browsers save/store auto fill data). You only can disable storing anything.
I ask as I want to make my own autocomplete implementation in javascript, but I want to intermingle my own suggestions with the users previous searches. I was wondering more if there was a way to do it with the data stored in the users browser rather than storing all the data on my server.
Especially if you want to utilize all previous searches, the browser's autofill doesn't help you anyway. But yes, you can store them in the browser (on the client side) manually: Use DOM Storage, like localStorage. Though I would recommend sessionStorage only, you might run into privacy issues otherwise if everybody using a browser could see the search terms of previous users…

You can use jstorage. Jstorage lets you store up to 5Mb of data on the client side.
<script src="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="https://raw.github.com/andris9/jStorage/master/jstorage.js"></script>
<script>
/* $.jStorage is now available */
// store some data
$.jStorage.set('yourkey', 'whatever value');
// get the data back
value = $.jStorage.get('yourkey');
</script>

The only way i see this working is with help of localStorage (html5) problem that it doesn't work in ie<8
Here's an example: http://jsfiddle.net/8NZY7/

Use Python to return data from a Webpage's Ajax call

I'm writing a program in Python that needs to use a site's advanced search options. Specifically, the search page is the NVC advanced search page . I know the names of the projects and versions I need to search for, so ideally the program would select the project names and versions numbers from the dropdown lists, then return the results page(s).
I'm totally unfamiliar with HTML and Javascript, and I'm fairly new to Python, so I don't know if there's a way to 'click' these dropdown menus via Python, then return the results. The fact that the Javascript makes an Ajax call further complicates the situation, since I can't just load the page's source and parse out the list of project names and version.
Can anyone with some Python/Javascript/Ajax experience send me in the right direction?
An example use of this program would be that I start out with the project "glibc' and its version number '2.3.6' The program would make sure that this combination is listed at all (which isn't guaranteed), then return the results page (which has about 13 results).

The Mechanize Python library is perfect for form automation. There is an example of how to edit and submit forms on the examples page.

If a human user is using that search page, they click on one of the product links, which then load the list of products from another page, e.g.:
http://web.nvd.nist.gov/view/vuln/cpe/cpe-chooser?index=0&component=Vendor
This page is unfortunately not using JSON, so they have some custom javascript parsing for the response. The data from this response is then displayed as a drop-down for the user. When the user selects a product, the browser selects the correct value, so that when the form is submitted, it will be part of the query. e.g.:
http://web.nvd.nist.gov/view/vuln/search-results?adv_search=true&cves=on&cpe_vendor=cpe%3A%2F%3Aa-a-s_application_access_server
In this, cpe_vendor=cpe%3A%2F%3Aa-a-s_application_access_server is the important part. The part before the = sign is the field name, the part after is the selected value (which originally came from the ajax request). The funny %3A bits are URL-encoding.
So you don't actually need to interact with the page, since you know the names of the vendors and products for which you want to search; you just need to look up the field name (cpe_vendor for vendors) and the value for the specific products/vendors (cpe:/:a-a-s_application_access_server for my example above), then do a request to the normal search URL.

The advanced search options page sends the options via GET to the results page, giving you the URL (linebreaks mine to make it clearer):
http://web.nvd.nist.gov/view/vuln/search-results?
adv_search=true&
cves=on&
cve_id=&
query=&
cwe_id=&
cpe_vendor=cpe%3A%2F%3Aian_bezanson&
cpe_product=cpe%3A%2Fa%3Aian_bezanson%3Adropbox&
cpe_version=cpe%3A%2Fa%3Aian_bezanson%3Adropbox%3A0.0.3_beta&
pub_date_start_month=0&
pub_date_start_year=2005&
pub_date_end_month=2&
pub_date_end_year=2009&
mod_date_start_month=2&
mod_date_start_year=2007&
mod_date_end_month=9&
mod_date_end_year=2009&
cvss_sev_base=&cvss_av=&
cvss_ac=&
cvss_au=&
cvss_c=&
cvss_i=&
cvss_a=
It would then take a bit of sleuthing to figure out what bit of the url is what information from the form but that should let you then just scrape the results page.