I am using EasyAdmin Bundle, which seems to use Select2 for internal select form fields. I am trying to capture the onChange event, but I cannot figure out why the following code does not work:
$('#mySelect2Id').on('change', function () {
console.log($(this).value());
})
Unfortunately, I cannot see anything within the console when I change the value of a Select2. Has someone experienced similar issues? Thanks for your help.
I have fixed myself.
It looks like the problem appears if you import jquery in webpack, together with EasyAdminBundle.
Related
I have a select2 box in bootstrap modal, I want to change the value of the select2 box but it didn't work.
I tried every single solution in previous posts and results but none of them got it work.
I use select2 4.0.2, I tested:
$('#select_id').val('val').trigger('change.select2');
$('#select_id').val('val').trigger('change');
$('#select_id').val('val').change()
It works one or two times then it stops working (randomly)
It works fine only when I change the select2 back to 3.x.x
$('#select_id').val('val').trigger('change');
is the right way, see here
$('#select_id').select2('val', selectedValue);
For Select2 with Ajax call, I struggled with lot of options, but none worked. Then i came to following solution, which works like charm
$("#select_id").html($("").val('val').text('text')).trigger("change");
To programmatically select an option/item for a Select2 control, use the jQuery
$('#mySelect2').val('1'); // Select the option with a value of '1'
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed
You can also pass an array to val make multiple selections:
$('#mySelect2').val(['1', '2']);
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed
I have used the following code in 4.x.xx version and it is working
$('#select_id').val('val').select2();
If you, like me, have added a custom handler for the select2:selecting event the correct complete answer to changing a value and triggering the custom select2 event would be:
$('#select_id').val('val').trigger('change').trigger({
type: 'select2:event_name', // It worked for me with select2:selecting and select2:select
params: {
args: { // Only use 'args' if using select2:selecting, select2:select does not use it
data: varWithEventData
}
}
});
For those who facing an issue like this:
If you're using multiple select elements and have a common event handler (like $(".mySelect2Inputs").click(...) ) when you do $('#mySelect2').trigger('change') the click event handler is gonna trigger multiple times ($(".mySelect2Inputs").length times).
To prevent this situation, you must use $('#mySelect2').trigger('change.select2') (attention to .select2 namespace!).
From the select2 docs:
https://select2.org/programmatic-control/events#limiting-the-scope-of-the-change-event
It's common for other components to be listening to the change event, or for custom event handlers to be attached that may have side effects. To limit the scope to only notify Select2 of the change, use the .select2 event namespace:
$('#mySelect2').val('US'); // Change the value or make some change to the internal state $('#mySelect2').trigger('change.select2'); // Notify only Select2 of changes
I have a wicegrid that I update via AJAX(based on the value selected by a drop down). Problem is that after the update, the filters and pagination stops working on left-mouse click(works on right click!). Does anyone have any idea why this is happening?
I have used wicegrid on a number of pages in the same project(without AJAX update), and this issue does not appear.
Try this (assuming you use jquery):
$( document ).ajaxComplete(function() {
put code you want to run;
});
probably your script is not working because it's in document.ready scope.
I had the same issue and found a straightforward workaround for this issue - call the initWiceGrid() function after you refresh the grid.
first of all I try to use proper "language" but I am not a programmer. That said...
I don't seem to be able to get jquery mobile to work properly.
When I try to change document.ready(function() { ... })
to
document.on('pagecreate', function(){ ... })
I do not get the same result; in fact I cannot even alert a simple message.
Furthermore I would like to use mousedown and mousedown events. The documentation of jquery mobile tells me that I could use vmousedown and vmouseup. Does not work either. Can someone enlighten me please. the jquery mobile.js is added lastly in my script structure of the dom.
Maybe relevant for others with a similar problem.
Linking to the jquery CDN instead of hosting the files myself solved my problem.
Problem: I have to color my results in the little dropdown based on their value.
Solution: Use the 'open' event hook to loop through options and assign a color.
Problem: So the documentation for the jQuery UI autocomplete says that the open event hook receives two arguments- 'ui' and 'event'. The problem is, 'ui' is just an empty object (someone filed a bug report about this, and the brilliant jQuery UI team said it's not a problem), and 'event' only has the input box, not the dropdown that's generated. At this point, the only way I can select my options list from here is to do this:
$( event.target ).nextUntil("ul.ui-autocomplete").last().next()
That's gross. Please tell me there's a better way?
PS: If anyone says "Just use $('ul.ui-autocomplete')!" you've obviously never worked on anything more complicated than.... something that's not complicated.
The official documentation is terrible, but after lots of exploring I figured it out:
$(event.target).data('autocomplete').menu.element
Are you writing a plugin? You can use this.element
I'm trying to get jqueryui drag and drop to work with emberjs. I have a fiddle set up here: http://jsfiddle.net/XMgwV/13/ but I cant seem to get the drop event to fire.
The mixin is from this demo: http://www.lukemelia.com/blog/archives/2012/03/10/using-ember-js-with-jquery-ui/
Edit:
If I change the jQueryUI draggable helper function to 'original' it works as expected. It seems to be a problem with jquery ui .clone() and ember, as pointed out in #7 here. The safeClone method in the codebrief blog post does not seem to solve the problem fully..
Anyone knows how to get this to work as expected?
I've had to fix the jQuery UI wrapper to make it work. But all I could come up with was a dirty hack.
I had to turn
var ui = jQuery.ui[this.get('uiType')](options, this.get('element'));
into
var ui = $(this.get('element'))[this.get('uiType')]();
http://jsfiddle.net/MSch/LrHTB/1/
It looks like your example will work if you add:
clone.removeClass('ember-view');
to the safeClone helper.
Here's a jsfiddle that should solve the problem: http://jsfiddle.net/Wu2cu/