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>
Related
I'm trying to make a div from inside of the dialog be the 'close' button of the dialog box, but after passing an event onto it, I get this error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
I've tried intializing it in a variable (with var $this = $(this);) but nothing seems to be getting rid of that error.
My HTML & PHP:
<?php
print(
"<div id='dialogBox' class='dialogBox shadow ui-draggable ui-resizable' style='display: block; top:20px;'>".
"<div id='boxHeader'>".
"<div id='boxHeaderText'>"._BEANDF_LOG_SELECT. "</div>".
"<div id='closeBox'>". _BEANDF_CONTROL_CENTER_CLOSE. "</div>".
"<div style='clear:both'>".
"</div>".
"</div>".
);
?>
The jQuery:
function initImpactFactorDialog(){
$("#opener").click(function() {
($("#dialogBox").dialog("isOpen") == false) ? $("#dialogBox").dialog("open") : $("#dialogBox").dialog("close") ;
});
$("#dialogBox").dialog({
autoOpen: false,
draggable: true,
width: 700,
height: 300,
position:[440,118],
//buttons
close:
$("#closeBox").click(function() {
$(this).dialog('close');
})
});
}
The dialog box should close when clicking on my custom button.
Thank you!
close doesn't appear to be an option in jQuery UI Dialog. It looks like you're intending that to be part of the buttons option. Something structurally more like this:
buttons: {
close: someFunction
}
At that point the key difference here is the function. You're not passing a function, you're immediately invoking a jQuery selector to attach a click handler. Inside that click handler, you're referring to the button being clicked as the dialog. As the error tells you, since that button element was never initialized as a dialog, it can't be closed.
You don't need to manually create the click handler. Just use the handler function in the jQuery UI Dialog options:
buttons: {
close: function () {
$(this).dialog('close');
}
}
On the other hand, if you don't want a dialog "close" button but want to use this custom button, then don't initialize it in the dialog buttons. In that case you'd initialize a click handler outside of the jQuery UI dialog initialization, and you'd refer to the dialog (not to this). Something like:
$("#dialogBox").dialog({
// your initialization options, without buttons
});
$("#closeBox").click(function() {
$("#dialogBox").dialog('close');
});
It seems like you're mixing up the two approaches, that's all.
You've assigned the close callback function incorrectly. Consider the following:
function initImpactFactorDialog() {
$("#opener").click(function() {
$("#dialogBox").dialog("open");
});
$("#dialogBox").dialog({
autoOpen: false,
draggable: true,
width: 700,
height: 300,
position: [440, 118],
modal: true
});
$("#closeBox").button().click(function() {
$("#dialogBox").dialog("close");
});
}
initImpactFactorDialog();
<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>
<button id="opener">Open</button>
<div id='dialogBox' class='dialogBox shadow ui-draggable ui-resizable' style='display: block; top:20px;'>
<div id='boxHeader'>
<div id='boxHeaderText'>Log Select</div>
<div id='closeBox'>Close</div>
<div style='clear:both'>
</div>
</div>
</div>
Personally, I would use the dialog box buttons; yet if you want to have your own button, you will assign the click callback outside of the assignment of the dialog.
Now consider this code:
function initImpactFactorDialog() {
$("#opener").click(function() {
$("#dialogBox").dialog("open");
});
$("#dialogBox").dialog({
autoOpen: false,
classes: {
"ui-dialog": "ui-widget-shadow dialogBox"
},
draggable: true,
modal: true,
title: "Log Selection",
buttons: [{
text: "Close",
click: function() {
$(this).dialog("close");
}
}]
});
}
initImpactFactorDialog();
<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>
<button id="opener">Open</button>
<div id='dialogBox'>
<select>
<option>Log 1</option>
<option>Log 2</option>
<option>Log 3</option>
</select>
</div>
This uses a little less HTML yet gives you a good UI look and a lot of functionality.
Hope this helps.
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'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.
I am attempting to open a dialog from an existing dialog after clicking on a link in the existing dialog. I have been unable to get the new dialog to pop up. Below is the JavaScript:
$(function() {
$("#homepage-description").dialog({
autoOpen: false,
modal: true,
buttons: {
'Sign Up': function() {
$(this).dialog('close', function() {
$(this).dialog('close');
$("#signup-description").dialog("open");
});
},
'Log In': function() {
$(this).dialog('close');
$("login-description").dialog("open");
}
}
}).dialog("widget").find(".ui-dialog-buttonset button")
.eq(0).addClass("btn btn-large").attr('id', 'home-sign').end()
.eq(1).addClass("btn btn-large").attr('id', 'home-log').end();
$("#welcome-link").click(function() {
$("#homepage-description").dialog("open").load("/homepage/");
return false;
});
$(".ui-dialog-titlebar-close").click(function() {
$("#homepage-description").dialog("close");
});
$("#home-sign").click(function() {
$("#signup-description").dialog("open").load("/sign-up/");
return false;
});
$("#home-log").click(function() {
$("#login-description").dialog("open").load("/login/");
return false;
});
$(function() {
$("#tos-description").dialog({
autoOpen: false,
modal: true
});
$("#home-tos").click(function( event ) {
event.preventDefault();
$("#tos-description").dialog("open").load("/tos/");
return false;
});
$(".ui-dialog-titlebar-close").click(function() {
$("#tos-description").dialog("close");
});
});
This is the html:
<div id="home-body">
<p class="titles">Some Words Here</p>
<div id="home-photo">
<img src="{{ STATIC_URL }}img/frontimage.png">
</div>
<div id="home-list">
<ol>
<li class="flat-text flat-bold">Find</li>
<li class="flat-text flat-bold">Download</li>
<li class="flat-text flat-bold">Go</li>
<li class="flat-text flat-bold">Come back</li>
</ol>
</div>
<div id="home-buttons">
</div>
<div id="flat-links">
<a id="home-tos" href class="flat-text flat-bold">Terms of use</a> - <a id="home-privacy" href class="flat-text flat-bold">Privacy Policy</a> - <a id="home-site" href class="flat-text flat-bold">Sitemap</a>
<div id="tos-description"></div>
</div>
The ideal situation is to click on one of the links at the bottom of the html and have new dialog open. I have been unable to accomplish this and I am uncertain of what to do at this point. I have been able to get links to open a dialog, but the same approach fails when I attempt to open a new dialog from an existing one while clicking on links (I have been able to get a new dialog to open from an existing dialog when using buttons however.)
Actually this is possible and I just did it a few days ago.
Can you make sure your click event is bind correctly in your dialog? Maybe put an alert on click and see if it actually works?
Is this where you are opening the new dialog?
$("#home-tos").click(function( event ) {
event.preventDefault();
$("#tos-description").dialog("open").load("/tos/");
return false;
});
Can you just test something like this:
$("#home-tos").live("click", function() {
alert("click worked");
});
There's also an open method of dialog, where you could do this:
$("dialog-div").dialog({
autoOpen: false,
open: function() {
$(this).find("yourbutton")click(function() {
alert("click worked");
});
}
});
jsfiddle: http://jsfiddle.net/XkwyG/1/
Thanks to #Rafi W. for leading me down the right path. The click event was not binding so I did some more looking around and I ended up with the following JS:
$(function() {
var linkPop = {
autoOpen: false,
modal: true,
};
$(document).on("click", "#home-tos", function( event ) {
event.preventDefault();
$("#tos-description").dialog(linkPop).dialog("open").load("/tos/");
return false;
});
$(".ui-dialog-titlebar-close").click(function() {
$("#tos-description").dialog("close");
});
});
This question also helped in getting to the ultimate result
I'm pretty much a total noob to JavaScript and jQuery and I'm having trouble getting a basic dialog box working. Here is my code:
<script type="text/javascript">
$(document).ready(function() {
var dialog = $("#dialog");
dialog.dialog({
title: "Dialog",
modal: true,
draggable: false,
resizable: false,
autoOpen: false,
width: 500,
height: 400
});
dialog.hide();
});
function showDialog() {
$("#dialog").dialog("open");
}
$("ui-widget-overlay").click(function() {
$(".ui-dialog-titlebar-close").trigger("click");
});
</script>
<div id="dialog">
Dialog text.
</div>
<button onclick="showDialog()">Show Dialog</button>
When I click the button, the title bar of the dialog comes up and the background of the page dims, but there are two problems:
The body of the dialog does not show (all that shows is the title bar)
When I click outside of the dialog, the dialog does not close. I have to click the "x" in the corner in order for the dialog to close.
I've been reading tons of related questions on here, but nothing I try seems to work. Any advice?
I believe the problem you're having is from this line:
dialog.hide();
What I would suggest is removing all of the dialog content from the dialog div and populating it when you actually show the dialog.
<div id="dialog"></div>
function showDialog()
{
$("#dialog").html("Dialog Text.");
$("#dialog").dialog("open");
}
As for handling the close part, have you tried nesting everything in the main page in a <div> of its own and then handling that click event?
<div id="mainPageDiv">
</div>
$("#mainPageDiv").click(function(){
$("#dialog").dialog("close");
});
Just use a modal dialog and close the dialog when they click the overlay. Also, you should not need to put any code in $(document).ready for this.
function showDialog() {
var dialog = $("#dialog");
dialog.dialog({
title: "Dialog",
modal: true,
open: function () {
$('.ui-widget-overlay').bind('click', function () {
dialog.dialog('close');
});
}
});
}
Demonstration
I see your:
$("ui-widget-overlay").click(
perhaps should select a class:
$(".ui-widget-overlay").click(
which does not happen as it does not exist, so you need to hook it to the document.
and the dialog.hide(); is not needed as it hides it automatically when it becomes a dialog
SO you should have:
$(document).on('click',".ui-widget-overlay", function() {
$(".ui-dialog-titlebar-close").trigger("click");
});
more simply:(if you have no other dialogs you need to deal with this way)
$(document).on('click',".ui-widget-overlay", function() {
$("#dialog").dialog("close");
});
sample fiddle to show full reworked code: http://jsfiddle.net/GrFE3/2/
I am adding this as an additional answer as it goes about this differently, changing the markup, removing the in-line event handler in the markup, uses your button, and uses your dialog variable (differently than you, but...
<div id="dialog">
Dialog text.
</div>
<button id="showDialog">Show Dialog</button>
and the code for that markup:
$(document).ready(function() {
var dialog = $("#dialog");
dialog.dialog({
title: "Dialog",
modal: true,
draggable: false,
resizable: false,
autoOpen: false,
width: 500,
height: 400
});
$('#showDialog').click(function() {
dialog.dialog("open");
});
$(document).on('click', ".ui-widget-overlay", function() {
dialog.dialog("close");
});
});