Trigger HTMX call on select2 change event - javascript

I have two select fields in my form. The first is a select2, the second is a regular HTML one.
I want to replace the second one with HTMX when I select something in the first. In addition, I need to know what was selected in the first one.
And, because I'm using HTMX I want to avoid loads of ugly JS/jQuery 👻
I know that I can listen to the event select2.select but my HTMX never triggers.
<select id="second-select" hx-get="/my-url" hx-trigger="select2.select from:body">...</select>
I also tried hx-trigger="select2.select from:#select1".
Any ideas what I might be doing wrong and how I can pass the selected value from the first select?
Thx!
Ronny

Select2 is a jQuery library, therefore it uses the jQuery event system, not the vanilla JS events, so HTMX cannot catch them by itself. You need to create an event bridge between Select2 and HTMX. In the following example we translate the select2.select jQuery event to a vanilla JS event and dispatch it to the second select element triggering the HTMX request.
<select id="second-select" hx-get="/my-url" hx-trigger="select2.select">...</select>
<script>
$(document).ready(function () {
// Init Select2 on #first-select element
$('#first-select').select2();
// Attach to 'select2:select' jQuery event from Select2
$('#first-select').on('select2:select', (e) => {
// Dispatch 'select2:select' vanilla JS event to trigger HTMX
let event = new Event('select2:select');
document.querySelector('#second-select').dispatchEvent(event);
});
});
</script>

Related

Add javascript change trigger to Primefaces selectonemenu

I have a quite complex form built with PrimeFaces 4.0 and i want to add some client-side jQuery/Javascript-Code which should be triggered if the value of any of the form input fields changes.
For <p:inputText> and <p:selectBooleanCheckbox> I can register an event handler with $(this).change(handler);
How can I register this handler for a <p:selectonemenu>? Registering the handler on the Element itself or the embedded _input-Field doesn't trigger the handler when I change the value.
Note: I do not want to set the handler directly on the Primefaces-Tag, but dynamically via jQuery.
Any help is greatly appreciated, thanks!
Found a solution:
Primefaces creates a seperate panel for displaying the options which gets displayed if the user clicks on the <p:selectonemenu>. The id of this panel is the id of the selectonemenu + "_panel". As it is a panel and not an input of any kind click() must be used instead of change()
Example:
$(PrimeFaces.escapeClientId($(this).attr('id')+"_panel")).click(handler);
Obviously, in the handler you have to switch back to the menu with something like this:
if($(this).attr('id').endsWith('_panel')){
widget = $(PrimeFaces.escapeClientId($(this).attr('id').substring(0,$(this).attr('id').length - '_panel'.length)));

Select drop-list item without triggering onchange event?

I want to populate a drop-list with several items and select a default item:
<select onchange="DoSomething(this)">
<option value="abb">This is the second item</option>
<option value="abc" selected>This is the third item</option>
etc...
</select>
However I don't want the onChange event to fire (or I want the code triggered by onChange to be ignored) until the user selects an item. At the moment the onChange event fires as the page loads and the selected item is chosen by default.
Can I wrap this code in PHP to achieve this - if so how?
?!
Manipulating the HTML DOM directly in JavaScript doesn't fire events. You can even call myForm.submit() and the browser will not fire the form's onsubmit event, therefore bypassing client-side onsubmit validation.
I don't know what you've tried, but this is one way to select for example the first item of the drop-down list:
document.getElementsByTagName('select')[0].getElementsByTagName('option')[0].selected = true;
(http://jsfiddle.net/Jawh6/)
Crude, I know. Usually your forms and fields would be named or otherwise identified so you can address them more excplicitly: e.g. document.myForm.mySelect.options[0].selected = true;
Since your PHP is already setting the 'selected' attribute on the option (or your question isn't very well tagged), this would be the best place to set the default option when the page loads, that requires no JavaScript at all.
If you're interested in how to get PHP to write out the HTML for a select element and correctly assign the selected attribute to the intended option, I reckon you need to write a new question to attract the PHP folk.
Either you have other calls to your DoSomething function, or you've oversimplified your example and you're actually using a framework to bind the event handler to the field and maybe you accidentally called your function instead of assigning it, e.g.:
mySelect.onchange = DoSomething(); // oops, this calls DoSomething right away.
mySelect.onchange = DoSomething; // this sets DoSomething as the event handler.

Get onchange event if I don't write in a input text

I have a table and when I click in a row the data of this row is copy to some input text. I have an empty select combobox and this will fill with one thing or another depend the content of the input. I'm ussing the event onchange for do this but it doesn't work because I'm not writing in the input. I put here the relevant code.
<td><input type="text" id="club" value="" onchange="load()"/></td>
function load()
{
var club=document.getElementById("club").value;
alert(club);
}
Pretty and straight forward way of doing this is to use bindings as in some reactive libraries like knockoutjs.
A quick hack is to call your load function in the click handler for a row after all your processing. ( copying text n all).
Firstly, the script in question has to be withing tags if you're defining it inline with html (which I don't recommend)
secondly, you'll need to prepend your function call with javascript: e.g.
onchange="javascript:load()"
I would recommend looking into event listeners or jquery instead, however.
document.getElementById("club").onchange();
Should do the trick. You can fire these events manually!

How to trigger the HTML Select onClick event (activates select dropdown with options)

I want to know how to trigger the onClick event of any select(html combobox element).
I tried to do $('#MySelect').click(); using jQuery and tried document.getElementById('MySelect').click(); using pure javascript.
But the two don't fire the dropdown event that have the options of the select.
Ps: i have sure that selector $('#MySelect') exists.
are you looking for this
document.getElementById("MySelect").selectedIndex=3;
Programatically triggering a click event will only run the defined click handler for that element. As you say in the comments, you have no such method defined, therefore no action will take place.

onchange wont fire after programmatically changing html select dropdown

I have a select inside HTML
<select id="league" name="league">
which I'm listening for changes inside my javascript.
var league = dojo.byId("league");
dojo.connect(league, "onchange", function (evt) { //do stuff }
Which works fine.
However I have a link that I can click which updates the select:
League
The link works as it updates the selected value of the select with the following function.
function updateSelection(NewLeague){
dojo.byId('league').value = NewLeague; // works
dojo.byId('league').onChange; //this isnt working
//dojo.byId('league').onChange(); //this throws: TypeError: dojo.byId("league").onChange is not a function
}
My problem, as I've read through other stack posts is that programmatically updating the value wont trigger onChange, thus I need to call onchange in the code (shown above). As per the comments inline, the onChange isn't being triggered or throws an error. My first thought that it has something to do with the dojo.Connect which listens for onChange, but I havent found any information that says I cant do this, nor any explanation how to get around it.
Any ideas?
Select onchange doesn't fire for programattic changes, you need to fire it yourself with league.onchange();
As noted by #Greg, the call should be lowercase.
Additionally, I don't know if dojo has a trigger method, but in jQuery this would be done as jQuery('#league').trigger('change').
Depending on your version of dojo you may also want to check: http://dojotoolkit.org/reference-guide/1.8/dojo/connect.html
Have you tried just calling the select by it's id using normal js?
document.getElementById('league').onchange.call();
As others have said, you need to trigger the event yourself, just setting the value does not do that. See the code on How to trigger event in JavaScript? to see how in a cross-browser way.

Categories