here handelDlt is onclick function of cancel button and changeStatus() is onclick function of toggle button, here if I want to change the status from close to open or open to close that change button functionality working fine and its give one model that do yo want to change from open to close or close to open.in toggle button functionality its working fine but 2 time its throwing the model like if i change status from open to close its throwing 2 model for cancel button like do you want to want to change from open to close and do you want to change from close to open. How can I hide the second one mode in cancel button .even I use e.preventDefault() but its not working
function changeStatus() {
checked
? formik.setFieldValue("status", "Closed")
: formik.setFieldValue("status", "Open");
}
let handelDlt = (e) => {
setOpen(false);
setChecked(!checked);
changeStatus();
e.stopPropagation();
};
Related
I have 2 radio buttons on an ASP.NET WebForm page. I have a modal popup that is to be shown only when going from one of the radio buttons to the other, but not the other way. In other words, here are my choices:
if radio button 1 is clicked then the modal popup is shown.
If radio button 1 is currently selected and radio button 2 is clicked then the modal popup should NOT be shown.
I have a javascript function that toggles the show and hide but I briefly see the popup when #2 logic is performed. Here is the js function:
$(function () {
$('#<%=RadioButtonListServiceLevel.ClientID%>').click(function () {
var CustomerCountry = $('#<%=HiddenFieldCustomerCountry.ClientID%>').val();
var ServiceLevelSelected = $("#<%=RadioButtonListServiceLevel.ClientID%> input:checked").val();
if ((CustomerCountry != "US" && CustomerCountry != "CA") && ServiceLevelSelected == "24") {
$('#InternationalServiceLevelModal').modal('show');
} else {
$('#InternationalServiceLevelModal').modal('hide');
}
});
});
Any idea why the popup modal dialog would briefly show when the action described in #2 is performed?
Thanks
I was just playing around a bit using an 'alert' and when I used the 'click' event, like you have, the alert fired twice: as soon as i clicked - before the button visibly changed value, then again after the button visibly changed value.
I changed 'click' to 'change' and the alert only fired once. Could be the fix?
// changed 'click' to 'change'
$('#<%=RadioButtonListServiceLevel.ClientID%>').change(function () {
I've got a bootstrap modal which shows a confirmation message. If the 'accept' button is clicked then a function is being called with an id, if 'cancel' or 'close' buttons are clicked then the modal closes. The issue is that when the modal is displayed, if I clicked on cancel, and then open the modal again and this time I click on 'accept', the function is being called twice, once for the time I clicked on cancel and once for the time I clicked on 'accept'. How can I prevent this?
$(document).ready(initItems)
function initItems() {
$('.delete-item').on('click', initItemDeletion)
}
function initItemDeletion() {
const itemId = $(this).data('item-id')
$('h5.modal-title').text('Confirmation')
$('div.modal-content div.modal-body').text('Are you sure you want to delete this item?')
$('div.modal-footer button.btn.btn-primary').text('Yes, Delete It!')
$('#main-modal').modal()
$('div.modal-footer button.btn.btn-primary').click(() => {
deleteItem(itemId)
$('#main-modal').modal('hide')
})
return
}
function deleteItem(itemId) {
console.log('deleting item...' + itemId)
}
Again:
click on link: modal is shown but I click on cancel.
Console prints: nothing
click on link: modal is shown but I click on accept.
Console prints:
deleting item... 2
deleting item... 9
where item 2 was the row of the item I clicked on the first time, and 9 is the current row I'm clicking on.
Your problem is that every time you open new modal, you bind to div.modal-footer button.btn.btn-primary button, so when you close the modal, it is still there, and when you open new one, you bind again on top of that.
Bind to namespaced click event and unbind it just before, so you always have just one handler:
$('div.modal-footer button.btn.btn-primary').off('click.close').on('click.close', function () {
deleteItem(itemId)
$('#main-modal').modal('hide')
})
Working fiddle: https://jsfiddle.net/aq9Laaew/219529/
https://api.jquery.com/event.namespace/
I am in the middle of writing some unit tests for a modal component I am developing. When I got around to testing that the action buttons, deny and ok, called the correct handler when clicked.
I thought an easy way to do this would be to call jquery .click(), .trigger('click'), or .tiggerHandler('click') on the button elements.
However doing so seems to unbind the click handler for not only the button being clicked but also the other action buttons and the dimmer. Making the modal impossible to exit.
let myModal = $('#confirmModalPanel');
myModal
.modal({
closable: false,
onDeny: function() {
console.log('onDeny was called');
},
onApprove: function() {
console.log('onApprove was called');
}
});
$('#btnReset').click(() => {
myModal.modal('show');
});
// Cannot trigger deny action from click in code.
// The first click correctly runs but seems to unbind the click event
// from the deny button and breaks the modal functionality. Commenting
// out these lines will make the modal behave normally.
console.log('Trying to click the accept button from code');
$('#positiveButton').trigger('click');
console.log('Trying to click the deny button from code');
$('#denyButton').trigger('click');
http://jsfiddle.net/TuckerD/fpt3rzkp/22/
I have a button which opens a menu. When the user selects the button the menu opens and the button is 'pressed' i.e blue colored
when the user makes a selection from the menu the menu closes and the button is unpressed.
if the user selects the button and then instead of choosing an item they click outside of the button, the menu closes and buttonis again unpressed.
my issue is: when i open the menu using the button i should be able to reclick on the button and close it. except when i reclick it opens it again.
i think i need to add something to the press event i have but not sure what. i tried adding event.stopPropogation() to the press but it returned not
a function.
$(document).click(function() {
this._button.setPressed(false);
}.bind(this));
this._button = new ToggleButton({
press: function(event) {
if (this._button.getPressed()) {
menu.open(
false,
this.getFocusDomRef(),
this.getDomRef()
);
} else {
menu.close();
}
}.bind(this)
}).addStyleClass("oButton");
I would suggest a solution. You would see whether it is good for you.
You can create a layer element after pressed the button. Then, the z-index of the menu is the highest and then the layer element is higher than the background.
You can add a click event to the layer. if the layer is clicked, close the menu.
I have a div which opens when I click a menu button, I am trying to close it if the user clicks anywhere after it is open. The issue I am having is that with my code the show div and the close div when a user clicks I guess are firing at the same time for some reason. The code for the click event is below. How can I make it so they do not fire at the same time and when I open the div that does not fire the click function. Thanks!
//if user clicks and menu is open then hide menu div
$(document).click(function() {
if($("menu").hasClass("menu_closed") == false ) {
//will hide the menu div
closeMenu();
}
}
I think what you want actually is to stop propagation in the other click handler, something like:
$("your_menu_selector").bind("click", function(e){
//your code to open the menu
e.stopPropagation();
return false;
})
You might want to consider adding the event handler to close the menu in the handler that opens the menu. Have it execute only once using the one method. In the handler that opens the menu, simply check to see if it is open already and do a no-op if it is.
$('.openButton').click( function() {
var $menu = $('#menu').
if ($menu.hasClass('menu_closed')) {
$menu.removeClass('menu_closed').addClass('menu_open');
$(document).one( function() {
$menu.removeClass('menu_open').addClass('menu_closed');
});
}
});