Develop Reference

Is it possible to use Javascript to temporarily store data while User adjusts, and then pass as Hash to Rails Controller?

At a high level, building an application that allows User to request Items from other Users located in the same county as the requesting User. User and Item are both models with associated databases.
On the request page, I'm trying to build 3 components.
1) A map that shows
A marker for each other User
When clicked on, the marker displays a popup that lists the Items that that User has. The requesting user can click on each Item to add it to the list of Items s/he would like to request
2) A set of search fields that allows the requesting user to filter the markers for Users and Items on the map, for example, perhaps by dates_available.
3) A "cart" (not literally since this is not about e-commerce) that shows the Items the requesting User has currently added, with a final submit button. Note, dates_available should not only be a search field, but also part of this Request
A not perfect example is this screenshot from Getaround:
I'm pretty new to coding in general, so always want to think through plugins, APIs, shortcuts, etc. The below is just for reference, but if you have comments on how to implement this better, PLEASE do tell me! Right now, I am currently thinking of using:
For the map:
Openlayers.org
Gmaps.js
For the search (which is really a filtering capability):
Ransack gem (https://github.com/activerecord-hackery/ransack)
THE KEY QUESTION
For the "cart" and the click Item to add to "queue" part, I realize that while I can do this in Rails purely, it might be less of a positive UX experience since the page would constantly re-render every time a new item were added, not to mention it'd potentially result in excessive pings to the database or records to be created. I'm thinking of using Javascript to basically make the "cart/queue" a staging area for temporary storage, where the User populates it with whatever Items s/he wants and edits as needed, but it's not until the final submit click that the entire group of Items is passed as a Hash to the Rails Controller to be saved.
Now, since I don't really know JS very well, any resources on how to do this (easy plug-in solutions, other considerations I may have missed) or if it's not possible (in which case pray tell) would be greatly appreciated.
Thanks!

You may try Javascript localStorage.
localStorage.myTempValue = "my temp value";
or
localStorage("key", "value");
You can store object:
var person = { name: "xxxxx", age: 35 };
localStorage.Person = person;
Hope my answer may trigger an idea in you!

Hide WSS 3.0 Webpart Using JavaScript

I am using WSS 3.0 in my application. I am displaying a List as a DataView Webpart. My objective here is to make this webpart visible to a selected group of individuals. As there is no option for Target Audience in WSS 3.0, I went to edit Permissions for List and gave Read permissions only to selected users. This doesn't hide the web part from the page, rather shows an Access Denied message to other users.
Access denied. You do not have permission to perform this action or access this resource.
As I said, I want to hide this webpart, as in make it invisible on the web page from other users who do not have permissions to view it. As this message will be displayed only to those users who do not have permissions!, my approach is to search for the above message in the html and identify and hide the parentnode, thereby hiding the webpart.
I am not quite sure how to do this. Any ideas? Thanks in advance!

I'm going to assume you're in a situation where you can add additional web parts to the page and not trying to add JavaScript to the DataView Web Part directly. My suggestion won't work on a separate page if a Designer adds another view of this list.
Upload a blank .js file to your Site Assets. Add a Content Editor Web Part to your page, point it at that file. Add JQuery from a provider or host it yourself, adding the reference in your file. From there, you have 3 directions in which to work: first, explore the web part with Internet Explorer's F12 Developer Tools, keeping a particular eye on divs and tables with good unique ids, names, or classes that would solve your problem if hidden. Also keep an eye on the id of the div or table or cell or whatever that contains your access denied text. Second, (assuming you're new to JQuery) do some JQuery tutorials and then start playing with selecting the above items and, say, changing their background color. Once you have both of those, you're 90% there: (try to) select the object that would contain the access denied text, and if the innerHTML is present and equals that string, then set display:none for the div or tables to hide your web part. The third tool you have is editing the page directly with SharePoint Designer: you can toss a div with an id of your choosing around any xsl:template, which might help in your JQuery selecting.
I'm sorry I can't give you the specific code, since I'm not in a position to test it. If that changes, I'll try and give a more detailed response.
Old, misdirected answer: Do either of the answers here work for you? Alternatively, this answer has some great resources to solve your problem. Just change the message to an empty string.

Thanks Aron :D
I found the id for the webpart and hard coded it. It provided the solution, but I was hoping to programmatically fetch the id instead by searching the innerhtml, as I have more than one web parts that have to be hidden.
I found a partial solution here:
Hide SharePoint web part using javascript onclick method
I put a CEWP on the page and added the following script in it:
<script>
function hide()
{
var content = document.getElementById("webpartID").innerHTML;
var n = content.search("Access denied. You do not have permission to perform this action or access this resource");
if(n!=-1)
{ document.getElementById("webpartID").style.display="none";
}
}
_spbodyonloadfunctionnames.push("hide");
</script>
In my case, I picked up the webpart id from the aspx page or view source for the page.

Fill and add select options and sync with database

I'm very new with JavaScript and I'm struggling to implement something which I don't think should be very complicated.
What I want to do is:
form is open in browser with a drop-down list of records in a database
if the desired option is not in the list, the user can click on a link next to it to add a new entry to the database
this will open a new window with an additional form for this entry
on clicking submit the processing script will run to insert this information into the database
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
Maybe that last thing with the list refreshing is quite complicated (unless the list only in fact loads from the db on click?) but everything else should be simple enough, I think. I've tried all sorts of things but nothing that's got close enough to working to be worth posting here.
Could someone please give me some sort of idea of the sort of functions I should be using and roughly how to implement them? I don't necessarily need precise code, just a framework to work from. (I'll learn more in that case anyway.)
ETA: I should add that I've been trying to work with window.open() and window.close(). I don't even really know if this is the best method?

No, that's not(at least relatively) complicated. What you'll need is jQuery and jQuery UI(these frameworks are just suggestions, you may chose any other if you like) to achieve that. So...
form is open in browser with a drop-down list of records in a database
This part is easy, just a simple html form with a select tag and a add link/button on it. You will need a JavaScript function to refresh the select options from database. For that I suggest this or this -there are many others on the web- post.
if the desired option is not in the list, the user can click on a link
next to it to add a new entry to the database
this will open a new window with an additional form for this entry
The easy way to do this is using jQuery UI Dialog Widget to open the popup with the new form.
on clicking submit the processing script will run to insert this information into the database
On that form you'll have to use jQuery Ajax to send data to database through your server language(PHP, ASP.Net, JSP, whatever...). Some examples here and here.
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
So when data processing was complete, you call the refresh select function that you created before and close the dialog on the ajax success callback. Example here.
And this is it. Now it's up to you. Hope it helps.

Save the state of page. Cookie or session?

I have a little web app (which only has 1 page) that allows user to input and select some options. The input texts and selections will be displayed in another div in the form of table. You may want to refer to the example here: http://jsfiddle.net/xaKXM/5/
In this fiddle, you can type anything and after you clicked submit it will get the text input and append them to another table #configtableTable
$('#labels #labelTable tr:last').after(addmore);
$('#configtable #configtableTable tr:last').after(displaymore);
I'm using cherrypy as a mini web server (and thus major codes are written in python) and i know that it has session here but i have no idea how to use it at all as the example given is not really what i want to see.
FYI, i'm not using PHP at all and everything is in a single page. i simply show and hide them. But I want the page to remain as showing #configtableTable and hiding #labelTable even after refresh. Note that the fiddle is just part of the web app which will only show all these after getting a reply from another device.
Not sure about cookie because all the links i've found seem broken. How about jQuery session? Is it applicable in my case? I need some examples of application though :(
okay, to conclude my questions:
1. can i save the page state after refresh? and how? which of the methods mention above is worth trying? is there any examples for me to refer? or any other suggestions?
2. can i simply DISABLE refresh or back after reaching a page?
Thanks everyone in advance :)

Don't disable Refresh and / or back navigation. It's a terrible idea - user's have a certain expectation of what actions those buttons will perform and modifying that leads to a bad user experience.
As for saving state, while you could use session or cookies, if you don't need that data server side, you can save the state on client side as well.
For example, you could use localStorage
Alternatively, you could create an object out of the data in the table, JSON.stringify() it and append it to the url like this: example.com#stateData.
In case of either option, at page load, you'd have to check if there is state data. if you find there is, then use it to recreate the table, instead of displaying the form.
The disadvantage of the first, is that not all browsers support localStorage.
The disadvantage of the second is that URLs have a length limit and so this solution won't necessarily work for you if you're expecting large amounts of data.
EDIT
It appears that Midori does support most HTML5 features including localStorage however, it's turned off by default.. (I'm trying to find a better reference). If you can, just point Midori to html5test to see what HTML5 features it supports.

Deleting dynamically created button

I am making an English to hindi transliteration webpage that works offline. I have used HTML & javascript so the file works on all browsers across all OS.
I have added support for remembering words used via a cookie provided the user works on same computer, same browser every time.
As the user types word , buttons are dynamically created which suggest on basis of database stored in cookie. Is there a way I can associate action on right clicking a dynamically created button ?
Also , I want that - the dynamically created button should vanish on right clicking it ?
I want this because , if user wants to remove an erroneous entry from his vocab database (which is in a cookie referred above).
Currently I am able to remove all dynamic buttons in one go using
id-of-span-which-holds-dynamic-buttons.innerHTML = '';
A lengthier way would be to remove all buttons , then pop out word from database & recreate suggestion based on current database. Is there a simpler way ?
Where can I post my web page code (>51KB) if somebody wants to see what I have been talking about?

I have added support for remembering words used via a cookie
This is a really bad idea. It incurs a big overhead in every HTTP request - and eventually it will get to apoint where the requests get too large foer the server to cope with - then bad things can start happenning. HTML5 has proper support for local storage. Use it.
Is there a way I can associate action on right clicking a dynamically created button
Have a look around the web - do you see anything similar implemented anywhere? I never have. Trying to take over the right mouse button is a bad idea.