What I'm looking to do is have a button on every row of a table that when clicked saves that row to a cookie or HTML5 webstorage (cookies were my initial thought, but it sounds like webstorage might be a better alternative). I'd also like that row to be removed from this table to show that it was selected.
When I or the user is finished selecting different rows, we would then go to a new page that lists all of the data from the cookie or webstorage in a new table.
Tohaku, you idea does not clear where the data is coming, so you will delete/update/save it? but just trying following are suggestions.
If it is coming from database backend server, than simply make table and add button and assign onclick event in javascript with ajax so each row can be deleted from database.
How do you remove that row, simply put class identifier on td column, make java script to remove that td which is deleted. As for saving you don't need as it is already done in your ajax request. So here there is no need to use any web storage.
As question need more explanation, but if in case you must have to use web storage, you should use indexedDB, as webstorage is depreciated and no more being maintain. Another reason is I have also made full app of mobile on web storage but I found that it don't delete columns individual either it can drop whole table but no individual column deletion. IndexedDB also have many issue and support is in only latest versions but safari/ios does not support it so you also need some shiv solutions.
On first run it will retrieve all your data from database, so use javascript function to load on ready stat of page. Now put same two button with javascript so when delete is pressed it will delete row and save is (as no right explanation so will save in another database). IndexDB is nosql database which is based on object, key storing.
How to do it with indexDB read here https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
Related
Im' developing an app with ionic/cordova and have used the localStorage for many times.
For example I have such a thing:
window.localStorage['is_user_paid'] = 1;
So, if user pay the money, I set this localStorage item.
Now, if another app set this to 1, and run in the device, does my app assume the user is really paid? Is it necessary to use an app key like 2afjx8y_is_user_paid ? Any idea?
When running under Cordova, localStorage is sandboxed to your app; no other apps can see the content within your app's localStorage, nor can they change the contents. Likewise, your app can only see its own localStorage contents.
Now, sandboxed does not mean not readable/editable by the user, however, which is why it is vitally important not to store things like passwords in localStorage -- the file itself is mostly human-readable and easily accessible by your end user. However, apps are prevented from accessing any localStorage other than their own.
Note: there are ways around this when apps from the same company need to share data, but they involve a different storage mechanism.)
I got around this once upon a time by creating a unique identifier within my app (stored not in the code but in the datastore), and I would use it whenever accessing local storage.
The code is predictable enough, the logic is what's important:
Create a value in your datastore (or a file that isn't readable via a URL, like in the GAE that might be an app.yaml file, or whatever) that you use as unique ID. You can do this by hand if you have to. Generate a GUID of some kind and just store it. Don't put it in your dev code or hardcode it into a JS page, make sure it's off to the side (unless you don't care, but you probably should).
Whenever you access local storage, either to get or put, run it through a function that retrieves that info (or already retrieved it as part of bootstrapping the app, whatever works for your context), and just prepend it to whatever you're calling your key.
That way you can continue coding as if you're just using an easy to understand key, like 'user_name', but the stored/retrieved key will look like "abd12342Baa345324w3423sdfs323DD_user_name".
From time to time, if so inclined, you can change that key, set up your code such that if it retrieves 'user_name' with the old key, you swap it out for the new one and continue your ops as usual.
I did this at work for an app in production and all around it was considered a legit way to go about it. I got the approach from a GAE article that shows how to store and retrieve client tokens for Google Login without putting them in your code; you can even store different versions of that UID for dev/qa/prod and whatever else. It's not specific to GAE, the concept should pan out to any environment.
Of course, if another developer on that project decides to use that same function and same GUID, then the problem just moves. A little discipline can clean that up though, I put in a comment above that util function and we never have a problem.
i am looking for a solution for an auto-complete dropdown box which needs to load entries from a huge json (json file is also being updated / generated every second.)
I tried "typeahead.js" but by default it caches the json file in browser and was not able to display new entries added to json file.
is there a solution for an auto-complete text box which can load entries from the server as fast as possible ?
please suggest.
thanks
In your case, you can take advantage of Bloodhound, the typeahead.js suggestion engine. It provides two options. Prefetch and Remote.
In Prefetch, data is fetched and processed on initialization. If the browser supports local storage, the processed data will be cached there to prevent additional network requests on subsequent page loads.
In Remote, it will fetch data from remote source when ever you need it. But remember, in order to prevent an obscene number of requests being made to the remote endpoint, requests are rate-limited.
I think you should user Remote option in your situation.
Reference : Link
There are two ways which are mentioned in the documentation for typeahead.js
You can make the TTL value = 1 for prefetch ( this did;t work for me )
https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md
Or you can use clearPrefetchCache on click page load or click of a button .
category.clearPrefetchCache();
I need an information. If I have a form, used for uploading a file and having it target an Iframe.
I then use Ajax to get the Upload progress. Let say that a simple layout with 2
column only.
The Form being on column 1 and the Iframe on column 2. I want to still be
able to use the column 1.
So while the the upload is still in process. Will I be able to use column 1 to show other page content?
Possibly, using a pre-built solution may solve your needs and provide greater functionality. I know that you can continue using the rest of the page when uploading via Uploadify. You may want to look into this.
Dont things to as everything upload process would have to finish first. You could display info in Collumn 1 prior to starting the Upload process. You wont be able to have any POST backs tho as that will cancel the upload process.
Flash/ASP could be your solution.
I've recently added HTTP headers to my site to inform the browser to check with the server every time it comes across a given JS/CSS URL. I've tested it and it works perfectly; all browsers now make conditional GET requests.
Here's the problem though -- people still have the old headers cached; headers which more or less told the browser "cache this forever; don't bother asking for an update!". This can be busted with a hard refresh. I don't want to have to communicate to everyone to please hit F5 on any buggy pages after we push out code.
Are there any HTTP header(s)/HTML meta tag(s) I could put on the HTML document itself to say "Browser, ignore the headers you have on the JS/CSS files and download the latest version of all the included files on this page"?
Eventually this problem will work itself out as more and more people clear their cache or learn to refresh on their own. But, I'd rather fix it now. Then in a month or so, I'll remove the HTML-level headers to get caching where I want -- on a per resource basis.
EDIT: I do not want to rename the resources or add on query parameters. That's what we used to use (?v=18, ?v=19, etc.) and it was a chore to increment that number every time we updated resources. Even doing that programmatically isn't the ideal solution; especially now that our server is configured correctly. It makes more sense to do it on the HTTP level so it works regardless of how you're accessing it -- included on a page, directly from the address bar, or otherwise.
pass a parameter to on the script source which will force a reload of the script... in fact you could do it by version or similiar
<script src="/test/script/myawesomescript.js?ver=1.0&pwn=yes" ...>
that would work and be seemless to the other users... when you feel like it has been long enough go back to the old way. but this will work if you want to force a refresh from users.
This method is utilized to prevent caching of webpages by some frameworks. Let me know if you were successful
http://css-tricks.com/can-we-prevent-css-caching/ -- here is a link to the concept for css (should work in js too) -- the biggest difference is you dont want it to never cache, so dont use a time stamp, use my style like from above :) enjoy!
Basically the only way is to get the browser not to use the cached URL.
One method is to use a cache-busting dummy parameter on the end of the URL.
some-name.css?q=1
That will force the browser to reload that file (because that URL isn't in the cache), and the downloaded file won't be cached because of your new headers. However: you may need to use this new name indefinitely, because you can't guarantee that once you leave off the dummy parameter again the cached version may still be used.
The other method is to completely rename the file.
my-new-name.css
What is the most simple way to insert values into a mysql database without reloading the page? In this particular example, I'd like to have a form with one input field, and when the form is submitted, the user's input to the field is inserted into a mysql database table, but the page is not reloaded.
You can use AJAX to send content to a server side file (without reloading) and that file can insert row(s) in the database. Here's an example : http://www.9lessons.info/2009/08/vote-with-jquery-ajax-and-php.html Here, this guy creates a digg like vote button and it inserts and updates rows without reloading the page. Check it out.
Look at jquery ajax() or the jquery.form() plugin.
This requires AJAX.
You CAN do this with plain JS, but jQuery makes your life a lot easier.
See this post for a good example:
Inserting into MySQL from PHP (jQuery/AJAX)