We Keep Coding

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;
});
}

Enable Two-Way data binding on Angular 6 for input type checkbox inside *ngFor

Problem: Two-way data binding for checkbox in *ngFor directive
I have a template driven form in which I am using *ngFor to loop over few radio buttons. Based on one key, I show checkbox next to radio buttons in disabled state on page load. If user clicks on a radio button and if it has a corresponding checkbox, I enable its state. I can then click on checkbox.
However, I want to be able to disable previous checkbox and reset its value when user clicks on another radio button and thus pass the correct form values. (I show them as json in beloe code demo url)
Demo code example: https://stackblitz.com/edit/angular-ba8pfz
If you see the demo code, I should be able to reset the checkbox if I toggle between "Marvel Heroes" and "Dc Heroes"
Appreciate your time and suggestions.

You cannot simply set the checked attribute to false as that sets the content checked attribute to an empty string - which is the equivalent of true or checked. Hence the check mark goes away, but the Boolean state of the control is not changed. Have to change the Boolean state of the control. One simple way to do that is to generate a click or change event on the control.
Try this:
enableRecursive(event, recursiveChk: boolean) {
let clickEvent = new MouseEvent('click');
this.recursiveChk.map((elem) => {
if (elem.nativeElement.checked) {
elem.nativeElement.dispatchEvent(clickEvent);
}
elem.nativeElement.disabled = true;
if (`recursive_${event.target.id}` === elem.nativeElement.id) {
elem.nativeElement.disabled = false;
}
});
}

Semantic UI react dropdown search allowAddition, how to distinguish the addition in onchange event?

In my program, if user select items in dropdown, the onchange event will trigger api call to autofill the rest of fields. But if user add its own item in dropdown, I need to distinguish it and do my onchange event a little differently.
But it seems like the onchange event props don't give out any info on whether this selection (the value field) is an addition. The onAddItem function happens after onchange so it won't help either. What should I do?

The onChange event doesn't currently indicate if the value is new, but you can easily determine that by looping through the options.
dropwDownChangeHandler(event, data) {
let optionIsExisting = false;
data.options.forEach(option => {
if (option.value === data.value) optionIsExisting = true;
});
console.log(optionIsExisting);
}

Fire change-event manually

Hey I've got a problem with fireing a change-event manually.
So I have a selectOneMenu (i'ts like a dropdown in jsf) with different values.
If I choose a value of this dropdown-list, a datatable should be updated. This works correctly, if i choose this value manually.
Now there is a case, where I need to insert a new value to the selectOneMenu. This new value gets selected automatically, but the change-event to update the datatable doesn't get fired...
So basically I have this button to save a new value to the selectOneMenu which then gets selected correctly, but the datatable doesn't get updated, which is why I tried to write the function fireChange() and gave that to the oncomplete of the button:
<p:commandButton ajax="true" id="seatingPlanSave" actionListener="#{EventAssistentController.createSeatingPlan}" value="#{msg.save}" update=":createEvent:EventSeatingPlan, :createEvent:ticketTypePrices" oncomplete="fireChange()"/>
For the fireChange()-function, i tried a few different things:
function fireChange() {
var element = document.getElementById("createEvent:EventSeatingPlan_input");
element.change();
}
function fireChange() {
var element = document.getElementById("createEvent:EventSeatingPlan_input");
$(element).trigger("change");
}
function fireChange() {
if ("fireEvent" in element)
element.fireEvent("onchange");
else {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
element.dispatchEvent(evt);
}
}
But none of these work :(
Can you please tell me how I can achieve this?
Thanks, Xera

You didn't tell anything about the HTML representation of createEvent:EventSeatingPlan_input while that's mandatory for us (and you!) in order to know how to let JS intercept on that. You didn't tell either if you were using <h:selectOneMenu> or <p:selectOneMenu>, so we can't take a look ourselves in the generated HTML representation. The former generates a <select><option> while the latter generates an <div><ul><li> which interacts with a hidden <select><option>. Both representations of dropdown menus require a different approach in JS. Also, information about how you're registering the change event handler function is mandatory. Is it by hardocing the onchange attribute, or by embedding a <f:ajax> or <p:ajax>?
In any way, based on the information provided so far, I'll guess that you've a
<h:selectOneMenu ...>
<f:ajax render="dataTableId" />
</h:selectOneMenu>
which will generate a <select onchange="..."><option>.
As per your first attempt:
function fireChange() {
var element = document.getElementById("createEvent:EventSeatingPlan_input");
element.change();
}
This will fail on <h:selectOneMenu> because HTMLSelectElement interface doesn't have a change property nor method. Instead, it is onchange property which returns a event handler which can directly be invoked by appending ().
The following will work on <h:selectOneMenu>:
function fireChange() {
var element = document.getElementById("createEvent:EventSeatingPlan_input");
element.onchange();
}
However this will in turn fail in <p:selectOneMenu>, because it returns a HTMLDivElement instead of HtmlSelectElement. The HTMLDivElement doesn't have a onchange property which returns an event handler. As said, the <p:selectOneMenu> generates a <div><ul><li> widget which interacts with a hidden <select><option>. You should be registering this widget in JS context and then use its special triggerChange() method.
So, given a
<p:selectOneMenu widgetVar="w_menu" ...>
<p:ajax update="dateTableId" />
</p:selectOneMenu>
this should do
function fireChange() {
w_menu.triggerChange();
}

Update field with jquery don't update observable

I want to say hello to the stackoverflow community.
I've just started using knockout a few days ago.
Right know I'm using it to make a dynamic menu builder for a CMS I'm working on.
Here is the code: http://jsfiddle.net/dnlgmzddr/HcRqn/
The problem is that when I choose an element from the select box, the input field update as I expect, but the observable doesn't reflect the change. Because of that, the add button is not enabled.
What am I missing? How can I fix it?
Thank you.

When you populate the url field, you would need to trigger the change event to get the observable to be upated. So, you could do:
$("#url").val('/pages/' + id).change();
Another option though that is more in the Knockout spirit is to use a binding on your select. In this case, you would likely want to populate an observable with that value, then use a manual subscription to default the formatted value into the input field.
this.itemUrl = ko.observable();
this.selectedUrl = ko.observable();
this.selectedUrl.subscribe(function(newValue) {
if (newValue) {
this.itemUrl("/pages/" + newValue);
}
}, this);
Then, bind your select to selectedUrl:
<select id="pagedList" data-bind="value: selectedUrl">
<option value=""><option>
<option value="test">Test</option>
</select>
Here is a sample: http://jsfiddle.net/rniemeyer/HcRqn/21/
You could also eliminate the extra observable and manual subscription if the "value" of your options was the url.

I can't see anywhere in your code where you are actually enabling the button when a field is selected. So I might be missing something, but just enable the button on change. Like the following:
function LoadMenu() {
$("#pagedList").change(function () {
var id = $(this).val();
$("#url").val('/pages/' + id);
// remove the disabled attribute here
$('button.space').removeAttr('disabled');
});
}