What I am trying to do is to prevent the user from changing the radio button until they confirm that they want to leave the "page". The radio button should not change to the one they clicked until after they click on the button in the popup to say "ok leave page".
This call handles changing the page to the selected radio button, and everything else. This should only be fired if the button in the popup is clicked:
$("body").on("change", "input[type='radio'][name='quote-type']:checked", function(e){
//Change the radio button and everything else
});
This handles the popup and everything:
$(function(){
var LEAVEPAGE;
//Radio button changes, so show a popup
$("body").on("change", ".coverage-options-wrapper li:not(.custom) input[type='radio'][name='quote-type']", function(e){
e.preventDefault();
e.stopPropagation();
LEAVEPAGE = e.currentTarget;
//Show the popup to ask if you are sure you want to switch radio buttons
});
//Click the button in the popup to leave the page, so change the originally clicked radio button.
$("body").unbind("click").on("click", ".leave-page", function(){
$(LEAVEPAGE).prop("checked", true).trigger("change"); //triggers change for the first call to be run, to actually change the page
});
});
What is happening is the radio button is just being changed regardless, it shows the popup too, however it isn't waiting for a response from the popup. It just switches anyways. Also, when I click on the .leave-page button, it triggers change (it's suppose to be so that it will load the new page attributed to that button), however it ALSO triggers the popup again (as they both use the change event).
I am very stumped.
DEMO
JS
var optionTarget;
$(":radio").click(function(e){
e.preventDefault();
optionTarget = e.target;
$("#leave-dialog").show();
});
$("#leave-dialog button").click(function(){
$("#leave-dialog").hide();
});
$("#leave-btn").click(function(){
$(optionTarget).prop('checked', true);
});
HTML
<input type="radio" name="bleh" value="yes" checked>option 1
<input type="radio" name="bleh" value="no">option 2
<div id="leave-dialog">Are you sure?
<br/>
<button id="leave-btn">Yes</button>
<button>No</button>
</div>
Related
My goal is to replace a button with another button, but I am running into some issues. I am able to trigger the first button click and I am able to cause an alert with the second button click, but for some reason when I try to trigger the first button click in the click event handler of the second button, it doesn't work. What am I doing wrong? For some context, I'm doing this in Powerapps Portals by adding a Content Snippet.
$(window).load(function() {
//Code to Add Custom 'Register' Button (and Hide the original one- currently commented out)
$('#SubmitButton').after('<input type="submit" name="ctl00$ctl00$ContentContainer$MainContent$MainContent$mySubmitButton" value="Register" id="mySubmitButton" class="btn btn-primary">');
//$('#SubmitButton').hide(); *THIS WORKS*
//$("#SubmitButton").click(); *THIS ALSO WORKS*
$("#mySubmitButton").click(function()
{
//window.alert('yes!'); *THIS WORKS*
$("#SubmitButton").click(); // *THIS DOES NOT WORK*
});
});
You need to prevent the default action to stop the form from submitting when the button is clicked.
$("#mySubmitButton").click(function(e){
e.preventDefault();
$("#SubmitButton").click();
});
Alternatively, you can set the button's type to "button" so clicking it does not submit the form by default.
$('#SubmitButton').after('<input type="button" name="ctl00$ctl00$ContentContainer$MainContent$MainContent$mySubmitButton" value="Register" id="mySubmitButton" class="btn btn-primary">');
Let's say I have a collection containing 3 elements.
Each element has a corresponding remove button that I would like to initiate a POST to my server. Right now I have it setup so that when "Remove" button is pressed, a confirmation modal pops up with "yes" and "no" buttons. I am using the same modal for each element.
Problem is, when I click "yes" in modal, how can I have it know which remove button I clicked that launched the modal?
Here is a link to a gist containing the problematic code
https://gist.github.com/anonymous/85481507a1171467cae5
I have tried using a suggestion below that implements the following:
$('#hingle_dingle_0').on('click', function(e){
$('#confirmRemoveNetwork').modal('toggle', $(this));
});
$('#confirmRemoveNetwork').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
console.log(button);
});
However this returns an empty set. I can't for goodness sake figure out why it doesn't find the event.
Thanks for any help!
The modal is autoposting because you are opening it with a <button> inside a form with an input. Unless you tell it not to, this will cause a form submit. Simply set the type to button (instead of submit which is default): <button type="button">
You can capture the calling button by tapping into the event thrown when the modal is opened:
$('#confirmRemoveNetwork').on('shown.bs.modal', function (e) {
console.log(e.relatedTarget.id);
});
Finally, be sure your IDs are unique. You cannot have both "remove network" buttons using the same id of removenetworkbtn.
I'm using simple DropIt jquery dropdowns - http://dev7studios.com/dropit/
I want to have the submenu box stay open unless clicked outside of the box (.dropit-submenu)
I'm planning to have a form input in dropdown but whenever i click input inside dropdown the whole dropdown closes...
line 40 of js is showing this
// Close if outside click
$(document).on('click', function() {
settings.beforeHide.call(this);
$('.dropit-open').removeClass('dropit-open').find('.dropit-submenu').hide();
settings.afterHide.call(this);
});
There is a trick if you want to use, on div which is popping up you can write onclick="return false;" so this will not go to call jquery other call and after your form submission you can hide the same div.
// Close if outside click
$(document).on('click', function(e){
if($(e.target).closest('.dropit-submenu').length){ return true; }
settings.beforeHide.call(this);
$('.dropit-open').removeClass('dropit-open').find('.dropit-submenu').hide();
settings.afterHide.call(this);
});
check out this fiddle: http://jsfiddle.net/5rmEe/61/
var inputVal = false;
//allow user to deselect a radio button by clicking a checked radiobutton
$('input[type=radio]').each(function(){
var inputObj = $(this);
inputObj.click(function(e){
if(inputVal === inputObj.val()){
inputVal = false;
inputObj.attr('checked', false);
}
else{
inputVal = inputObj.val();
inputObj.attr('checked', 'checked');
}
e.stopPropagation();
});
});
$('.asdf').click(function(){
$('.haha').trigger('click');
});
notice that the asdfsdaf span would trigger a click on the radio button
First of all, the radio button is set such that if you click on a checked radio button it will uncheck itself (try it out) and this works when clicking on the radio button itself
now If you click on the span, it'll make the checkbox check itself properly but then if you click on the span again it will NOT set the radio button as unchecked even though evidently it performs a click event and theoretically it should uncheck the radio button accordingly due to the click event (this event works if you actually click on the radio button)
why is this happening? is the attr() method not working if the event is manually triggered using .trigger()?
how can I resolve this such that clicking on the span would ALSO trigger an uncheck in the radio button when the radio button is checked?
Use triggerHandler instead of trigger.
$('.haha').triggerHandler('click');
This will cause the handler to be fired without causing the default behavior of the click.
You can prevent the default click action by calling preventDefault() from within your click handler, like so:
inputObj.click(function(e){
e.preventDefault(); //add this to prevent default click behaviour
if(inputVal === inputObj.val()){
inputVal = false;
...
...
See working fiddle
I have a function called showHide() that alternately shows and hides a text input field and a button (button2) when another button (button1) is clicked. The text input field is automatically focused when it opens, and this works great.
The HTML looks roughly thus:
<button1>Show/Hide</button>
<form>
<input class="hidden" type="text" />
<button2 type="submit">Submit</button>
</form>
<script type="text/javascript">
$("button1.someSelectors").click(function() {showHide();});
$("input.someSelectors").blur(function() {showHide();})
</script>
I would like to extend the function such that when the input field loses focus it and button1 disappear, unless it loses focus because button1 is being clicked. As it reads now I'm only testing whether the input field has focus or not. How can I also check whether button2 is being clicked or not?
I tried:
$("input.someSelectors").blur(function() {
if (!$("button2.someSelectors").is(":focus")) {
showHide();
}
});
but it hid the form elements even when I tried clicking button2.
An alternative would be to test whether button2 is being clicked or not in the "hide" part of the function, but when I added
if(!$("button2.someSelectors").click()) {do the hide part of the function}
to showHide(), the form got submitted when I clicked button1 or button2. Here is an example of my problem. Can anyone help?
--Edit:
var showHide=function(item, category) {
if($("input."+item+"."+category).hasClass("hidden")) {
$("input."+item+"."+category).show("fast").focus().removeClass("hidden");
$("button.buy."+item+"."+category).show("fast");
$("button.purchase."+item+"."+category).text("Never mind!");
} else {
$("input."+item).hide("fast").addClass("hidden");
$("button.buy."+item).hide("fast");
$("button.purchase."+item).text("Purchase");
}
}
blur event on textbox is triggered before the click event fires on the button. In order to avoid that you can use mousedown event instead of click event which will be triggered before click event. Try this
$("button1.someSelectors").mousedown(function() {showHide();});
$("input.someSelectors").blur(function() {showHide();})