Develop Reference

.on('change' ...) doesn't trigger for data changed by JS

I am trying to trigger an event when an input textbox changed:
$('.packeta-selector-branch-id').on('change', function () { alert('helo'); })
This works only If I manually type something in the textbox, but in my case where an external javascript is setting the textbox value, not working.
I created a little jsfiddle to show this:
https://jsfiddle.net/6vnuqxa0/
To try out:
Click on Choose pickup point
Select something from list and click on "Choose this pick up point".
Any ideas how to resolve this issue?

The selected answer to jQuery watch for domElement changes? suggests binding to the DOMSubtreeModified event. I have tried iin your fiddle and it works! The answer does mention that this event may be deprecated, but it is worth looking into.
In your case, add an id to your div so that you have:
<div id="packeta-selector-branch-id" class="packeta-selector-branch-id"></div>
Then the following code will trigger the alert when the contents of that div change.
$('#packeta-selector-branch-id').bind('DOMSubtreeModified', function(e) {
if (e.target.innerHTML.length > 0) {
alert('helo');
}
});
Otherwise, I would look at the widget itself and try and determine if it fires any events on select. If so, you could attach some behaviour to that event.

trigger('change') when click button. but a ID or name on your input would be better
$(document).off('click', '.button select-branch').on('click', '.button select-branch', function(){
$('.packeta-selector-branch-id').trigger('change');
})

Add new fields inside modal window on change at select (rails_admin)

I have:
When I click button "Add new" - I have modal window made by rails_admin with select and options there. Select element have id "#select_from_modal"
I want:
when user changing option in #select_from_modal - to add new fields in this modal window and save form.
I know, that I can add custom js by adding file to assets/javascripts/rails_admin/custom/file.js and I did it.
My code is:
$(document).on("change", "#modal", function() {
$('#select_from_modal').change(function() {
alert('hello!')
});
});
But it have strange behaviour. When I changing select option for the first time - nothing happens. For second time - I have alert 'hello'. For third time - I have this alert twice. Then 3 times, 4, and so on.
Please, help me to understand what am I doing wrong and how to make it in right way?

Try to use event delegation, e.g.:
$(document).ready(function() {
$(document.body).on('change', '#select_from_modal', function() {
alert('hi');
});
});

Get items from Select2 after data has been loaded

I'm trying to force the open method and select item with select2 like this.
$(".select").select2('open')
$(".select").on('select2-loaded', function (e) {
items = e.items.results;
if (items.length == 1) {
$(this).val(items[0].text);
}
});
$(".select").select2('close');
But I cannot get inside the select2-loaded evaluation and the close is happening also to quick. I want to select the first element by default if there is only one element on the list.
When the 'open' occurs, it automatically performs the mechanism to get and load all the elements in my list. If I comment the close method it will take some milliseconds to display the elements on the list.
But what I want is to refresh my list (this is done by the open) then I want to select only if there one element and the close my list ('select')
How can I achieve this? This behaviour will be trigger by a onchange event of another list. (nested selects)

You should move the close call INSIDE the select2-loaded event, so it'll only close the select element after it selected the item. Otherwise you're opening, setting event for future event, then closing immediately.
$(".select").select2('open')
$(".select").on('select2-loaded', function (e) {
items = e.items.results;
if (items.length == 1) {
$(this).val(items[0].text);
$(".select").select2('close');
}
});

Jquery: If statement help, if (radio button is checked) then Jquery, else

I have this JQuery Code, Its in the DOM Ready, on click of .deleteCatFavs it runs this function. I want to add some If functionality to this but am having trouble.
// Delete a Favorite Category,
$('.deleteCatFavs').live("click", function(){
var actionRequested = "AJAX_delFavCat";
var url = "index.php";
var catId = $("input[name=FavCats]:checked").val();
var rowId = $("input[name=FavCats]:checked").attr("id");
$.post(url, {AJAX_Action: actionRequested, rowId: rowId},
function(data){
$("#favCats").html(data);
});
});
I want this to do something like this. I have used a isset() to show what I want to do in a PHP way, I just dont know how to do this in javascript.
// On DOM Ready, Hide .deleteCatFavs
$('.deleteCatFavs').hide();
// When the input radio button is checked [name=FavCats],
if(isset($("input[name=FavCats]:checked") // <-- if radio button is selected
$(".deleteCatFavs").show(); // Then show the Delete class,
// And if the .deleteCatFavs class is clicked, then run the JQuery code above
if (.deleteCatFavs.isClicked){
Run Jquery Code here';
}
So basically, When the radio button is checked, I want to show the .deleteCatFavs class, otherwise I want it hidden on DOM ready. And also, when the .deleteCatFavs is shown and clicked, It must run the above code.
Im sure this is so simple, I just dont know how to do isset queries in Javascript.
Also, lets keep it simple.

How about:
$("input[name='FavCats']").change(function () {
/* Fired immediately after a radio button is clicked with name='FavCats' */
$(".deleteCatFavs").show();
});
Which binds an event handler to the change event--I'm assuming that if any radio button with name FavCats is clicked, you want to show .deleteCatFavs.
And:
$(".deleteCatFavs").click(function () {
/* Run jQuery code when element with class deleteCatFavs is clicked */
});

try with latest jQuery v1.6 method prop
if ( $(elem).prop("checked") )

Handling HTML SELECT Options with event delegation to javascript on iPhone Safari

We are developing a web application with GUI customized to use on iPhone. A page on the app has 3 subsequent SELECT dropdowns, where selection of an option from 1st dropdown derives the options for 2nd dropdown, and so forth. The subsequent dropdown options are populated by javascript based on onchange event on previous dropdown.
The problem is that, on iPhone the options for a SELECT appears with 'prev' and 'next' links to move to previous and next control. When the 'next' link is clicked, then the control moves to next SELECT and displays the options. The javascript is triggered by onchange event for previous SELECT and populates the options for next SELECT. But on dropdown for 2nd SELECT displays the previous options before it is repopulated by the javascript.
Is there a workaround or event that can sequence execution of javascript and then selection of next control? Is there any event that can be triggered when a SELECT option is selected and before control leaves the SELECT element? Is there a handle for Next and Previous links for SELECT dropdown option display?

Maybe you could use the focus event, in jQuery this would be:
$('#select2').focus(function () {
// update select2's elements
});
Although the real question is when the iPhone overload comes in, and when the event get fired. And also can the select options be changed whilst in this view.

I had the same problem on my site. I was able to fix it by manually polling the selectedIndex property on the select control. That way it fires as soon as you "check" the item in the list. Here's a jQuery plugin I wrote to do this:
$.fn.quickChange = function(handler) {
return this.each(function() {
var self = this;
self.qcindex = self.selectedIndex;
var interval;
function handleChange() {
if (self.selectedIndex != self.qcindex) {
self.qcindex = self.selectedIndex;
handler.apply(self);
}
}
$(self).focus(function() {
interval = setInterval(handleChange, 100);
}).blur(function() { window.clearInterval(interval); })
.change(handleChange); //also wire the change event in case the interval technique isn't supported (chrome on android)
});
};
You use it just like you would use the "change" event. For instance:
$("#mySelect1").quickChange(function() {
var currVal = $(this).val();
//populate mySelect2
});
Edit: Android does not focus the select when you tap it to select a new value, but it also does not have the same problem that iphone does. So fix it by also wiring the old change event.