We Keep Coding

Why Ext.MessageBox gets stuck after several clicks on "Ok" button?

I use MessageBox of ExJS framework to show dialog with "Ok" button.
// app.js
function showNoteMessage (title, message, fn, scope) {
return Ext.Msg.show({
title: 'Title example',
message: 'Message text',
buttons: Ext.MessageBox.OKCANCEL,
promptConfig: false,
fn: function () {
if (fn) {
fn.apply(scope, arguments);
}
},
scope: scope
});
}
// index.html
<button onclick="showNoteMessage()">Open dialog several times</button>
Steps to reproduce:
Open dialog with provided two buttons "Ok" and "Cancel".
Click on the "Ok" button
Open dialog one more time.
When you click on "Ok" one more time, the dialog gets stuck on the screen and unlock all content behind it.The buttons inside the dialog are disabled.
Current version Ext.js 2.4.2.571.
After click on "Ok" button or "Cancel", gray background disappears and dialog gets stuck with unlocking content under it. I try to wrap Ext.Msg.show into setTimeout but it looks like it works only locally.
Update
I continue working on this bug and found out that issue can be in this function:
// MessageBox.js
...
onClick: function(button) {
if (button) {
var config = button.config.userConfig || {},
initialConfig = button.getInitialConfig(),
prompt = this.getPrompt();
if (typeof config.fn == 'function') {
button.disable();
this.on({
hiddenchange: function() {
config.fn.call(
config.scope || null,
initialConfig.itemId || initialConfig.text,
prompt ? prompt.getValue() : null,
config
);
button.enable();
},
single: true,
scope: this
});
}
}
this.hide();
},
...
For some reason on the step with broken click it skips this part of code:
this.on({
hiddenchange: function() {
config.fn.call(
config.scope || null,
initialConfig.itemId || initialConfig.text,
prompt ? prompt.getValue() : null,
config
);
button.enable();
},
single: true,
scope: this
});

The issue was related to the old version of ExtJS. I was not able to update it, so found a workaround: to disable animation like this:
// app.js
...
Ext.Msg.defaultAllowedConfig.showAnimation = false;
Ext.Msg.defaultAllowedConfig.hideAnimation = false;
...

How can i redirect alert button on chice using sweetAlert js?

I'm using sweetAlert this is working fine with single button but now i want to click button with choice but I'm not able to that, What is wrong?
Now my redirection is working on both buttons but i want to click only for single button. How can i do that?
What i tried:-
function CallMessage() {
swal({
title: 'this is title',
text: 'message',
buttons: ["Finish Now", "Exit Anyway"]
}).then(function() {
window.location = 'login.aspx';
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<button onclick="CallMessage();">Button</button>
Answer will be appriciated!

The promise returned by swal() is resolved to the value of the clicked button. When using the array shorthand to set the buttons property, the first (cancel) button returns null, while the rest return true:
function CallMessage() {
swal({
title: 'this is title',
text: 'message',
buttons: [ 'Finish Now', 'Exit Anyway' ]
}).then(value => {
console.log(value);
if (value) {
console.log('Redirecting!');
// location.href = 'login.aspx';
}
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<button onclick="CallMessage();">Button</button>
If you have more than two buttons, you can also set custom values for each one using an object instead of an array. See the Advanced Examples section of the docs for more details.

explicitly release sweetalert popup after ajax call

I'm using sweetalert to ask user for an input to rename a tag. And then I make an ajax call to change the tag on server. If succeeded, I call a small callback function(postAction) which will update the UI and renamed the tag on UI. It works fine as long as little call back function has a statement "swal("done!");", so user clicks on this little confirmation message box, and sweetalert message box is released. I'm trying to see if there is a function I can call to release the input sweetalert pop up without the additional "swal("done")" statement, so user will have 1 less click. Is there an easy way to do this?
All I can find now is to add a timer in the second pop up. swal("Done!", {timer: 500}); It's OK but not ideal.
renameTag = function(tagId)
{
swal({
title: "Rename Gallery Tag",
text: 'Please provide a new tag name',
content: "input",
button: {
text: "OK",
closeModal: false,
},
})
.then(name => {
var tagName = name.trim();
if (tagName.length == 0)
{
swal({
title: "Rename Gallery Tag Failed",
text: "Tag name cannot be empty",
icon: "error",
button: "OK",
});
return;
}
else
{
ajaxAction("POST"
, "/User/RenameGalleryTag"
, { 'index': tagId, 'name': tagName }
, "rename gallery tag"
, {
'reload': false
, postAction: function () {
$(".selected-tag").text(tagName);
swal("done!");
}
});
}
})
}

You should be able to close it like this
swal.close()

Object doesn't support property or method 'confirm'

I have a WebForm which inherits from a MasterPage and in the WebForm I made use of jQuery and JavaScript which I am new to since I want to create a dialog box with customised buttons, and the default confirm() method does not allow any changes, so I have made use of resources and codes from this website. I'm not sure where to put the JS sources, so I have placed them in between (do tell me if I'm doing it wrong):
<asp:Content ID="Content2" ContentPlaceHolderID="CSS" runat="server">
</asp:Content>
The sources I have from the reference are:
<script src="~/jquery.confirm.js"></script>
<script src="~/jquery.confirm.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
And as copied from the reference as well, this is my jQuery dialog box:
$("#Button1").confirm({
title: "Confirmation Message",
text: "Are you sure that the information you have entered is accurate?",
confirm: function (button) {
return true;
},
cancel: function (button) {
return false;
},
confirmButton: "Yes",
cancelButton: "No"
});
This error always pops out whenever I try to run my code:
Object doesn't support property or method 'confirm'.
I have tried using various JS sources and jQueries since I'm new to these but all of them didn't work. How do I resolve this problem?

Try this:
$('#Button1').on('click', function () {
$.confirm({
title: "Confirmation Message",
text: "Are you sure that the information you have entered is accurate?"
confirm: function (button) {
return true;
},
cancel: function (button) {
return false;
},
confirmButton: "Yes",
cancelButton: "No"
});
});

JQUERY modal box confirm form submit

I have a form that when the submit is hit i want a modal box to pop up with a YES and NO button i want the both the yes and no button to submit the form but i need to know which button they clicked.
Here is my code
<input onclick="$.msgbox('confirm text',{
buttons : [
{type: 'submit', value:'YES'},
{type: 'submit', value:'NO'}
]
}, function(buttonPressed) {
});" name="btnApply" id="btnApply" tabindex="41" src="images/btnsubmit.jpg" style="border-width: 0px;" type="image" />
My problem is the form is submitting when the user clicks submit.
Any help or ideas would be great
thanks

While I'm not familiar with the $.msgbox plugin but you should be opening the modal dialog on <form> submit and not on a button press, as the form can also be submitted by an enter/return on certain input fields (like text boxes <input type="text|password">)
var confirmed = false;
$('#myform').bind('submit', function() {
if (confirmed) {
return true; // confirmation received, continue form submission process
} else {
$.msgbox(
'my modal message',
{
buttons : [
{ type: 'button', value: 'YES' },
{ type: 'button', value: 'NO' }
]
},
function(buttonPressed) {
confirmed = buttonPressed.value; // Update the confirmed variable
$('#myform').submit(); // re-submit the form
}
);
return false; // cancel form submission
}
});

Add return false:
<input onclick="$.msgbox('Would you like a cash advance of up to £1000 whilst we process your loan?',{
buttons : [
{type: 'submit', value:'YES'},
{type: 'submit', value:'NO'}
]
}, function(buttonPressed) {
}); return false;" name="btnApply" id="btnApply" tabindex="41" src="images/btnsubmit.jpg" style="border-width: 0px;" type="image" />

Not sure about the msgbox either but some remarks about your code:
Don't attach your JS logic directly to your code, but use jQuery to attach click event to your markup (see unobtrusive javascript):
Instead of
<input onclick="$.msgbox('confirm text',{
Use
$('#btnApply').click(function(e) {
You can stop the click handling by setting as false one property of the event parameter:
$('#btnApply').click(function(e) {
e.preventDefault(); // stop click handling and so form submitting
Finally, handle the form submitting or not in the msgbox callback function:
$.msgbox("Are you sure that you want to permanently delete the selected element?", {
type: "confirm",
buttons: [
{
type: "submit",
value: "Yes"},
{
type: "submit",
value: "No"},
{
type: "cancel",
value: "Cancel"}
]
}, function(result) {
if(result == "Yes") // display the form on submit
$('form').submit();
});
jsFiddle available.