I'm using TaffyDB to have a local/offline database
but unfortunately - after refreshing the browser tab - it loses the data
example:
I have this initial variable
var clist = TAFFY();
onclick event on button - it execute this statement
clist.insert({"123" , count:count , color:color , size:size});
after clicking it - and reload the browser tab , I execute this statement
alert(clist({PID : "123"}).count());//output 0
however the previous statement should output 1
but unfortunately - after refreshing the browser tab - it loses the data
Well, yeah, that's how TaffyDB works.
however the previous statement should output 1
No, it shouldn't.
TaffyDB is in-memory only. As soon as the context for your script is torn down, such as on a page reload, it's gone. If you want to persist it, you have to do that yourself.
The easiest thing to do is serialize the entire dataset as JSON and shove it in localstorage, provided it's small enough to fit there.
As per taffydb documentation, to persist data into localStorage, you can use db.store()
let db = TAFFY()
db.store('mydb')
This single function will both store the current data in-memory and retrieve previously stored data. So, if you call store at the beginning of your script, then on a window refresh, the stored data will be loaded.
BEWARE: However, the saving routine for db.store() is called as a non-blocking process... so if you wish to immediately retrieve data that you stored using some other call on localStorage, it will likely not be there. The best practice for store() is thus to call it on window load and then whenever you wish to save your existing data.
Related
I want to dynamically load an image using jQuery like this:
main.js
var slidersrc=""; //try to define global variable - not sure if this is correct
jQuery(document).ready(function() {
jQuery("#sliderimg").attr('src', slidersrc);
});
jQuery("#selection1").click(function() {
slidersrc='wp-content/themes/*****/slide1.png';
});
So the first time user access my website, the slider is empty. After user clicks on one of the selection areas, I set the global variable value. Then if user continues to navigate at my website to different pages, the user should be shown a slider image as a result of his selection.
However, this doesn't appear to work.
Am I correctly using the global variable in jQuery? Or is there a better way to save the user selection value in client side?
thanks!
Global variables do NOT survive from one page to the next. Each page starts an entirely new javascript context (all new global variables, functions, etc...).
If you want to save state from one page to the next, your options are:
Put the data in a cookie which you can read from each successive page when that page loads.
Put the data in a browser local storage which you can read with javascript from each successive page when that page loads (recommended option).
Store the data on the server and embed it in each page as it is served from the server.
You can read about how to read and write from browser LocalStorage here and here.
If you're planning on changing the slider image each time the user clicks, then perhaps you want to save an index into an image array in local storage. When the page loads, you read the current index from localStorage (or supply a default value if no value exists in local storage), then write back the current value to localStorage for the next page. If the user takes some action that causes the index to update to a new value, then you update your page and then write that new index into localStorage so the next page can read it from there and so on.
LocalStorage is a similar concept to cookies, but it's a bit easier to manage and more efficient (the data is not sent to the server with every page request).
I'll be as direct and as specific as possible.
I'm trying to create Greasemonkey addon that would create graph of winnings/loses on: dead link
As you can see, site has front page which dinamicly shows results of wins / loses and how much did which user win/loose. What I'm trying to do is catch every new entry so I can draw some grapsh and or statistics for user / users.
When I access div/span that should have data, it turns out to be empty. I know that reason behind this is that all divs with data relevant to me are empty on load and that they get populated later on.
What I don't know is how to access that data. I can see (using firebug console) that there are GET requests executed all the time and that in those get requests is data that I need.
Can someone tell me or at least point me into right direction, how to access that data every time it gets refreshed / inserted?
You can try using the $.ajaxSuccess function to specify a function in your script to be called everytime an ajax request completes in the main page. This'll be fired for every successful ajax request, whether it pertains to the data you're talking about or not, but should allow you to re-scrape that section of the document to grab any and all data in it after every successful request. You may want to wrap your callback function in a setTimeout of some kind to make sure their own callbacks have a chance to fire and inject/modify the content before you scrape it. It should still seem instantaneous to the user if you set a timeout of, say, 1-10ms.
http://api.jquery.com/ajaxSuccess/
I created a table that receives data from a SQL database to a PHP script that parse this back though my AJAX to the HTML page.
With this information I create the table.
It works and the beauty of it: every time the data changes the table changes.
BUT: it reloads the whole table with new data.
What I want is to have it only reload the part that's been updates and then "mark" it until you mouse over it.
Is there any function in JS that allows to compare 2 JSON encoded strings and then only update the part that's not similar?
I have use jQuery but haven't found anything as of yet.I apologies for not showing any code but it's protected from sharing
You have to poll AJAX request to the server after every few seconds or minutes and see if there's any update. If so, you receive that update with say the id or index number of the data which you can replace with the new one. That way you won't have to update the entire thing.
i have a code here but i don't know how to pass it to the other page... basically it is inside a function so before the code there is a function but i think there is no need to worry about that what i need is to change the "alert" so some kind of variable where i can grab the value and output it, and also i would like to ask because the data in that function is an array is it correct if i write it like this? var x=new Array($(this).attr('fill')); and if it is correct how will i grab the array data into the other page?
$('text').each(function(){
alert($(this).attr('fill'));
i have a working link here but in this one i still need to change the alert into a variable i can call
It's not entirely clear what you're asking, but to get data from one page to the next, you have the following options:
You can store the data on your server and each page can get the data from the server or have the server put the data into each page when the page is constructed.
You can write the data to HTML5 local storage in the browser and each page (on the same domain) can retrieve the data from HTML5 local storage.
You can write the data to a cookie in the browser and each page (on the same domain) can retrieve the data from the cookie.
You can pass data to the next page via the query string in the URL.
Javascript variables and properties of DOM objects live only for the duration of the current page. When you go to another page, the entire javascript state is thrown away and does not survive on the next page (it is built again from scratch on the next page). This is why you must store the data somewhere and then each page can retrieve the data.
I have a page that dynamically loads content based on a user pushing a button:
${document).ready(function)
{
$("#myButton").click(function()
{
$("#dynamicDiv").load("www.example.com");
});
}
The dynamic content works fine, I can fetch pages all day long. But after you follow a link to another page, then press the browser back button to come back to the page, the page is completely reset as though no dynamic content had ever been loaded.
I swear I've seen different behavior before, but maybe I'm insane. Shouldn't the browser preserve the state of the page, rather than re-rendering it?
EDIT:
By the way, I'm using Play! framework, if that has any bearing on this.
The browser loads the page as it was first received. Any DOM modifications done via javascript will not be preserved.
If you want to preserve the modifications you will have to do some extra work. After you modify the DOM, update the url hash with an identifier that you can later parse and recreate the modification. Whenever the page is loaded you need to check for the presence of a hash and do the DOM modifications based on the identifier.
For example if you are displaying user information dynamically. Every time you display one you would change the url hash to something like this: "#/user/john". Whenever the page loads you need to check if the hash exists (window.location.hash), parse it, and load the user information.
Implementing browser back functionality is hard.
It gets easier when you use a plugin like jquery.history.js.
http://tkyk.github.com/jquery-history-plugin/
A technique I use for this is to serialize state to JSON, store it in the hash string, and then read it back when the page is navigated back to. This has been tested in IE10+, Firefox, Chrome.
Example:
// On state change or at least before navigating away from the page, serialize and encode the state
// data you want to retain into the hash string
window.location.hash = encodeURIComponent(JSON.stringify(myData));
// If navigating away using Javascript, be sure to use window.location.href over window.location.replace
window.location.href = '/another-page-url'
....
// On page load (e.g. in an init function), if there is data in the #hash, overwrite initial state data
// by decoding and parsing the JSON string
if (window.location.hash) {
// Read the hash string omitting the # prefix
var hashJson = window.location.hash.substring(1);
// Restore the deserialized data to memory
myData = JSON.parse(decodeURIComponent(hashJson));
}
epignosisx and Malcolm are both right. It's also known as "deep linking". We used the JQuery Address Plugin to deal with this in a recent Play application.
http://www.asual.com/jquery/address/