I've added a jquery UI dialog to an mvc page. After the dialog is opened I need to catch the bool values if the dialog is dismissed or confirmed.
So far I have tried to add a call back as mentioned in another answer, but I'm not sure how to pass that value back to the $('#escalation').on('click', '.delete', function (evt) so that I may perform a redirect if true.
Question:
How can I pass back a bool value to calling function from Jquery UI modal dialog?
Pseudo code:
This is my intended flow of execution for the below fuctions:
1.Call dialog open on a button click. - (working)
2.Pass back true or false depending on if the user selected 'ok' or 'cancel' in the modal dialog.
3.Close the dialog if the returned result to the button click event is false. Otherwise call window.location.href = RedirectTo; code.
Code:
Dialog markup -
<div id="dialog-confirm" title="Delete Selected Record?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This record will be permanently deleted.</p> <p>Are you sure?</p>
</div>
Jquery scripts -
<script>
var baseUri = '#Url.Content("~")';
$(document).ready(function () {
$('#escalation').DataTable({
"order": [[6, "desc"]]
});
$('#escalation').on('click', '.delete', function (evt) {
var cell = $(evt.target).closest("tr").children().first();
var EscalationID = cell.text();
var RedirectTo = baseUri + "/EscalationHistory/DeleteEscalation?EscalationID=" + EscalationID;
////open dialog
evt.preventDefault();
$("#dialog-confirm").dialog("open");
//Need to call this code if the dialog result callback equals true
window.location.href = RedirectTo;
//Otherwise do nothing..close dialog
});
//Dialog opened here, not sure how to pass back the boolean values
//to the delete click function above
$("#dialog-confirm").dialog({
autoOpen: false,
modal: true,
buttons: {
"Confirm": function () {
callback(true);
},
"Cancel": function () {
$(this).dialog("close");
callback(false);
}
}
});
});
</script>
Just write your target code inside button click handler or set a flag and use $(".selector").on("dialogclose", function(event, ui) {}); event handler to check the flag state.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$(function() {
var baseUri = "http://localost";
$("#dialog-confirm").dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 450,
open: function() {
$(this).data("state", "");
},
buttons: {
"OK": function() {
$(this).data("state", "confirmed").dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
$(".btn").click(function() {
var escalationId = $(this).data("escalation-id");
var redirectTo = baseUri + "/EscalationHistory/DeleteEscalation?EscalationID=" + escalationId;
// Use "bind" instead "on" if jQuery < 1.7
$("#dialog-confirm").dialog("open").on("dialogclose", function(event, ui) {
if ($(this).data("state") == "confirmed") {
location.replace(redirectTo);
}
});
});
});
</script>
</head>
<body>
<button class="btn" data-escalation-id="123">Delete 123</button>
<button class="btn" data-escalation-id="124">Delete 124</button>
<div id="dialog-confirm" style="display:none">Are you sure?</div>
</body>
</html>
But, IMO, logically better to write the code directly in button click handler.
Related
Hello i am trying to do custom popup for confirm window ( as i know its impossible to change that)
$('.delete_current_form').on('click', function() {
if( confirm("{{ 'Post will be deleted! Continue?'|trans }}") ){
var scheduleEntryId = $(this).attr('data-id');
if (scheduleEntryId) {
$.get('{{ path('schedule_delete_entry', {'id': '0'}) }}'.replace('0', scheduleEntryId));
$(this).attr('data-id', '');
}
$(this).parent().parent().parent().removeClass('selected_field');
$(this).closest('.all_wrap').find('form select, form textarea').val('').change();
$(this).closest('tr').removeClass('green_background');
$(this).closest('.all_wrap').addClass('showing_real');
allCounts();
}
});
As you noticed there is function that is made on click on specific div element. i want to make popup else where to run code only when i click yes, and do nothing when i click no.
<div class="popup">
<div class="yes_button">YES</div>
<div class="no_button">NO</div>
</div>
what i am trying to achieve it
1. i click on delete_current_form button
2. .popup shows up and if i click .yes_button the code that is inside .delete_current_form if runs
confirm() is javascript native method, you can't change its behavior, you can still handle Ok and Cancel click event.
See this fiddle for working of the same:
$(document).ready(function() {
$('.delete_current_form').on('click', function() {
if(confirm("{{ 'Post will be deleted! Continue?'|trans }}") ){
alert("Ok clicked");
// Do whatever you want to do when OK clicked
}
else{
alert("Cancel clicked");
// Do whatever you want to do when Cancel clicked
}
});
});
Comment Edit:
As you can't change the confirm behavior, you can go for a custom modal popup. As the question is tagged with jQuery I would suggest you use jquery-ui.
//Set up the dialog box
$("#myDialog").dialog({
autoOpen : false,
modal : true,
title : "Title",
buttons : {
'Yes' : function() {
var textValue = $('#myTextBox').val();
alert('Yes clicked');
//Do whatever you want to do when Yes clicked
},
'No' : function() {
alert('No clicked');
//Do whatever you want to do when No clicked
$(this).dialog('close');
}
}
});
//Open the dialog box when the button is clicked.
$('#clickMe').click(function() {
$("#myDialog").dialog("open");
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script>
<div id="myDialog">
Content of the modal dialog box.
</div>
<button id="clickMe">Click Me</button>
Try the #Thulasiram's answer for creating Yes or No confirm box
Yes or No confirm box using jQuery
Hope this will solve your problem.
ConfirmDialog('Are you sure');
function ConfirmDialog(message) {
$('<div></div>').appendTo('body')
.html('<div><h6>' + message + '?</h6></div>')
.dialog({
modal: true,
title: 'Delete message',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
buttons: {
Yes: function() {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();
$('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
$(this).dialog("close");
},
No: function() {
$('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');
$(this).dialog("close");
}
},
close: function(event, ui) {
$(this).remove();
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
I have a problem using JQuery and JQuery UI. I have moved to the latest stable version in case that was the issue but I have determined that it isn't.
I am using Chrome
When I use the dialog I created by clicking the element it works without a problem. You can open it and close it mutiple times.
When I use the dialog by clicking the input box (I use the focus event). It opens but it will never close. It dissapears from the screen but the screen remains in modal. If I call the dialog isOpen function I still get true.
I can't find any documentation on this. Can anyone explain the difference in behaviour?
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script>
function RepetitionIntervalInput_display(str, title, okfn, cancelfn) {
$( "#RepetitionIntervalInput_dlg" ).dialog( "open" );
};
$(document).ready(function() {
var ret = "<div id=\"RepetitionIntervalInput_dlg\" title=\"Input Repetition Interval\">";
ret += "</div>";
$("body").append(ret);
$( "#RepetitionIntervalInput_dlg" ).dialog({
autoOpen: false,
width: 500,
modal: true
});
$(document).on('click.tab_stateset', "a[href$='#tab_stateset_delete']", function(event) {
RepetitionIntervalInput_display(
"STRING",
"TITLE",
function () {
console.log("OK");
},
function () {
console.log("CANC");
}
);
event.preventDefault();
});
$(document).on('focus.tab_stateedit', ".tab_stateedit_repetitioninterval", function() {
RepetitionIntervalInput_display(
"STRING",
"TITLE",
function () {
console.log("OK");
},
function () {
console.log("CANC");
}
);
});
});
</script>
</head>
<body>
<h1>A</h1>
aaa
<input type="text" value="NULL" class="tab_stateedit_repetitioninterval"></input>
</body>
</html>
You had a problem with the focus event, which is called twice (on the first click, and once the dialog was closed) and therefore your dialog's "open" was triggered twice.
The fix was to use click on the input instead of focus.
Here is a your snippet with the fix:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script>
function RepetitionIntervalInput_display(str, title, okfn, cancelfn) {
$( "#RepetitionIntervalInput_dlg" ).dialog( "open" );
};
$(document).ready(function() {
var ret = "<div id=\"RepetitionIntervalInput_dlg\" title=\"Input Repetition Interval\">";
ret += "</div>";
$("body").append(ret);
$( "#RepetitionIntervalInput_dlg" ).dialog({
autoOpen: false,
width: 500,
modal: true
});
$(document).on('click', "a[href$='#tab_stateset_delete']", function(event) {
RepetitionIntervalInput_display(
"STRING",
"TITLE",
function () {
console.log("OK");
},
function () {
console.log("CANC");
}
);
event.preventDefault();
});
$(document).on('click', ".tab_stateedit_repetitioninterval", function() {
RepetitionIntervalInput_display(
"STRING",
"TITLE",
function () {
console.log("OK");
},
function () {
console.log("CANC");
}
);
});
});
</script>
</head>
<body>
<h1>A</h1>
aaa
<input type="text" value="NULL" class="tab_stateedit_repetitioninterval"></input>
</body>
</html>
I have tried various ways of describing "dialog-1" to no avail. The same code works fine as part of the page body if the dialog function is called from there. The same code does not work from inside the form.
Thanks for your help.
This function displays the dialog box just fine.
function helpSThtml () {
$(function() {
$( "<div id='dialog-1' title='Dialog Title goes here...'>This my first jQuery UI Dialog!</div>" ).dialog({
height: 140,
modal: true,
open: function (event, ui) {
$('.ui-dialog').css('z-index',950);
$('.ui-widget-overlay').css('z-index',949);
},
});
});
}
This function appears to do nothing at all.
function helpSTvar () {
$(function() {
$( "#dialog-1" ).dialog({
height: 140,
modal: true,
open: function (event, ui) {
$('.ui-dialog').css('z-index',950);
$('.ui-widget-overlay').css('z-index',949);
},
});
});
}
</script>
<div id="dialog-1" title="Dialog Title goes here...">This my first jQuery UI Dialog!</div>
</head>
It seems div tag is in header section, it should be in body
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="dialog-1" title="Dialog Title goes here...">This my first
jQuery UI Dialog!</div>
</body>
</html>
Try it!
Your <div> needs to be inside <body> instead of <head>;
It's not a good pratice to have $(function(){ inside every function, instead you should do like this:
function helpSTvar () {
$( "#dialog-1" ).dialog({
height: 140,
modal: true,
open: function (event, ui) {
$('.ui-dialog').css('z-index',950);
$('.ui-widget-overlay').css('z-index',949);
},
});
}
$(function(){
helpSTvar(); // call one or more functions when document's ready
});
I'm trying to make a web page by using xhr aJax.
I received Jquery Dialog via xhr.responseText .
A.jsp (Actually viewed page's getting data part)
function getOrderData(tableid){
if(xhrGetOr) {
xhrGetOr.open("GET", "http://localhost:8080/Erpos/POS_orderAjaxGet.html?id="+tableid,true);
xhrGetOr.onreadystatechange = function() {
if(xhrGetOr.readyState == 4 && xhrGetOr.status == 200){
var dialog = $(xhrGetOr.responseText).appendTo('body');
viewdialog();
}
}
xhrGetOr.send(null);
}
}
When I click some button, getOrderData() is called and As all data is received, viewdialog() method is also called. So, dialog is displayed in a web page.
POS_orderAjaxGet.jsp
<script>
function viewdialog() {
$( "#dialog" ).dialog({
closeOnEscape: false,
autoOpen: true,
resizable: false,
draggable: true,
move:false,
height:830,
width:1085,
modal: true,
position:[0,0]
});
}
function closeMenu() {
alert("close event"); // this is well displayed
$( "#dialog" ).dialog("close");
}
</script>
<body>
<div id="dialog" title="order">
<input id="ocancel"type="button" class="btn" value="close"
onclick="closeMenu();">
</div>
</body>
Everything is good. but $( "#dialog" ).dialog("close") is not working. So I moved closeMenu() function to A.jsp. also not working...
pure POS_orderAjaGet's closeMenu() is very well wokring.
I think A.jsp can't find id 'dialog'
Let me know What problems is.
function closeMenu() {
document.getElementById("dialog").parentNode.remove();
}
It same work. But I think that is not good solution.
I am using JQueryUI Dialog box to show a link. I have 20 buttons with 20 different links. I wan't to pass that link so the Dialog box knows which link to open.
Here is the code:
$(function () {
$(document).ready(function () {
$('#dialog').dialog(
{
autoOpen: false,
modal: true,
open: function (event, ui) {
var id = $(this).data('aid'); // It does not work here
$(this).load("Link?id=" + id);
},
hide:
{
effect: "explode",
duration: 500
}
});
});
$('input[type=submit]').click(function () {
var id = $(this).data('aid'); // Works here. I wan't to pass this.
$("#dialog").dialog("open")
});
});
MVC/Razor:
<input type="submit" value="Show" class="button" data-aid="#Model.item.id" />
Does anyone have any suggestions on how I can accomplish this?
Prior to opening the dialog, set a data property to #dialog - which is inturn accessible as this inside the open() callback:
$("#dialog").data('aid', $(this).data('aid')).dialog("open");
Now this should work:
...
open: function (event, ui) {
var id = $(this).data('aid'); // Now it will work here
$(this).load("Link?id=" + id);
},
...