jQuery Mobile click event.preventDefault does not seem to prevent change - javascript

I am trying to prevent a radio button from changing when a use clicks, it works when using standard jQuery but when you include jQuery Mobile it does not seem to work, is there something else I have to do in jQuery Mobile?
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="trade-direction" id="buy" value="B" checked="checked" />
<label for="buy">Buy</label>
<input type="radio" name="trade-direction" id="hold" value="H" />
<label for="hold">Hold</label>
<input type="radio" name="trade-direction" id="sell" value="S" />
<label for="sell">Sell</label>
</fieldset>
$('[name="trade-direction"]:radio').click(function(event) {
if(!confirm("Do You Want To Change?")) {
event.preventDefault();
}
});
below is a link to the code in jsFiddle.
http://jsfiddle.net/mikeu/xJaaa/

The problem is that with jQuery.Mobile, the element that is effected by the UI change is not the input element. In fact, the radio element isn't actually clicked at all. The Element that is clicked is <div class="ui-radio">. If you want to bind to the radio input itself, you need to use the change event, but in this case it won't work for you, because the function gets called after the change has already taken place.
What you need is something like this:
// Probably a good idea to give your fieldset an ID or class
$('fieldset').delegate('.ui-radio','click',function(event){
if(!confirm("Do You Want To Change?")) {
event.stopImmediatePropagation();
event.preventDefault();
}
})
The event.stopImmediatePropagation() prevents the the .ui-radio from triggering the click event to the input, and the event.preventDefault prevents the default action. The stopImmediatePropagation may not be necessary, but it gives an added guarantee that may be helpful across different browsers.

Related

Using preventDefault in checkbox click event

I have a checkbox and the requirement is that when the user clicks it, instead of immediately changing its state, a modal window should pop up asking them a yes/no question. Depending on their answer, the checkbox should either become checked or remain unchecked.
I thought that this requirement should be handled using Event.preventDefault() but when I tried to do it I discovered that when I exit the event handler, the checkbox is reverted to its original state, regardless of my programmatic attempts to set the state in the handler.
$(function() {
$(":checkbox").click(function(e) {
e.preventDefault();
$(this).prop("checked", confirm("Confirm to check the checkbox"));
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label for="checkbox">Click me</label>
<input type="checkbox" id="checkbox">
</form>
So how can I implement the required behavior?
The problem is because you called preventDefault() at all. You don't need it in this case as the checked state is entirely dependant on the outcome of the confirm() call.
Also note that you should use the change event, not click, when dealing with checkboxes. Try this:
$(function() {
$(":checkbox").change(function(e) {
$(this).prop("checked", confirm("Confirm to check the checkbox"));
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label for="checkbox">Click me</label>
<input type="checkbox" id="checkbox">
</form>

Radio button intercepting unchecked event in Angular/Javascript

I am writing an Angular component which uses radio button (Need to use default radio buttons due to project constraints).
I need to print the value of the radio button (whether it is checked or unchecked). Like following:
<input type="radio" (change)="onUpdate($event)">
<p>{{isActive}}</p>
In the component something like this:
onUpdate(event) {
this.isActive = event.target.checked;
}
But this doesn't work as the change event is not triggered when the radio button is unchecked. Is there any way to intercept the event when the radio button is unchecked?
Please help. I am stuck. Dummy app link here
Edit: What I am trying to do
I am trying to write a custom radio button so that I can styles it on my own. I cannot write a radio-group component. Hence I need a wrapper component around the default one. Something like Stackblitz-link. I need the unchecked event because I have some custom element which has to be notified about this. Any way to achieve this ?
Use a checkbox, style it like a radio button. Seems to be the easiest solution and of course use ng-model instead of onChange.
You could replace (change) with (click), because every click on the radio button is a change anyway.
<input type="radio" (click)="onUpdate($event)">
<p>{{isActive}}</p>
The above is a solution, but I'd use this:
<input type="radio" [(ngModel)]="isActive">
<p>{{isActive}}</p>
It binds your radio button to your isActive property, so it changes dynamically with clicking.
So using two radio buttons got this working for me, let me know if you can model this for your application.
<input type="radio" name="button" [value]="checked" (change)="checked=!checked">
<input type="radio" name="button" [value]="!checked" (change)="checked=!checked">
<p>{{checked}}</p>
I am setting checked to false by default in my component.
Can you please try to adjust this logic with your code? Checking some new radio will uncheck other and we can keep track of this behavior.
<p>
<input type="radio" name="r1" value="one" [(ngModel)]="isActive">
<input type="radio" name="r2" value="two" [(ngModel)]="isActive">
<input type="radio" name="r3" value="three" [(ngModel)]="isActive">
</p>
<p>{{isActive}}</p>
Stackblitz link

jQuery stopPropagation not effective

I'm just completely stumped, I looked over a lot of the similar questions but I can't figure out why this click event keeps propagating.
Here is the code:
$("#view-radio").buttonset().bind('click', function(e) {
redraw(Testimonials);
e.stopPropagation();
});
Here is the radio buttons
<div id="view-radio" class="i-obj buttonset">
<input type="radio" id="gridradio" name="view-radio" checked="checked" value="grid" />
<label for="gridradio"> <img src="http://SwolePersonalTraining.com/beta/wp-content/themes/striking/images/gridview.jpg" class="icon">Grid View</label>
<input type="radio" id="listradio" name="view-radio" value="list" />
<label for="listradio"><img src="http://SwolePersonalTraining.com/beta/wp-content/themes/striking/images/listview.jpg" class="icon">List View</label>
</div>
You can find the page in action here: http://swolepersonaltraining.com/beta/?page_id=380
Here is the complete code: http://swolepersonaltraining.com/beta/wp-content/themes/striking/js/custom/custom_testimonial.js?ver=3.1.3
Any ideas?
I can't swear it because it's difficult to test in your live site, but I think that what's happening is that you bound the click event of the view-radio div instead of each of the two radio buttons inside it.
I'd try something like:
$("#view-radio").buttonset(). // Turn radio buttons of the div in a buttonset
find('input').bind('click', // Bind the click event of each of the two radios
....
EDIT:
Yes! It works!
http://jsfiddle.net/marcosfromero/TDsrj/
And stopPropagation isn't needed (read other answers to know why).

Radio Button Onclick Event Requires Two Clicks to Fire/Execute on Firefox

Hoping someone has a solution to this weirdness on Firefox 3.
I basically have 3 radio buttons and 3 text input fields (see following code):
<input type="radio" name="group1" id="preloaded" value="preloaded_img" checked="checked" onclick="SetVals();" />
<input type="text" name="text1" id="text1" />
<input type="radio" name="group1" id="custom" value="custom_img" onclick="SetVals();" />
<input type="text" name="text2" id="text2" />
<input type="radio" name="group1" id="vector" value="vector_img" onclick="SetVals();" />
<input type="text" name="text3" id="text3" />
Now, every time I click on a specific Radio Button, the text input elements for the other two buttons should get cleared and also become disabled (see following code).
function SetVals() { // using JQuery + straight JS for this...
$(document).ready(function() {
$(":radio").click(function(event) {
// use event.target to determine which radio button was clicked
if (event.target.id=="preloaded") {
document.getElementByID("text1").disabled=false;
$("#text2").val("");
$("#text3").val("");
document.getElementById("text2").disabled=true;
document.getElementById("text3").disabled=true;
} else if (event.target.id=="custom") {
document.getElementByID("text2").disabled=false;
$("#text1").val("");
$("#text3").val("");
document.getElementById("text1").disabled=true;
document.getElementById("text3").disabled=true;
} else if (event.target.id=="vector") {
document.getElementByID("text3").disabled=false;
$("#text1").val("");
$("#text2").val("");
document.getElementById("text1").disabled=true;
document.getElementById("text2").disabled=true;
}
});
});
}
Also, when the page is initially loaded, the text2 and text3 input fields are disabled via javascript as the text1 field is checked by default:
document.getElementById("text2").disabled=true;
document.getElementById("text3").disabled=true;
The problem I'm having is that it requires 2 (two) clicks to get this to work on Firefox. On Internet Explorer, it works as expected.
So, when clicking on a radio button the first time - nothing happens. When clicking on it a second time, that's when the Onclick Event is triggered.
NOTE: I'm using JQuery for this, but have also used straight Javascript to no avail.
You can simply copy and paste my code on an editor and open the page with Firefox to see issue firsthand.
Has anybody else encountered this? Is it some sort of Firefox bug? If so, is there a work-around?
Any and all help, comments, suggestions, and input are welcome.
Thanks in advance!
Since you are using jQuery to assign the event handler for the radio button click, you can remove the onClick attribute.
This should work for you:
$(function() {
$(":radio").click(function(event) {
if (this.id == "preloaded") {
$("#text1").removeAttr("disabled");
$("#text2, #text3").val("").attr("disabled", true);
} else if (this.id == "custom") {
$("#text2").removeAttr("disabled");
$("#text1, #text3").val("").attr("disabled", true);
} else if (this.id == "vector") {
$("#text3").removeAttr("disabled");
$("#text1, #text2").val("").attr("disabled", true);
}
});
$("#text2, #text3").val("").attr("disabled", true);
});
Code example on jsfiddle.
Side note: since you are using jQuery you might as well use jQuery for almost all dom interactions since mixing the two will eventually lead to some pain. Let jQuery hide the inconsistencies in browsers.
You started using jQuery, and then returned to vanilla JavaScript... but you mis-typed the getElementById() function.
I would stick with jQuery if you have it, it will avoid IE bugs with this particular method too.
Cleaner HTML
<input type="radio" name="group1" id="preloaded" value="preloaded_img" checked="checked"/>
<input type="text" name="text1" id="text1"/>
<input type="radio" name="group1" id="custom" value="custom_img"/>
<input type="text" name="text2" id="text2"/>
<input type="radio" name="group1" id="vector" value="vector_img"/>
<input type="text" name="text3" id="text3"/>
and the jQuery...
$(document).ready(function(){
//bind the click event to the radio buttons
$(':radio').click(function(){
var radioID = $(this).attr('id');
if(radioID == 'preloaded'){
$('#text1').removeAttr('disabled');
$('#text2, #text3').val('').attr('disabled','disabled');
} else if(radioID == 'custom'){
$('#text2').removeAttr('disabled');
$('#text1, #text3').val('').attr('disabled','disabled');
} else if(radioID == 'vector'){
$('#text3').removeAttr('disabled');
$('#text1, #text2').val('').attr('disabled','disabled');
}
});
});
You could try the .change() event handler. I think that could work better.
EDIT: There are issues with the .change() event and IE.

Observing change in radio button selection using Prototype JS

I'm relatively new to Prototype JS (v1.7), and I'm stuck on something. I'm trying to detect when a change in the radio button selection occurs. Here's the code:
Radio buttons:
<input class="amounts" type="radio" name="amount" id="amount-1" value="1" />
<input class="amounts" type="radio" name="amount" id="amount-2" value="2" />
<input class="amounts" type="radio" name="amount" id="amount-3" value="3" />
Javascript:
Here's a stab I took at it, which doesn't work:
Event.observe($$('amounts'), 'change', function(event) {
alert('change detected');
});
When the form loads, no radio buttons are checked. I'd like the Javascript to detect these events:
A radio button is selected when none was previously selected
The radio button selection changes
Any help would be greatly appreciated.
It doesn't work because $$ returns an array of elements and Event needs a single element. Also $$('amounts') doesn't match any elements, there are no <amounts> tags.
A better way is to use a single ancestor element which is easy to identify.
<form id="amounts-form">
<input class="amounts" type="radio" name="amount" id="amount-1" value="1" />
<input class="amounts" type="radio" name="amount" id="amount-2" value="2" />
<input class="amounts" type="radio" name="amount" id="amount-3" value="3" />
</form>
Now there is a unique ID to work with we can use Event.on
$('amounts-form').on('change', '.amounts', function(event) {
alert('change detected');
});
Notice the events are being filtered by '.amounts', the period says to use the class name.
If you're using FireBug for FireFox or Chrome's developer tools then you can test parts of your script directly in the console. It really helps to find if a selector is matching the elements you think it is by typing $$('.amounts')
Alternegro's answer attempts to use an iterator to attach the event handler directly to the "amount" radio elements but doesn't work for a few reasons:
The "$" function doesn't take css selectors as parameters, only ids. Use "$$" instead.
The css "id" attribute selector should include square braces "[]". It's also spelled wrong. "amounts-" should be "amount-" to match the ids in the example. Or just use a class selector instead: ".amounts".
There is no "change" method that can be called on enumerables. Use invoke or some other enumerable method instead.
This one should work:
$$("[id^=amount-]").invoke(
'on',
'change',
function(){alert("hello " + this.id)}
)
(YMMV using "this" in the event handler. I only checked the code in Firefox)
Its more efficient to just give those checkboxes the same class but u can also try
$("id^=amounts-").change(function(){alert("blah blah")})

Categories

Resources