Develop Reference

Select2 issue with adding class to Select2 container in WooCommerce instantiated instance

Ok, I have a WordPress/WooCommerce site and I am using Select2 for my select fields, but it seems WooCommerce also uses it for theirs.
I instantiate mine as such:
$('select').not('[multiple]').select2({
minimumResultsForSearch: Infinity,
dropdownAutoWidth : true,
});
Then I also want to apply a different border colour to fields that already have a value set, so I added this code:
$('select').each(function(e) {
handleSelectSelection($(this));
});
function handleSelectSelections(select) {
var el = (select.next('.select2').length) ? jQuery(select.data('select2').$container) : select;
if (select.val() !== "" && select.val() !== null) {
el.addClass('has-selection');
} else {
el.removeClass('has-selection');
}
}
Please note that all code outside the function is inside a (function($) { wrapper.
Now, this works fine with the select2 fields my code instantiates, however it doesn't seem to work with the ones WooCommerce instantiates.
I have checked the differences in the select fields and I noticed my ones have a data-select2-id attribute, whilst the WooCommerce ones do not.
I did some console logging with jQuery(select.data('select2').$container) on the WooCommerce ones and it appears quite normal however.
Testing the values returns correct and it even goes inside the section where it attempts to add the class, but it just fails to do so.
Edit: The interesting thing is it works if you bind it to a change event, but not this way.
Any ideas on what is happening here?

jQuery: Audio scroll bar using jQuery UISlider

So with my seekbar, image down below, users should be able to jump to a place in the song they desire by changing where the handle is on the seekbar, and the slider handle should change by what part of the song it's in right now.
What is happening right now is this.
This is my slider setup:
$("#progressbar1").slider({
value : 0,
step : 1,
range : false,
min : 0,
max : firstSongDuration,
change : function(){
var value = $("#progressbar1").slider("value");
$("#audio1")[0].currentTime = value;
}
});
This is my setup detecting where in the song it is at currently:
$("#audio1")[0].addEventListener('timeupdate',function(){
firstSongDuration = Math.floor($("#audio1")[0].duration);
setTime(firstSongDuration, $("#endingTime1"));
firstSongCurrently = Math.floor($("#audio1")[0].currentTime);
setTime(firstSongCurrently, $("#currentTime1"));
},false);
and what is happening right now is that when I click to a different spot on the slider, the slider and the audio just get confused and stay where it's at.
What seems to be happening is that when I move to a different part of the slider, firstSongCurrently(my variable for what part of the song it's at right now, integer) gets assigned the new value of the slider. But, in the same function, firstSongCurrently is also being assigned the value of what part of the song it is right now (the second code snippet).
The problem seems to maybe be at the fact that both of those things are in:
$(document).ready(function(){...});
???
I am lost in figuring out how to fix this and have looked into various different posts and articles on how to go about using the slider.
It MUST be simpler than this!!!
Thank you everyone!

Why is gridstack.js swapping my elements around when vue.js removes a node

I am trying to setup gridstack.js to work with my vue components as it does in this knockout example: https://github.com/troolee/gridstack.js#use-with-knockoutjs/.
Here is a codepen of what I have: https://codepen.io/nyoung697/pen/BperoZ
Add 3 textboxes to the form by clicking 'textbox' 3 times.
Delete the top textbox by hovering overtop and clicking the trash can.
Deleting them from the top down works fine (so it seems). The newest element is at the top, as gridstack is adding it to the top. So this is the last element in the array.
Now try resizing the textboxes and deleting them in a random order.
Gridstack is getting confused and swapping elements around on the page. I have no idea why it is doing this. Can someone please help me figure this out? I have been going around in circles for weeks trying so many different things.
I added some console logging to show what id is being referenced. When you delete the elements in order of the last one added, the id in the "destroyed" method is the same as all the other methods/hooks being hit. However if you try to delete them in a random order, the id that is being printed in the destroyed method is different.
destroyed:
Vue.component('ntextbox', {
template: '#textboxtemplate',
props: ['component'],
created () {
console.log('created textbox control');
},
methods: {
removeWidget: function(){
console.log('child remove: ' + $(this.$el).attr('id'));
this.$emit('remove');
}
},
destroyed () {
console.log('textbox control destroyed');
var grid = $('.grid-stack').data('gridstack');
console.log(grid);
console.log($(this.$el).attr('id'));
grid.removeWidget(this.$el);
//console.log(grid);
}
});

ui-grid has duplicate rows

I don't know how this started happening but a ui-grid (project home) on my page (angular SPA) is duplicating 2 rows somehow (and I don't want it to).
Refreshing the page (Chrome) has no effect (I have devtools open, with Disable cache checked).
For reference: I am setting the grid.data to an array with 65 entities, so that count is correct, and if I remove all filters it shows all 65, but actually 67 rows shown (I took the time to count, with the interesting find that alternating rows don't necessarily keep their grey or white color as you scroll up and down).
Here's what I am seeing. If I click row 3 or 4, both are selected and 1 and 2 are unselected. I assume that they have the same generated Id. Note here that it does say that only one row is selected, but 4 are shown!
I can open the page in Firefox and log in, then go to this page which then looks right, so it is either something in Chrome or something in this instance and other users wouldn't see it.
Here is the array from the grid.data:
[{"Name":"Trainer","Desc":"","Type":"string","OptionsCount":6,"$$hashKey":"uiGrid-000W"},
{"Name":"System","Desc":"Practice","Type":"string","OptionsCount":97,"$$hashKey":"uiGrid-000Y"},
{"Name":"EMR","Desc":"Electronic","Type":"string","OptionsCount":67,"$$hashKey":"uiGrid-0010"},
{"Name":"Guideline","Desc":"Guideline","Type":"string","OptionsCount":7,"$$hashKey":"uiGrid-0012"},
{"Name":"Notes","Desc":"Notes","Type":"string","OptionsCount":4,"$$hashKey":"uiGrid-0014"},
{"Name":"Scorecard","Desc":"April 2015","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-0016"},
{"Name":"Scorecard","Desc":"July 2015 ","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-0018"},
{"Name":"Scorecard","Desc":"November 2","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-001A"},
{"Name":"Scorecard","Desc":"December 2","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-001C"},
{"Name":"Scorecard","Desc":"September ","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-001E"},
{"Name":"2012","Desc":"","Type":"money","$$hashKey":"uiGrid-001G"},
{"Name":"2014","Desc":"","Type":"money","$$hashKey":"uiGrid-001I"},
{"Name":"2015","Desc":"","Type":"money","$$hashKey":"uiGrid-001K"},
{"Name":"2016","Desc":"","Type":"money","$$hashKey":"uiGrid-001M"},
{"Name":"2017","Desc":"","Type":"money","$$hashKey":"uiGrid-001O"},
{"Name":"Specialty","Desc":"Primary","Type":"string","OptionsCount":191,"$$hashKey":"uiGrid-001Q"},
{"Name":"Specialty2","Desc":"Secondary","Type":"string","OptionsCount":191,"$$hashKey":"uiGrid-001S"},
{"Name":"Special","Desc":"Special","Type":"string","$$hashKey":"uiGrid-001U"},
{"Name":"Rooming In","Desc":"Rooming in","Type":"date","$$hashKey":"uiGrid-001W"},
{"Name":"HTN","Desc":"Hyper","Type":"date","$$hashKey":"uiGrid-001Y"},
{"Name":"Depression","Desc":"Depression","Type":"date","$$hashKey":"uiGrid-0020"},
{"Name":"Measure","Desc":"measure","Type":"date","$$hashKey":"uiGrid-0022"},
{"Name":"HCC","Desc":"HCC","Type":"date","$$hashKey":"uiGrid-0024"},
{"Name":"Data 1","Desc":"First","Type":"date","$$hashKey":"uiGrid-0026"},
{"Name":"Data 2","Desc":"Second","Type":"date","$$hashKey":"uiGrid-0028"},
{"Name":"Data 3","Desc":"Third","Type":"date","$$hashKey":"uiGrid-002A"},
{"Name":"Term Date","Desc":"Termination","Type":"date","$$hashKey":"uiGrid-002C"},
{"Name":"2015.11","Desc":"11.1.2015","Type":"float","$$hashKey":"uiGrid-002E"},
{"Name":"2016.07","Desc":"7.1.2016","Type":"float","$$hashKey":"uiGrid-002G"},
{"Name":"Status","Desc":"Practice","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-002I"},
{"Name":"Phase","Desc":"","Type":"string","OptionsCount":5,"$$hashKey":"uiGrid-002K"},
{"Name":"EMFMT","Desc":"","Type":"string","OptionsCount":2,"$$hashKey":"uiGrid-002M"},
{"Name":"LAB Data","Desc":"","Type":"string","OptionsCount":2,"$$hashKey":"uiGrid-002O"},
{"Name":"Phase #","Desc":"Performance","Type":"integer","$$hashKey":"uiGrid-002Q"},
{"Name":"Letter 1","Desc":"Performance","Type":"date","$$hashKey":"uiGrid-002S"},
{"Name":"Letter 2","Desc":"Performance","Type":"date","$$hashKey":"uiGrid-002U"},
{"Name":"Letter 3","Desc":"Performance","Type":"date","$$hashKey":"uiGrid-002W"},
{"Name":"I Term","Desc":"","Type":"date","$$hashKey":"uiGrid-002Y"},
{"Name":"CO","Desc":"CO","Type":"bit","$$hashKey":"uiGrid-0030"},
{"Name":"Chart","Desc":"Chart","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-0032"},
{"Name":"Test money","Desc":"","Type":"money","$$hashKey":"uiGrid-0034"},
{"Name":"End-testing","Desc":"","Type":"money","$$hashKey":"uiGrid-0036"},
{"Name":"test1234","Desc":"","Type":"string","OptionsCount":5,"$$hashKey":"uiGrid-0022"},
{"Name":"testAbc","Desc":"","Type":"date","$$hashKey":"uiGrid-003A"},
{"Name":"test456","Desc":"","Type":"bit","$$hashKey":"uiGrid-003C"},
{"Name":"M","Desc":"Meaningful","Type":"string","OptionsCount":2,"$$hashKey":"uiGrid-003E"},
{"Name":"test date","Desc":"","Type":"date","$$hashKey":"uiGrid-003G"},
{"Name":"Service","Desc":"","Type":"string","$$hashKey":"uiGrid-003I"},
{"Name":"R Notes","Desc":"","Type":"string","OptionsCount":17,"$$hashKey":"uiGrid-003K"},
{"Name":"Appointment","Desc":"Appointment","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-003M"},
{"Name":"Connection","Desc":"Type of Connection","Type":"string","OptionsCount":6,"$$hashKey":"uiGrid-003O"},
{"Name":"A","Desc":"","Type":"string","OptionsCount":6,"$$hashKey":"uiGrid-003Q"},
{"Name":"Billing","Desc":"B","Type":"string","OptionsCount":6,"$$hashKey":"uiGrid-003S"},
{"Name":"E Connection","Desc":"","Type":"string","$$hashKey":"uiGrid-003U"},
{"Name":"Addend","Desc":"Data Addend","Type":"string","OptionsCount":2,"$$hashKey":"uiGrid-003W"},
{"Name":"IT","Desc":"","Type":"string","OptionsCount":4,"$$hashKey":"uiGrid-003Y"},
{"Name":"Portal","Desc":"","Type":"string","OptionsCount":5,"$$hashKey":"uiGrid-0040"},
{"Name":"Follow-up ","Desc":"","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-0042"},
{"Name":"Subspecial","Desc":"","Type":"string","OptionsCount":4,"$$hashKey":"uiGrid-0044"},
{"Name":"T","Desc":"Trainerh","Type":"string","$$hashKey":"uiGrid-0046"},
{"Name":"S","Desc":"","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-0048"},
{"Name":"A","Desc":"Date","Type":"string","$$hashKey":"uiGrid-004A"},
{"Name":"Dual","Desc":"Date joint","Type":"date","$$hashKey":"uiGrid-004C"},
{"Name":"Start D","Desc":"","Type":"date","$$hashKey":"uiGrid-004E"},
{"Name":"CO Addend","Desc":"Data COA","Type":"string","OptionsCount":1,"$$hashKey":"uiGrid-004G"}]
Has anyone else experience this issue with ui-grid, and how did you resolve it?
Or can anyone explain why it is creating these extra rows, and consistently only for these 2 rows?

Ok, so here's my answer. I apologize that this wasn't all in the original question, but there was too much code for it to be helpful. I'm writing an answer to be helpful for anyone else that runs into similar issues and gets stuck debugging (as I see that sharing as the purpose of SO).
For background, a row is supposed to get selected during the page load process if the url has an Id for the row as a parameter.
In the code the data is loaded into the grid.data. Then if the url has a parameter a loop executes on grid.data to find the matching row(s). If it is found, then it would call
gridApi.grid.modifyRows(grid.data).then(action);
where the action would be something like
$timeout(function () {
// Do this after the columns and rows processors have finished and it is all rendered.
selectRows.forEach(function (row) {
gridApi.selection.selectRow(row);
});
gridApi.core.scrollTo(selectRows.pop(), grid.columnDefs[0]);
}, 100);
What is working for me now is to skip the "gridApi.grid.modifyRows" and just call the action. I think that code was in there earlier to update the grid if it had rendered before the data was retrieved and assigned to grid.data, but that is taken care of by waiting for onRegisterApi to fire, then assigning the grid.data.

How to refresh DataTables after call to page event?

Here is my scenario ...
I am using pagination with DataTables. My first column is css styled based upon data that is passed in. So, I display the correct colored icon for the property of the item in the table. Everything on page 1 displays correctly. Just doing the basics, everything on further pages does not get displayed because it is removed from the DOM at that time.
So, I did $('#my_id').on('page.dt', function() {perPageFunctionCall();}).dataTable(so on an so forth)}; to call a function which selects the correct colored flag.
When I click on page 2, nothing gets updated. I click on page 1 again and it redisplays the 1st page correctly. I click on page 2 a second time now and it displays everything correctly this time.
So what is causing the display not to update with my new css the 1st trip but to display properly on subsequent trips? Is there someway to refresh the element or the data table after I am done with my css manipulation?

Well it is one of two things:
Either it is
1: I added
.on( 'order.dt', function () { perPageFunctionCall(); } )
.on( 'search.dt', function () { perPageFunctionCall(); } )
in addition to my page function call.
But more likely everyone's favorite reason:
2: Caching
In either case, it does work flawlessly now as expected.

for refresh resp. table :
var path = "/server_processing.php";
var dt = $('#tableid').DataTable();
dt.clear();
dt.draw();
dt.ajax.url(path).load()