We Keep Coding

How to get these parameter values in javascript from select2 selecting event?

I am storing some custom values whenever a user selects an option in 'selecting' select2 event:
$(select2Elm).on('select2:selecting', async function (e) {
e.params.args.data.added = true;
e.params.args.data.removed = false;
});
the above select2 is located inside a datatable's row, so when I click on the row's Save button I call this function and now I dont know how to get those custom values I have stored once selected:
function saveGroupChanges(elm) {
var select2Elm = elm.closest('tr').getElementsByClassName('typeselectUsers')[0];
}
since I am using datatables I need to use closest in order to get the values of the current row.

Get the value of a Combobox select in WP editor

In a Wordpress installation I have a custom post type and a metabox with custom post_meta fields.
Parent dropdown field in Gutenberg's sidebar used to be a <select> element. I have some scripts that onChange trigger the hide/show of different fields making them conditional, depending whether the page being edited is a parent or child:
$(document).on("change", ".editor-page-attributes__parent select", function(){
toggleFields();
}
The options in the <select> have IDs as values so I could get Title and ID for the selected parent and dynamically show some data in the metabox for my user:
var dropdown = $('.editor-page-attributes__parent select');
var parentName = dropdown.find(':selected').text();
var parentId = dropdown.val();
Since v5.6 Wordpress has replaced that select element with a Combo Box. I have tried to get the same data onChange and only had some success using blur:
$(document).on("blur", ".editor-page-attributes__parent .components-combobox-control__input", function(){
toggleFields();
var parentName = dropdown.val();
})
I was only able to get the page title since this combobox now has an input element that's missing IDs, like this one:
<input id="components-form-token-input-0" type="text" class="components-combobox-control__input components-form-token-field__input" value="Page Name Here">
I have also tried doing an Ajax, to retrieve the ID using get_page_by_title() but it does not always work because pages might have the same title and editor also adds dashes and spaces in names for hierarchy levels.
How can I get the associated ID of the page selected in the Parent Combobox on change?

After some time reading the Editor Documentation I found the proper solution. This is how you can listen to changes and get the id of the Parent Combobox select in the WP Editor:
wp.data.subscribe( function () {
var newParent = wp.data.select('core/editor').getEditedPostAttribute('parent');
console.log(newParent);
} );
wp.data.subscribe is called every single time a change occurs in the current state while editing posts in the editor, so the listener function is called every single time. We can avoid that with a simple variable check when there is an actual change to the field we want. It behaves as Redux subscribe without unsubscribe and only one listener.
To also check for the current post type we are editing we can use getCurrentPostType:
wp.data.select('core/editor').getCurrentPostType();
This is the full code for this problem for future reference:
if (wp.data.select('core/editor').getCurrentPostType() == 'cpt_name') {
const getPostParent = () => wp.data.select('core/editor').getEditedPostAttribute('parent');
// set initial parent
let postParent = getPostParent();
wp.data.subscribe(() => {
// get current parent
const newPostParent = getPostParent();
// only if parent changes
if( postParent !== newPostParent ) {
// Do what we want after parent changed
toggleFields();
}
// update the variable
postParent = newPostParent;
});
}

JqGrid - Add events on addRow fields

Using jqGrid, is there any way to update the values of a select field once the add Form dialog has been loaded? I need to update the list of values on the select field based on data the user is entering on a another field in the same add Form dialog.
Thanks!
EDIT: This is the model structure I have
{name:"Name",index:"Name", width:30,editable: true,editoptions:{size:"30",maxlength:"30"}},
{name:'LastName',index:'LastName', width:30,editable: true,editoptions:{size:"30",maxlength:"30"}},
{name:'Id',index:'Id',width:30, editable:true, sorttype:"text",editoptions:{size:"30",maxlength:"30"}},
{name:'Email',index:'Email', width:40, editable: true,editoptions:{size:"40",maxlength:"30"}, editrules:{custom:true, custom_func:emailFormatter}},
{name:'Option1',index:'Option1', width:20, editable: true,edittype:"select",editoptions:{value:updateOption1Values}}
I figured out how to attach an event to the Id field.
afterShowForm: function (e) {
$("input#Id").blur(function() {
updateOption1Values();
$("input#Option1").selectmenu("refresh");
alert("Blur!");
});
}
Now what I need is to update the Option1 select box. I call updateOption1Values and manipulate the values but the select control is not showing those changes

How to rebind a Kendo ListView after changing template

I'm attempting to rebind the listview data after changing the template, based on a DropDownList value. I've included a JSFiddle for reference. When I rebind currently the values in the template are undefined.
Thanks!
JSFiddle link
I was thinking the best way to handle it would be in the 'select' or 'change' function:
var cboDetailsCategory = $("#detail").kendoDropDownList({
data: [
"All",
"Customer",
"Location",
"Meter",
"Other"],
select: function (e) {
var template = $("#" + e.item.text()).html();
console.log("template", template);
$("#details").html(template);
},
change: function (e) {
},
please refer to the JSFiddle link and this graphic as a visual
Here is a lengthier workflow:
User completes a name search and clicks a search button.
Name results are populated in a listview, rendered individually as button controls using a template.
User then clicks one of the name results (shown as the button text).
A dropdownlist of categories ('All' <--default , 'Location', 'Customer'...) gives the user the ability to target what subject of data they want to see. 'All' is the default, showing all details about the selected name.
So by default the 'All' template is populated.
If user wants to see the 'Location' details (template) they select it from the dropdownlist.
The template shows but the values are all blank. The only way to populate it is to click the name (button) again.
I want to remove the need for having to re-click the button (name) to populate the template ('Location', etc...).
I have put together a JSFiddle showing the structure. Though due to the data being private and served over secure network I cannot access it.
Refer to JSFiddle:
I believe the issue is that the onclick event grabs the data-uid and passes it to the initial default template (named 'All' but it's not included in code as it's lengthy). When the user changes the dropdownlist (cboDetailsCategory) and selects a new template I lose the data.
Thanks for your help. I'm really stuck on this and it's a current show stopper.

There isn't an officially supported way to change templates, without destroying the listview and rebuilding it. However, if you don't mind poking into into some private api stuff (be warned I can't guarantee that kendo won't break it without telling you) you can do this
var listview = $("#MyListview").getKendoListView();
listview.options.template = templateString;
listview.template = kendo.template(listview.options.template);
//you can change the listview.altTemplate the same way
listview.refresh(); //redraws the elements
if you want to protect against unknown API changes you can do this, which has A LOT more overhead, but no risk of uninformed change (untested!)
var listview = $("#MyListview").getKendoListView(),
options = listview.options;
options.dataSource = listview.dataSource;
listview.destroy();
$("#MyListview").kendoListView(options);

Here's the solution, thanks for everyone's help!
JSFiddle Link
The issue was where I was setting the bind:
$("#list").on("click", ".k-button", function (e) {
var uid = $(e.target).data("uid");
var item = dataSource.getByUid(uid);
var details = dropdown.value();
var template = $("#" + details).html();
$("#details").html(template);
kendo.bind($("#details"), item);
currentData = item;
});

Using data attributes to filter a select box (using third party JS filtering code)

I am using this relatively simple JS program:
http://www.barelyfitz.com/webdesign/articles/filterlist/
The program just filters a select box using a text box.
However, I want to jquery and HTML5 data attribute which is different how it was originally used. I give my text box filterer a data attribute:
<input id="filter_text" name="filter_text" data-filterable="myselect"
type="text" />
I use the following jquery to get the name of the select box that is to be filtered and then filter the select box:
$(function() {
$('input[data-filterable]').keyup(function() {
select_box_name = $($(this).data('filterable'))[0];
filter = new filterlist(select_box_name);
filter.set(this.value);
});
});
which NEARLY works. You can filter but if you press backspace to de-filter then nothing happens i.e. it doesn't 'unfilter'.
It must be something really small!!
Thank you :).

You need to initialize the filter outside the event handler:
$(function() {
$("input['data-filterable']").each(function() {
var filter = new filterlist($($(this).data('filterable'))[0]);
$(this).keyup(function() {
filter.set(this.value);
);
});
});

On every keyup you're reinitializing filter. So you can only filter on the select as it is right when you press a key. Move the initialization of the filter out of the keyup event and it's working.
Here's a fiddle.