We Keep Coding

How to close a jquery dialog from inside the open function?

I want to open this dot_card.php page in a dialog box. I want to interrupt the the form submission to do some stuff and them do an ajax call. After the form is submitted via ajax, I want to close the dialog box. But the code below doesn't seem to close it.
What am I doing wrong?
Here is my code.
$('<div><div id="addDotDiv"></div></div>').appendTo('body').dialog({
modal: false,
title: 'title',
closeOnEscape: true,
zIndex: 10000,
autoOpen: true,
minWidth: 650,
resizable: false,
position: { my: 'top+50', at: 'center', of: '#id-top' },
open: function() {
$('#addDotDiv').load('dot_card.php', '', function() {
$('#create_dot_form').submit(function(e) {
e.preventDefault();
var actionUrl = $('#create_dot_form').attr('action');
$.ajax({
type: "POST",
url: actionUrl,
data: $('#create_dot_form').serialize(),
success: function() {
$(this).closest('.ui-dialog').dialog('close');
}
});
});
});
},
close: function() {
$(this).remove();
}
});

SweetAlert open another alert with prevent closing previous alert

I want to open another alert along with the previous alert and prevent closing the previous alert, But the previous alert closes and new open.
I used iziToast and I can do this but I want to use SweetAlert.
SweetAlert Example:
const swalToast = Swal.mixin({
toast: true,
iconColor: "white",
customClass: { popup: "colored-toast" },
showConfirmButton: false,
timerProgressBar: true,
});
swalToast.fire({
title: "One",
position: "bottom",
timer: 5000,
icon: "info",
});
setTimeout(() => {
swalToast.fire({
title: "Two",
position: "bottom",
timer: 1500,
icon: "info",
});
}, 2000);
iziToast Example:
iziToast.info({
position: "bottomCenter",
title: "One",
message: "",
timeout: 5000,
});
setTimeout(() => {
iziToast.info({
position: "bottomCenter",
title: "Two",
message: "",
timeout: 1500,
});
}, 2000);

It is not possible to show more than one modal at a time, by design.
SweetAlert open another alert with prevent closing previous alert
Show two swal at same time
2 or more modals at the same time

Click once to open dialog

Im trying to use dialog() and it's working, but I have to click two times for the dialog text to open. My latest test was adding return false; after jQuery(this).dialog("close");.
jQuery("#divId").on('click', function() {
jQuery("divclass").dialog({
autoOpen: true,
title: "Info",
width: 800,
height: 600,
modal: true,
buttons: {
close: function() {jQuery(this).dialog("close");return false;}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The definition of the jQuery dialog should be outside the click listener.
also, if you want to open it on click event, you should change the autoOpen to false.
$("#divId").on('click', function() {
$(".divclass").dialog( "open" );
});
$(".divclass").dialog({
autoOpen: false,
title: "Info",
width: 800,
height: 600,
modal: true,
buttons: {
close: function() {$(this).dialog("close");return false;}
}
});

How to use div.load properly when calling for a partial view in another controller?

So i have this code that calls a popup dialog that contains a partial view. The problem is that whenever i call the dialog div.load appends the entire string block to the address of the home controller.
function OpenSendMessagePopUp() {
var div = $("#DivAppendToPartialView");
div.load("#Url.Content(~/Resend/_SendMessage.cshtml)", function () {
div.dialog({
modal: true,
width: 500,
height: 420,
show: 'blind',
hide: 'blind',
title: "Send Message",
draggable: false,
resizable: false,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
}
function SaveMessage() {
$.ajax({
type: 'POST',
url: '#Url.Content("~/Resend/_SendMessage.cshtml")',
data: {
smsContentId: smsContentId,
comments: comments
},
});
The MobileNumberUpload is the home controller for the project while Resend is the controller for the Partial View. Note that I cannot combine the two controllers as per the constraints of the project.
Error Message for when i click the button
This is the dialog that pops up when i click the button

Try below changes :
function OpenSendMessagePopUp() {
var div = $("#DivAppendToPartialView");
div.load('#Url.Content("~/Resend/_SendMessage.cshtml")', function () {
div.dialog({
modal: true,
width: 500,
height: 420,
show: 'blind',
hide: 'blind',
title: "Send Message",
draggable: false,
resizable: false,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
}
function SaveMessage() {
$.ajax({
type: 'POST',
url: '#Url.Content("~/Resend/_SendMessage.cshtml")',
data: {
"smsContentId": smsContentId,
"comments": comments
},
});
}
Also make sure smsContentId and comments should be declared in JS.

How to get Jquery dialog textbox value and <tr> cell value in dialog content?

I am working with the library contextmenu options with table. When an option is selected with particular row, the row id should display in the dialogue content.In dialog content I have text box , the value of text box has to be passed to the method how can I do this? Below is what i have currently tried.
Dialogue content
<div id="dialogbox" >
<p>Enter Driver Message for <span id="bus"></span> </p>
<input type="text" id="msg" name="msg">
</div>
Context Menu options
$(function(){
$.contextMenu({
selector: '.context-menu-one',
/* trigger: 'hover',
delay: 500, */
autoHide: true,
callback: function(key, options) {
var message = "global: " + key;
var busId = $(this).closest("tr").find('td:eq(0)').text(); // table row value
//document.getElementById("bus").innerHTML=busId;
$('#bus').text(busId); //Here I am setting to diloug content
},
items: {
"DMsg": {
name: "Send Driver Message",
icon: "edit",
// superseeds "global" callback
callback: function(key, options) {
var busId = $(this).closest("tr").find('td:eq(0)').text();
openDriverMsgDiloug(busId);
}
},
function openDriverMsgDiloug(busId)
{
$('#dialogbox').dialog('open');
}
Dialogue Box
$("#dialogbox").dialog({
autoOpen:false,
title: "Driver Message",
modal:true,
buttons: [
{
text: "Send",
icons: {
primary: "ui-icon-heart"
},
click: function() {
var msg= // have to get the value of textbox in diloug
sendToClient(busId,msg);
$( this ).dialog( "close" );
}
},
{
text: "Close",
icons: {
primary: "ui-icon-heart"
},
click: function() {
$( this ).dialog( "close" );
}
}
]
});

Have you tried the simple .val() method?
var msg = $("#msg").val();