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');
});
});
Related
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');
})
I've a simple select initialized with jQuery Chosen, created on a hidden div.
$(".slcFriendlist").chosen({
no_results_text: 'Geen resultaten voor',
width: 300
});
When I click somewhere in my code I show it and I would like to open the select, and mantain it opened
$('.pcPhotoFriend').on('click', function(event){
$('div.pcPostcardFriendlist').show();
$(".slcFriendlist").trigger('chosen:open');
});
But the problem is that there is another event that trigger I guess the click outside the select, or something else, and my select get closed again -I saw it opens, tested with delay in operations- but that's not what I need.
My goal is to have a select always opened.
Do you have any suggestions?
Thanks in advance
solved like that, with the adding of stopPropagation
$('.pcPhotoFriend').on('click', function(event){
event.stopPropagation();
$('div.pcPostcardFriendlist').show();
$(".slcFriendlist").trigger('chosen:open');
});
I am trying to restrict the user from clicking on a button multiple times. They can click on the button once when the page loads. If the page is reloaded the same should apply the user can click on the button only once.
I am using the following code however it doesn't seem to work for me
$("#doAccess").click(function() {
$("#doAccess").removeAttr('onclick');
DoSave();
});
Disable the button after it's been clicked
var accessBtn = $('#doAccess');
accessBtn.click(function() {
accessBtn[0].disabled = true;
DoSave();
});
Sounds like what you really need is:
$("#doAccess").one('click', DoSave);
jsFiddle example
.one() - Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
Why not this?
$("#doAccess").once('click', function() {
DoSave();
});
You should probably also gray out or disable #doAccess, whatever it is.
I'm working on my first program using jQuery, but I'm having an issue. I have a dialog pop up on pageLoad that asks the user to select a date and a turn. Right now, for debugging purposes, I have it alert every time .click() executes, and for some reason, it seems like it executes before the user clicks and immediately afterward.
There are three radio buttons, Turns 1, 2, and 3. When the user clicks Turn 1, the alert should say "1". When the user clicks Turn 2, the alert should say "2", etc. But for some reason, it alerts the previous value as well as the new one. I searched all of my code, and there is only one alert, so I can't figure out what is calling click() twice. I've tested it in IE and Chrome and it happened both times.
This is my .click() function:
$("#turn-radio")
.click(function () {
turnvalue = $("input[name='turn-radio']:checked").val();
alert(turnvalue);
});
If you check this jsfiddle, you'll see the rest of my code, which will hopefully make it easier to figure out what my problem is.
Thanks!
You need to change selector: as your radio button IDs are different and you were giving name as a selector that's why you were facing that problem:
$("input[name='turn-radio']")
.click(function () {
turnvalue = $("input[name='turn-radio']:checked").val();
alert(turnvalue);
});
Updated Fiddle
changing
$("#turn-radio") to $("#turn-radio label")
causes only one popup displaying the previous value
But, personally i would
$("#turn-radio input").change( function() { /* do stuff */ } )
First, sorry for my bad English.
I'm making a Coupons site and have trouble with selecting and deselecting the coupons. Each coupon is in a DIV 'box' in which there is a checkbox.
I made a onClick function on the DIV box (so the user can select the coupon by clicking on anything inside the DIV box. What I need now is, when the user want to deselect the coupon (by clicking on the checkbox inside the DIV box), I need to 'override' the DIV's onClick function (execute the checkbox onClick event, not the DIV's onClick event).
I know that everyone prefers some code as an example, but the question/problem is simple and I don't think you need all of my un'useless code inside the events/functions :)
Thanks :)
It seems like you want stopPropagation if the checkbox is being unchecked: http://jsfiddle.net/8Dcq8/.
$("div").click(function() {
alert("add"); // clicking anywhere in div to add coupon
});
$(":checkbox").click(function(e) {
if(!this.checked) { // if unchecking, remove coupon
alert("remove");
e.stopPropagation(); // don't run parent onclick
}
});
If the <div> click handler looks something like this:
var $boxes = $('div.box');
$boxes.on('click', function ()
{
// do whatever to select the coupon
});
Then the checkbox handler should look something like this:
$boxes.find('input[type="checkbox"]').on('click', function (event)
{
event.stopPropagation();
// do whatever to deselect the coupon
});
See event.stopPropagation().
You have to cancel bubbling. See here for an explanation.
You can use the jQuery Alternative, or create sub-elements with onClicks that don't target your checkbox. you might be able to use something like this also.
document.getElementById('element').checked.onreadystatechange=function(){
//code
}
good luck