Jquery modal popup return to view and show summary message after comfirmation - jquery-ui

I have a modal popup just for comfirmation. When 'continue' is clicked it closes and it goes to the controller Action Delete and it returns. But after returning back to the view, the summary message validation div is not being showed which is what I want.
Here is the modal with div code:
<div id="delete-dialog" title="Confirmation">
<p>Are you sure you want to delete this?</p>
</div>
<script type="text/javascript" lang="javascript">
//$(document).ready(function () {
$(function () {
var deleteLinkObj;
$('.delete-link').click(function () {
deleteLinkObj = $(this); //for future use
$('#delete-dialog').dialog('open');
return false; // prevents the default behaviour
});
$('#delete-dialog').dialog({
autoOpen: false,
width: 400,
height: 250,
resizable: false,
modal: true, //Dialog options
buttons: {
"Continue": function () {
$.post(deleteLinkObj[0].href, function (data)
{ //Post to action
if (data == '')
{
}
else
{
}
});
$(this).dialog("close");
},
"Cancel": function ()
{
$(this).dialog("close");
}
}
});
});
//})
</script>
So what i basically want it to do, is going to the controller if 'continue' is clicked, and show the summary message.
So how can I 'stop' the execution of the jquery function after comming from the controller?
I got the modal code from this site

You should use .append of jQuery inside your callback, after the post.
As you did not show any div. I'm assuming the div as
<div id="summary"></div>
This is how you the final dialog is :
$('#delete-dialog').dialog({
autoOpen: false,
width: 400,
height: 250,
resizable: false,
modal: true, //Dialog options
buttons: {
"Continue": function () {
$.post(deleteLinkObj[0].href, function (data)
{ //Post to action
if (data == '')
{
}
else
{
$('#summary').append(data); // this will append the content in data to your div with id as summary
}
});
$(this).dialog("close");
},
"Cancel": function ()
{
$(this).dialog("close");
}
}
});
Hope it helps

Related

Send Jquery UI Dialog value to Url.Action

Not sure how to pass along a bool to my (working) C# method DeleteTestuser. I've Googled the heck out of this but mileage varies with all kinds of pitfalls, i.e. old information, bad syntax.
Rather than passing confirm as false, below, I need to return a bool if the user confirms the action. Thanks...
index.cshtml
<a href="#Url.Action("DeleteTestUser", "Home",
new {id = testUser.TestUserId, confirm = false})"
id="confirm-delete">
_layout.cshtml
<script type="text/javascript">
$(function () {
$('#dialog-modal').dialog(
{
title: 'Test User',
draggable: false,
resizeable: false,
closeOnEscape: true,
modal: true,
autoOpen: false,
buttons: {
'Yes': function () {
$(this).dialog('close');
confirmResult(true);
},
'No': function () {
$(this).dialog('close');
confirmResult(false);
}
}
});
$('#confirm-delete').click(function () {
$('#dialog-modal').dialog("open");
});
function confirmResult(result) { return result }
});
</script>
Basically, you're recreating your own confirm() with jQuery UI Dialog. I did this and here is a similar case: confirm form submit with jquery UI
Apply this to your scenario and you have something like:
$(function() {
function ui_confirm(message, callback) {
var dfd = $.Deferred();
var dialog = $("<div>", {
id: "confirm"
})
.html(message)
.appendTo($("body"))
.data("selection", false)
.dialog({
autoOpen: false,
resizable: false,
title: 'Confirm',
zIndex: 99999999,
modal: true,
buttons: [{
text: "Yes",
click: function() {
$(this).dialog("close");
dfd.resolve(true);
if ($.isFunction(callback)) {
callback.apply();
}
}
}, {
text: "No",
click: function() {
$(this).dialog("close");
dfd.resolve(false);
}
}],
close: function(event, ui) {
$('#confirm').remove();
}
});
dialog.dialog("open");
return dfd.promise();
}
function deleteUser(id){
// Code you will execute to delete a user or POST back.
}
$(".button").button();
$('.del').click(function(e) {
e.preventDefault();
// your code
$.when(ui_confirm("Are you sure?")).done(function(val) {
if (val) {
console.log("Delete User Confirmed.");
deleteUser($(this).attr("id"));
} else {
console.log("Do not delete user.");
}
});
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
John Smith Delete
You may be able to get away with just executing specific callbacks. That's up to you. This code can then also be used to pass along another function or to use with a prompt() like dialog.
Update
See: Using Url.Action in javascript
For example:
function deleteTestUser(uid, conf){
var url = '#Url.Action("DeleteTestUser", "Home", new {id=' + uid + ', confirm=' + conf + '})';
$.get(url, function(data){
console.log("User " + uid + " Deleted.");
});
}
I would use POST if possible.
function deleteTestUser(uid, conf){
$.post('#Url.Action("DeleteTestUser", "Home")', { id: uid, confirm: conf }, function(data){
console.log("User " + uid + " Deleted.");
});
}

jQuery dialog won't switch to modal after initialization

If I initialize my modal like this:
$("#dlg").dialog({
open: function (e) {
$(this).load('mvc action url');
},
close: function () {
$(this).dialog('destroy').empty();
},
modal: true
});
...it initializes as modal. However, if I leave out modal: true at initialization and try to set modality after the dialog is already open like this:
$("#dlg").dialog("option", "modal", true);
...it doesn't work. I know it's being set because I can alert the modal value after setting it. I'm also properly referencing jquery-ui's library because I can open it as modal at initialization.
Edit
Here's a fiddle:
http://jsfiddle.net/s9zmfkdn/1/
When you click open initially, it shows as modal as expected. Now remove the line as I instruct in the fiddle. When you open the dialog this time and then click Make it modal, nothing happens
So there are a few things that are causing this to fail to work as you anticipated.
You wrapped the initialization of the dialog in a function, so it was not globally available to other functions.
You destroy the dialog upon close, so it no longer exists to allow the change of the modal option.
It's not clear why you're doing it this way and I suspect there is something you're not sharing. Regardless, here is one example that works:
http://jsfiddle.net/Twisty/s9zmfkdn/2/
HTML
<div id="basesystem" title="whatever" style="display:none"></div>
<input type="button" class="moduleloader" value="Open" />
<input id="makemodal" type="button" value="Remove Modal" />
JavaScript
$(function() {
$("#basesystem").dialog({
open: function(e) {
$(this).html('<span>hello</span>');
},
close: function() {
$(this).empty();
},
modal: true,
autoOpen: false
});
$("#makemodal").click(function() {
if ($("#basesystem").dialog("option", "modal")) {
$("#basesystem").dialog("option", "modal", false);
$(this).val("Make Modal");
} else {
$("#basesystem").dialog("option", "modal", true);
$(this).val("Remove Modal");
}
});
$(".moduleloader").click(function() {
$("#basesystem").dialog("open");
});
});
Now if you need, you can define the object more globally and manipulate it like so:
http://jsfiddle.net/Twisty/s9zmfkdn/4/
HTML
<div id="basesystem" title="whatever" style="display:none"></div>
<input type="button" class="moduleloader" value="Open" />
<input id="makemodal" type="button" value="Remove Modal" data-modal="true" />
JavaScript
$(function() {
var $diag = $("#basesystem");
$(".moduleloader").click(function() {
$diag.dialog({
open: function(e) {
$diag.html('<span>hello</span>');
},
close: function() {
$diag.dialog("destroy").empty();
},
modal: $("#makemodal").data("modal")
});
});
$("#makemodal").click(function() {
if ($(this).data("modal")) {
$(this).data("modal", false);
$(this).val("Make Modal");
} else {
$(this).data("modal", true);
$(this).val("Remove Modal");
}
});
});
This creates a new dialog every time and destroys it upon close. The only difference is that modal preference is stored someplace. You could also do this by storing it in global variable too.
Update 1
Based on your description, what you'll want to do is remove or create the ui-widget-overlay element.
Try this on for size: http://jsfiddle.net/s9zmfkdn/5/
$(function() {
function removeOverlay() {
$(".ui-widget-overlay").remove();
}
function setOverlay() {
if ($(".ui-widget-overlay").length) {
return false;
}
var $ov = $("<div>", {
class: "ui-widget-overlay"
}).css({
width: $(window).width(),
height: $(window).height(),
zIndex: 1001
});
$("body").append($ov);
}
$("#basesystem").dialog({
open: function(e) {
$(this).html('<span>hello</span>');
var $button = $("<a>", {
href: "#"
}).html("Toggle Modal").button().click(function() {
if ($(".ui-widget-overlay").length) {
removeOverlay();
} else {
setOverlay();
}
}).appendTo($(this));
},
close: function() {
$(this).empty();
},
modal: true,
autoOpen: false
});
$("#makemodal").click(function() {
if ($("#basesystem").dialog("option", "modal")) {
$("#basesystem").dialog("option", "modal", false);
$(this).val("Make Modal");
} else {
$("#basesystem").dialog("option", "modal", true);
$(this).val("Remove Modal");
}
});
$(".moduleloader").click(function() {
$("#basesystem").dialog("open");
});
});

Trigger button in an iframed JQuery UI Dialog page from Save button

Here is the code I am using to initialize my dialog. I figured that since I the button doesn't exist which the page initially loads, I would need to use the on or live event to trigger the click (like in the Update call), but that hasn't worked. I confirmed that jQuery is finding the button using the console debugger but I cant for the life of me figure out how to trigger the button click.
Any suggestions?
$(function () {
var iframe = $('<iframe id="pageFrame" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen width="800" height="600"></iframe>');
var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 950,
height: 600,
close: function () {
iframe.attr("src", "");
},
buttons: {
"Save": function () {
if ($("#pageFrame").contents().length > 0) {
if ($("#pageFrame").contents().find("#btnCreateContent").length > 0) {
$("#pageFrame").contents().find("#btnCreateContent").click()
}
else if ($fuze("#pageFrame").contents().find("#btnUpdateContent").length > 0) {
$("#pageFrame").contents().find("#btnUpdateContent").on("click", function () {
alert("update triggered");
});
}
else if ($("#pageFrame").contents().find("#btnCopyContent").length > 0) {
$("#pageFrame").contents().find("#btnCopyContent").click();
}
}
},
Cancel: function () {
if (confirm("Are you sure you want to exit?\n\nUnsaved changes will be lost.")) {
$(this).dialog("close");
}
}
}
});
});
This turned out to be the answer
$("#pageFrame").contents()[0].getElementById("btnUpdateContent").click();
Hope this helps somebody else out

Ajax displays div dialog in mvc view

Pretty new to ajax.
So I have this div:
<div id="authentication" title="Authentication" >
<b>Please Generate a new token to continue!</b>
<br /><br />
<table>
<tr>
<td>Token:</td>
<td><input type="text" id="txtToken"/></td>
</tr>
<tr>
<td></td>
<td><label id="lblError"></label></td>
</tr>
</table>
</div>
which is not being displayed on my mvc view because it is a being used as a dialogue box by Ajax code below:
$('#authentication').dialog({
autoOpen: true,
width:500,
resizable: false,
beforeclose : function() { return false; },
title: 'Authentication',
modal: true,
buttons: {
"Cancel": function () {
window.location.replace("#Url.Action("Index", "Home")");
},
"Submit": function () {
var token=$('#txtToken').val();
var dlg = $(this);
$.ajax({
type: 'POST',
data: { 'token': token},
dataType: 'json',
url: '#Url.Action("CheckNewToken", "Account")',
success: function (result) {
if(result==true)
{
window.parent.jQuery('#authentication').dialog('destroy');
}
else{
$('#lblError').html("Incorrect credentials. Please try again");
}
},
error: function (xhr, ajaxOptions, thrownError) {
}
});
}
}
});
However when the codes goes to success and result == result, the dialog box is destroyed but the div (dialog box) is then being displayed on my view which I don't want. What am I doing wrong?
Close the dialog and then destroy. This will hide the dialog completely and then destroy its dialog features. if you just do .dialog('destroy') it will just remove the dialog functionality completely and display the element as is on the page but it wont hide.
success: function (result) {
if(result==true)
{
$('#authentication').dialog('close').dialog('destroy');
}
else{
$('#lblError').html("Incorrect credentials. Please try again");
}
},
Another thing is beforeclose : function() { return false; }, you are returning false which will prevent the close event from happening. it should be beforeClose though you can remove it safely.
if the above doesnt work another option to remove the div is by subscribing to close event:-
$('#authentication').dialog({
autoOpen: true,
width:500,
resizable: false,
title: 'Authentication',
modal: true,
close:function(){
$(this).dialog('destroy').hide();
},
buttons: {
"Cancel": function () {
},
"Submit": function () {
var token=$('#txtToken').val();
var dlg = $(this);
$('#authentication').dialog('close');
}
}
});

Problem with jquery ui dialog button

On my site I've a button that when is clicked open a dialog with a form already populated for send an e-mail. In this form I have a button called "invia" to send mail, the mail are sent correctly, what does not work it is closeing dialog after send e-mail. Here attacched my code:
Thanks in advance for help.
$("#invio_mail").live("click", function() {
if (m=="") //that's to prevent multiple dialog opening
{
$.post("./php/testo_mail_xml.php",
{contratto:contratto, piatta:piatta, testo:"stampa_login"},
function(xml)
{
if ($(xml).find("status").text()==1)
{
$("#ris_dial").load("./schemi/sch_mail.htm");
delay( function() { //that's a function for delay population
scorriDati(xml, "forMail"); //that's function for populate
}, 500);
var dm = {
modal: true,
height: 'auto',
width: 'auto',
title: "<span class='ui-icon ui-icon-info'></span> Invio Mail",
closeOnEscape: false,
buttons: {"Invia": function() {
$.post("./php/mail.php",
{dati:$("#forMail").serialize()},
function(xml)
{
if ($(xml).find("status").text()==1)
{
//var opt={close:true};
//$("#ris_dial").dialog(opt);
$(this).dialog("close"); //this is not wrking code
}
else
$(this).append($(xml).find("errore").text());
},"xml"
);
}
}
};
$("#ris_dial").dialog(dm);
}
else
{
$("#ris_dial").empty().append($(xml).find("errore").text());
$("#ris_dial").dialog(dialogError);
}
},
"xml"
);
m++;
}
});
the context of this changes inside of $.post()
save this before you call post:
var $this = $(this);
and change your call to close to be:
$this.dialog("close")

Resources