<div class="xyz" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" onclick='alert("Hellooo");' name="test" value="Radio1" > Radio
</label>
</div>
Javascript alert box is not working with data toggles(Bootstrap is loaded).
Can someone help?
The code snippet is pasted above.
Thanks in advance.
Related
When I add bootstrap.min.js to my Vue application my checkboxes #click event is not being initiated. More specifically when using bootstrap's button-group with data-toggle="buttons" If I remove bootstrap.min.js then the checkbox click event works as normal. What is causing this?
Link to Codepen
https://codepen.io/ben_jammin/pen/gNPVvw?editors=1000
<div class="btn-group btn-group-toggle shadow mb-3" data-toggle="buttons" role="group" aria-label="String Operations">
<label class="btn btn-primary">
<input #click="reverseString" type="radio" name="options" checked> Reverse
</label>
<label class="btn btn-primary">
<input type="radio" name="options"> Palindrone
</label>
<label class="btn btn-primary">
<input type="radio" name="options"> Uppercase
</label>
<label class="btn btn-primary">
<input type="radio" name="options"> Reset
</label>
</div>
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js
Bootstrap Button plugin
https://getbootstrap.com/docs/4.3/components/buttons/#button-plugin
Vue and Jquery are not meant to be together and it'll conflict at some point.
As it says on the Bootstrap website:
Many of our components require the use of JavaScript to function.
Specifically, they require jQuery, Popper.js, and our own JavaScript
plugins.
I would recommend you to use bootstrap-vue or if you want to try another framework, Element or Vuetify:
https://bootstrap-vue.js.org/docs/components/button-group
https://element.eleme.io/#/en-US/component/installation
https://vuetifyjs.com/en/components/button-groups
If you REALLY NEED IT, you can use a wrapper component but it's better to avoid it.
Here are a few more details about how to deal with it: https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/
I am using Parsley JavaScript validation library in a Spring MVC project. I am trying to validate a 'required' radio button group.
I want to display the validation message after the last radio button in the group. To achieve this i am adding data-parsley-errors-container="#element" attribute to the last radio button but Parsley is not using this custom error container. The error message wrongly gets displayed after the first radio button. In my case the error container will be added dynamically to the radio button group, but it's not working even when i am adding it inline.
Please find the JSFiddle sample code here https://jsfiddle.net/8ja2sm98/9/
<script>
$(document).ready(function() {
$("#commentForm").parsley();
});
</script>
<form class="cmxform" id="commentForm" method="get" action="">
<div class="form-group required">
<label for="gender" class="control-label">Gender</label>
<div class="radio">
<label><input id="gender1" name="gender" type="radio" value="M" data-parsley-multiple="gender" data-parsley-id="17">Male</label>
</div>
<div class="radio">
<label><input id="gender2" name="gender" type="radio" value="F" data-parsley-multiple="gender" data-parsley-errors-container="#genderError" required>Female</label>
</div>
<span id="genderError" style="background-color:blue;"></span>
</div>
<p>
<input class="submit" type="submit" value="Submit" />
</p>
</form>
You're missing data-parsley-errors-container="#genderError" on the "male" input.
I'm referring to the Toggle buttons with checkboxes which I don't understand. There we have the example (I have added some ids):
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="c1" type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input id="c2" type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input id="c3" type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
I can click on the third button or use $('#c3').closest('.btn').button('toggle') to set the third button as pressed. That is visually okay. However, the checkbox input does not get the checked attribute, and that is what I'm missing. Why doesn't this happen automatically? Am I required to do this manually?
Update and solution:
As Marcos Pérez Gude revealed: The inspector of Firefox (or Elements in Chrome) doesn't show changes regarding the checked state of a checkbox. There you can modify or see other things but currently (Firefox 40) the checked state cannot be trusted. That was my fault.
On document ready I'm setting a radio button to checked, I want the user to see the button as highlighted/discolored. But nothing is showing in the view.
Here is my html. Nothing shows it as being checked in the view or HTML. It's the same color as all the other radio buttons.
<div class="btn-group" data-toggle="buttons" id="SpaceType">
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="0" autocomplete="off"> House
</label>
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="1" autocomplete="off"> Apartment
</label>
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="2" autocomplete="off"> Studio
</label>
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="3" autocomplete="off"> Other
</label>
</div>
Here is my jquery.
if ($("#YogaSpaceType").val() != "") {
var t = $("#YogaSpaceType").val();
var element = '#SpaceType.' + t;
//$(element).prop('checked', true);
$('input:radio[id=SpaceType][id=0]').prop('checked', true);
}
I tried both lines including the one that is commented out.
If I add 'checked' to the element like below the HTML shows it as checked but I see nothing in the view as checked, it still looks unchecked.
<input type="radio" name="typeoptions" id="0" autocomplete="off" checked> House
It looks like you want to change this a bit to be more like http://www.mkyong.com/jquery/how-to-select-a-radio-button-with-jquery/. The problem here is you are trying to use the input keyword in jquery, but your html is button groups.
From that page, the HTML is:
<input type="radio" name="sex" value="Male">Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown">Unknown</input>
and then the JS is $('input:radio[name=sex]')[2].checked = true;
If it's necessary to leave them as button groups, you'll need to change your JS line to be more like $("#0").prop('checked', true). You could also chain the div ids together like this: $("#SpaceType #0").prop('checked', true);
It was a little confusing, but the class attribute 'active' needs to be added to the label. Not the checked attribute. This is a little confusing but understood now.
$('input[type="radio"][id="0"]').prop('checked', true)
Multiple value check for id, will end up in 0 elements.
Can't figure out why the below piece of code makes the textfield disappear upon page refresh (when 'No' radio button selected).
Also, after the page is refreshed the default radio button doesn't get selected.
Forcing refresh, fixes the problem, though.
Any ideas?
<html>
<body>
<div class="editfield">
<div id="field_1">
<label>
<input type="radio" checked="checked" name="radio-1" id="radio-1_id" value="Yes" onclick="document.getElementById('divUrl').style.display='none'">Yes
</label>
<label>
<input type="radio" name="radio-1" id="radio-2_id" value="No" onclick="document.getElementById('divUrl').style.display='block'">No
</label>
</div>
</div>
<div class="editfield" id="divUrl" style="display:none">
<label>Website URL</label>
<input type="text" name="X" id="X_id" value="" />
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<body onLoad="document.getElementById('radio-2_id').checked=false; document.getElementById('radio-1_id').checked=true;">
<div class="editfield">
<div id="field_1">
<input type="radio" checked="checked" name="radio-1" id="radio-1_id" value="Yes" onclick="document.getElementById('divUrl').style.display='none'">
<label for='radio-1_id'>
Yes
</label>
<input type="radio" name="radio-1" id="radio-2_id" value="No" onclick="document.getElementById('divUrl').style.display='block'">
<label for='radio-2_id'>
No
</label>
</div>
</div>
<div class="editfield" id="divUrl" style="display:none">
<label>Website URL</label>
<input type="text" name="X" id="X_id" value="" />
</div>
</body>
</html>
just a short recap:
1. on page refresh the div should disappear (all css and js and html that was dynamically set / added is removed) and the selected radio button should be the first (Yes)
2. tested this on all major browser and it works
3. still can't figure out why it wasn't working on Mozilla and IE without the JS refresh
I moved the radio buttons out of the labels to see if that impacted the refresh in any way and it didn't. Also, I removed an extra </div> that was in the original code.
The page refresh will initiate the page in its' original state. So the
style="display:none"
will be reactivated on the div and will be hidden and the "Yes" button will also be reenabled
what i did have a textarea insert number first ,0 make it readonly
then it will not disappear on refresh,to insert document.getElementById("demo").readOnly=false,and true to enable readonly