We Keep Coding

How to clear saved state of datatables when move to another page

My website has number if data tables, so I need to save datatable state when refreshing or reloading the same page only. But I need when user going to another page clear all the states of data tables.
I have tried using button click event,
$(document).on('click', '.clear_data_table_state', function(e) {
var allDataTables = $('.dataTable').DataTable();
allDataTables.state.clear();
allDataTables.destroy();
});
If I use this method, then need to apply this class to all the clickable items. Any possibility to do this with same location that initialized the datatable.
And also I tried this method also,
var table = $('#sample-data-table').DataTable({
stateSave: true,
"pageLength" : 10,
"lengthMenu": [10, 20, 50, 75, 100, 500],
"fnDrawCallback":function(){
if(table.row().data()===undefined){
table.state.clear();
}
}
});
But I couldn't get any best solution for this problem

b-toast notification is overlay in modal in bootstrap-vue in VUEJS

This is picture
I'm using $bvToast.toast() for using toast notification.
This is some line of code
this.$bvToast.toast('Hit enter to submit\n Click outside to cancel', {
title: 'Variant info',
autoHideDelay: 2000,
appendToast: true,
solid: true,
toastClass: {zIndex:9999999}
})
I think it's kind of having problem with z-index but I do not how to override z-index for b-toast? I saw some property toastClass, I set toastClass:{zIndex:9999}, but it still not work.
Edit 1:I just add toastIndex in data and use it like in -pic 2-. Is that right? I'm not familiar with syntax?
full pic
pic 1
pic 2

Why is bxslider duplicating my divs

My designer put a bxslider to scroll through 3 divs nicely on my page.
When the page runs, in the html I see it generates 6 divs on the page. It shows div 3, div2, div1, div3, div2, div1.
Just because the duplicated fields on my page now mess up my programing.
Is that neccesary, and is there any way I can touch the code that it shouldn't duplicate my divs?
The page is full of complex code , with an ajax passing the data-serialize to a post form.
Becuase it's all duplicated, now all fields are coming through as 'value,value'. Therefore it's not giving me accurate respones, and well as undefined when it's supposed to be numeric.
My form posts looks like this:
function submitCart () {
$.post(
"scripts/savecart.asp",
$("#form1").serialize()
);}
How could I add that not bx- to it?

As commented in the source code of bxSlider:
if infinite loop, prepare additional slides
So I was able to fix this by adding infiniteLoop: false to the config object:
$(".js-slider").bxSlider({
infiniteLoop: false
});

BxSlider duplicates elements to allow infinite scrolling, etc. For example, say you only have two elements in your slider. Element one might be sliding out on the left, but also sliding in on the right. Therefore, duplicates are required.
If this is a problem, you can usually interact with the duplicates using their bx-clone classes. If you could clarify the actual problem, we could probably give more specific advice.
Update: To eliminate cloned elements from your set, try something like:
$('.bxslider li:not(.bx-clone)')....

I had such problem with bx-clone
I want to use it for an image gallery. So I had a thumbnail image slider and for slider I used bx-slider and on each click on small image , that image in bigger size must show in a div , But on bx-clone clicked nothing happened
I solved that problem with this :
var slider = $('.bxslider').bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 92,
moveSlides: 1,
pager: false,
slideMargin: 10,
onSliderLoad: function(){
$('li.bx-clone').click(function() {
/** your code for bx clone click event **/
});
}
});

Adding to #antongorodezkiy's answer, there is a way to have infiniteLoop: false and still get a non-stopping slide changing: using the onSlideAfter event of the last slide you can, after a few seconds, go back to the first slide and re-start the auto mode:
var pauseTime = 4000; //Time each slide is shown in ms. This is the default value.
var timeoutId;
var slider = $('.bxslider').bxSlider({
auto: true,
infiniteLoop: false,
pause: pauseTime,
onSlideAfter: function ($slideElement, oldIndex, newIndex) {
if (newIndex === slider.getSlideCount() - 1) { //Check if last slide
setTimeout(
function () {
slider.goToSlide(0);
slider.startAuto(); //You need to restart the "auto" mode
},
pauseTime //Use the same amount of time the slider is using
);
}
else { //In case the user changes the slide before the timeout fires
clearTimeout(timeoutId);
slider.startAuto(); //Doesn't affects the slider if it's already on "auto" mode
}
}
});
The difference between this solution and the infiniteLoop: true option is that instead of smoothly transitioning back to the first slide as if it was the next, the slider quickly "rewinds" until reaching the first slide.

for above query: Is it possible to keep having the infinite loop, but remove the clones?
try using below code: if more than 1 item infiniteloop: true else :false
infiniteLoop: ($j("...selector...").length < 2) ? false : true,

Just to answer here, so if some one is struggling and cannot fix the duplication issue. I was facing the same problem that all of my HTML from my page was duplicating inside the first slide under the image tag like bellow:
<img src="public/admin/scr3.png" ><div>..... all of my page HTML...</div></img>
I just found that I was writing the image tag not properly
Meaning my code was something like this for image tag
<img src="public/admin/scr3.png" >
I just replaced my image tag with valid HTML like bellow:
<img src="public/admin/scr3.png" />
and it fixed the content duplication issue.
Hope it will help someone.
Cheers!

I´m not sure if it´s the same issue I was facing, but here´s my case:
My code was using bx slider together with fancybox. And it was duplicating my slides. The solution was to put the secodary code (fancy box), which was generated in my image loop, inside the tag. That did it for me.

ExtJs grid.Panel store: keep scrollbar position after load/reload

I'm using grid.Panel in Sencha ExtJs 4.0.2a and I reload a Json Store every 60 seconds.
I was wondering if there is a way to preserve the position of the scrollbar after a data load.
So that the user can continue to look at the records he was looking before the load..
I reload the data in the grid using a Task:
var task = {
run: function(){
Ext.getCmp(panelGridId).getStore().load({
//Callback function after loaded records
callback: function(records) {
//Hide grid if empty records
if (Ext.isEmpty(records)) {
Ext.getCmp(panelGridId).setVisible(false);
}
else {
if (Ext.getCmp(panelGridId).isHidden()) {
Ext.getCmp(panelGridId).setVisible(true);
Ext.getCmp(panelGridId).doComponentLayout();
}
}
}
});
},
interval: 60000 //60 seconds
};
Ext.TaskManager.start(task);
After the data load the scrollbar position is reset to the top..
Q: Is there a way to maintain the scrollbar position after the data load?
Thanks in advance!

Try this bad boy to preserve scroll position on refresh:
http://docs-devel.sencha.com/extjs/4.2.1/#!/api/Ext.grid.View-cfg-preserveScrollOnRefresh
This works for me on my tree view.
viewConfig: {
preserveScrollOnRefresh: true
}

Here's how you would use preserveScrollOnRefresh in your Grid :
Ext.define('js.grid.MyGrid', {
extend: 'Ext.grid.Panel',
viewConfig: {
preserveScrollOnRefresh: true
}
Here's a JSFiddle which demonstrates this :
http://jsfiddle.net/cdbm6r0o/7/
However when you select a row it doesn't seem to work quite right. I am not sure if this is a bug.
The 'refresh' event is triggered from this code :
grid.store.loadData(dataToLoad);
I'm unaware of any other events which trigger a 'refresh'
Additional Notes :
I had the Ext.toolbar.Paging as a require. Even though I didn't use it, it screwed up the scroll preserve when I had one or more rows selected, so make sure you remove the Paging from your requires.
The scroll preserve does not appear to work if I use the bufferedrenderer plugin on the table at the same time.
tablePanel.getView().focusRow(recrow) is also interesting to look at, but also does not work with bufferedrenderer.

You can use the preserveScrollOnReload view config property:
viewConfig: {
preserveScrollOnReload: true
},

Infinite Scroll functions only in the front page

I'm using the infinite scroll plugin in a tumblr blog and everything works as it should, provided the user is in the front page- for example: "{someblog}.tumblr.com".
Starting from "{someblog}.tumblr.com/page/2" and so on, the plugin doesn't seem to load at all (it doesn't hide the navigation elements).
initialize
Here's the code I use to call it:
$('#container').infinitescroll({
loading: {
finished: undefined,
finishedMsg: "Finished",
img: "preloader.gif",
msg: null,
msgText: "Loading...",
selector: null,
speed: 'fast',
start: undefined
},
state: {
isDuringAjax: false,
isInvalidPage: false,
isDestroyed: false,
isDone: false, // For when it goes all the way through the archive.
isPaused: false,
currPage: 1
},
callback: undefined,
debug: false,
behavior: undefined,
binder: $(window), // used to cache the selector
nextSelector: "#next a",
navSelector: ".navigation",
contentSelector: "#container", // rename to pageFragment
itemSelector: "div.post",
animate: false,
pathParse: undefined,
dataType: 'html',
appendCallback: true,
bufferPx: 400
},
...
edit: I enabled debug information and I got the following info:
({0:"Sorry, we couldn't parse your Next (Previous Posts) URL. Verify your the css selector points to the correct A tag. If you still get this error: yell, scream, and kindly ask for help at infinite-scroll.com."})
({0:"determinePath", 1:"/page/4"})
({0:"Binding", 1:"bind"}
It seems that it does find the address to the next page-"/page/4" (since I was on page 3). But it can't "parse" it for some reason?
Is it possible that the plugin can only function on page one, where the link to next page contains a "2"? If so, how can I override it?
Thanks a lot in advance!

Thanks to #graygilmore I figured it out. This is the line that needs to be added to the code:
pathParse: function() {
return ['http://{Name}.tumblr.com/page/', '']
},
Note that {Name} is a Tumblr variable and needs not be changed- Tumblr replaces it automatically.
Additionally- this line should be added in the state: {...} block:
currPage: {CurrentPage}
(Where as in the example in my question above I simply set it to "1").
{CurrentPage} is a Tumblr variable as well, so it's being replaced automatically with the current page number, for every page being viewed.
Now Infinite-Scroll loads properly on every page of the blog, which is especially useful when wanting to create a "load more posts" button, which gives the user a choice between regular (paged) navigation and infinite-scrolling.