I'm using the example in this answer to display more than just 2 buttons on a swal.
When the user clicks the deny button, I want to change something in the html of the swal without closing it. Right now, the swal is closed when the deny button is clicked.
Where and how do I specify that the swal shouldn't close?
I just added the preDeny parameter which allows to keep a modal opened by returning
false:
Swal.fire({
title: 'The "deny" button will not close me',
showDenyButton: true,
preDeny: () => {
return false
}
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10"></script>
Read more about preDeny: https://sweetalert2.github.io/#pre-deny
Related
I have below issue in cypress:
Get all delete buttons.
Iterate over each delete button.
click on each button.
Navigate to delete confirmation page(it is different page all together not a popup)
Click on (red) Delete button (will be navigated back to list page)
Perform same action on remaining shopping lists
cy.get('a[href*=delete][href$=confirm]').each(($ele) => {
cy.wrap($ele).click({ force: true });
// on confirm delete screen
cy.contains('button', 'Delete').click({force: true,});
Try repeating the get inside the loop
const selector = 'a[href*=delete][href$=confirm]'
cy.get(selector).each(($el, index) => {
cy.get(selector).first()
.click({ force: true })
// on confirm delete screen
cy.contains('button', 'Delete').click({force: true,})
cy.contains('h1', 'Name').should('be.visible') // confirm we are back on 1st page
})
I am trying to create a simple confirmation ("Do you want to close this window?") when closing a modal dialog page with the (X)-button.
What would be the most efficient way to implement this in Apex 5.0?
I tried to implement a solution using the dialog closed event, this seemed to have had no effects on closing the dialog with the (X)-button, however.
Try to create a dynamic action, on page load, in your modal page with that code:
Your da should execute a javascript code:
var button = parent.$('.ui-dialog-titlebar-close'); //get the button
button.unbind(); //remove the behavior
//put another behavior to the button
button.on('click', function() {
apex.message.confirm( "Your message here", function( okPressed ) {
if( okPressed ) {
apex.navigation.dialog.cancel(true);
}
});
});
Try to confirm if the "X" button have the css class "ui-dialog-titlebar-close", they can change between versions of apex.
If necessary, update the first line of the code with the correct class.
Have you considered hiding the button (x) and canceling the modal dialog page by clicking on the "cancel" button?
If you want to rename the standard button names in the confirmation window, use:
apex.lang.addMessages({"APEX.DIALOG.OK": pOkLabel});
apex.lang.addMessages({"APEX.DIALOG.CANCEL": pCancelLabel});
I have a kendo modal window in my angular app. Sometimes I auto-close the window after a second. At those times, I'd like to hide the Close [x] button, but at other times, not. Can it be done just before the window is opened?
if (autoCloseDelay) {
// hide the close [x] button here ??
$timeout( function() {
$scope.modalWindow.close();
}, autoCloseDelay, $scope);
}
$scope.modalWindow.open();
If you don't want to play with CSS, you can use setOptions to set programmatically the actions.
Example for removing the Close button:
// Get current actions
var actions = $scope.modalWindow.options.actions;
// Remove "Close" button
actions.splice(actions.indexOf("Close"), 1);
// Set the new options
$scope.modalWindow.setOptions({ actions : actions });
I believe you can do it like this:
// hide the close [x] button
$scope.modalWindow.parent().find(".k-window-action").css("visibility", "hidden");
Here is a sample jsFiddle
Problem with field validation and two jQueryUI dialogs.
There is a registration form in the first jQUI dialog.
Field validation on the username field using AJAX. If field fails validation (already exists), PHP file returns a number > zero and an error message is displayed in a second jQueryUI dialog.
However, when user closes 2nd dialog, it immediately re-opens, forever.
Any thoughts?
$("#c_username").blur(function() {
var uu = ($(this).val()).toLowerCase();
$(this).val(uu); //in case user did not input as all lowercase
$.ajax({
type:'POST',
url: 'ajax/ax_all_ajax_fns.php',
data:'request=does_username_already_exist&username=' + uu,
success: function(data) {
if (data != 0) {
$('#alert').html('Username <span style="font-weight:bold;color:darkgreen;">' +uu+ '</span> already exists. Please enter another.');
$('#alert').dialog({
title: 'Username already exists:',
width: 400,
close: function() {
$(this).dialog('destroy');
}
});
$("#c_username").addClass('field_invalid').focus();
}else{
alert("Username is okay");
}
}
});
});
$("#c_username").addClass('field_invalid').focus(); focuses the input behind the dialog. When you click the close button on the dialog, the input's blur event is raised again, causing another ajax call, and another dialog to be opened.
Try moving the focus() call to the close callback on the dialog. You could also try displaying the message in a span next to the input instead of in a dialog so focus issues can't happen.
Setup
I've got a Telerik Kendo UI TabStrip with multiple tabs inside of an UpdatePanel...
<asp:UpdatePanel ID="DataDetails_Panel" UpdateMode="Conditional" runat="server">
<div id="ABIOptions_TabContainer">
<ul>
<li>Attendance</li>
<li>Grades</li>
<li>Gradebook</li>
<li>PFT</li>
<li>Scheduling</li>
<li>Miscellaneous</li>
<li>Parent Data Changing</li>
</ul>
</div>
</asp:UpdatePanel>
...which I then wire up in javascript later...
var optionTabContainer = $("#ABIOptions_TabContainer").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
},
select: onMainTabSelect
}).data("kendoTabStrip");
Scenario
The users will click on the various tabs and inside of each tab are settings for our portal. When they are in a tab and they make a change to a setting, the expectation is that they'll click on the 'Save' button, which will perform a postback to the server via ajax, because it is in the update panel.
Current Behavior
After the post back happens and the ul content comes back, I reapply the kendoTabStrip setup function call, which makes none of the tabs selected. This appears to the user like the page is now empty, when it just had content.
Desired Result
What I want to do, is after the partial postback happens and the UpdatePanel sends back the ul, I want to reselect the tab that the user previously selected.
What Already Works
I already have a way to preserve the tab that the user clicked on:
var onMainTabSelect = function (e) {
tabToSelect = e.item;
console.log("onTabSelect --> ", e.item.textContent);
}
and a function to reset the selected tab whenever it is called:
function setMainTab() {
if (!jQuery.isEmptyObject(tabToSelect)) {
var tabStrip = $('#ABIOptions_TabContainer').data("kendoTabStrip");
console.log("Attempt to set tab to ", tabToSelect.textContent);
tabStrip.select(tabToSelect);
} else {
console.log("tabToSelect was empty");
}
}
What Doesn't Work
My hypothesis is that the Kendo TabStrip says, "Hey, that tab is already selected" when I call the setMainTab after my postback:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
BindControlEvents();
setMainTab();
});
...and therefore, doesn't set my tab back. If I click on the tab, then Poof, all my content is there just like I expect.
Any ideas what I may be doing wrong?
I ended up changing the onMainTabSelect method to:
var onMainTabSelect = function (e) {
tabToSelect = $(e.item).data("tabindex");
}
which gets me the data-tabindex value for each li in my ul. I couldn't get the tab index from kendo, so I had to role my own. Once I got that value, then I was able to set the selected tab via an index rather than the tab object reference itself.