1rosehip / jplist-es6

jPList is a JavaScript library for sorting, pagination and filtering of any HTML structure like DIVs, UL/LI, tables, etc.
https://www.jplist.org/
MIT License
83 stars 39 forks source link

localStorage or sessionStorage + reset button #29

Open Sangvinikis opened 6 years ago

Sangvinikis commented 6 years ago

Is it possible to reset all fields (or ones with data-id) after button press, while using localStorage or sessionStorage? I tryed this and this, but without any luck. Maybe i'm doing it wrong, i have 4 select filters (each one is defined with diferent data-id) and a search field. Reset works fine if i don't use storage or use cookies, but then on page refresh no values are saved.

Sangvinikis commented 6 years ago

My temp solution: function storage() { sessionStorage.removeItem('my-storage'); location.reload(); } my-storage same value as storageName storage() as onclick button

If there is better option, please comment :)

1rosehip commented 6 years ago

Could you please recreate your scenario in https://codepen.io/ or other service so i could check this?

NateGGC commented 6 years ago

Im also having this issue with deep linking. It works when the option is removed but with deep linking true, nothing happens.

burkybang commented 5 years ago

I know this is old, but I wanted to provide the solution for those who need it since it wasn't actually resolved here.

The reason this is a problem is because it's not clearing the storage before resetting the fields. After it resets the fields, it first reads from the storage, and then it sets the fields from the storage. You need to clear the storage first.

For Session Storage

sessionStorage.removeItem('my-storage');
jplist.resetControls();

For Deep Linking

location.hash = '';
jplist.resetControls();
pmacswebteam commented 5 years ago

Hi @burkybang thanks for this help. We are having the same issue with deep linking. Can you please confirm where

location.hash = '';
jplist.resetControls();

should be put/how it should be used to get the reset working?

Thanks!

burkybang commented 5 years ago

@pmacswebteam No prob! It would go in a function for an onclick event just like @Sangvinikis said above.

Here are some examples of ways to achieve this:

<button type="button" onclick="location.hash=''; jplist.resetControls();">

Or:

<button type="button" onclick="resetControls();">Reset Controls</button>

<script type="text/javascript">
function resetControls() {
  location.hash = '';
  jplist.resetControls();
}
</script>

Or with jQuery:

<button type="button" id="reset-controls">Reset Controls</button>

<script type="text/javascript">
$('#reset-controls').on('click', function() {
  location.hash = '';
  jplist.resetControls();
});
</script>