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>
Related
`
<!--jQuery--><script src="//code.jquery.com/jquery-1.12.4.js"></script>
<!--jQuery UI--><script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--jQuery UI CSS--><link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script>
function Alert(a){
$("#p")[0].innerHTML = a;
return new Promise(resolve => {
$("#main").dialog({
autoOpen: false,
height: "auto",
width: 400,
modal: true,
resizable: false,
buttons: {
"Ok": () => {
$(this).dialog("close");
resolve(true);
}
}
});
});
}
</script>
<script>
$(document).ready(function(){
await Alert("test");
});
</script>
<div title="Message!" id="main">
<p id="p"></p>
</div>
`
I'm wanting it to open a popup with the popup title of Message! and with the text of test.
I've tried so many things to fix this but I can't.
I've come to the conclusion that it's not selecting the elements properly.
Here is what I suggest:
The first thing I noticed is that there is no async on the left of function on your document ready. Try adding async and see if it solves the problem
Or may by try to combine that 2 script tags into one
If it still doesn't work, try logging it out with console.log() or regular alert() on your value, see if it's even return something at all. Maybe that $("#p") doesn't need the first index to be accessible because it is an id, not a class
conclusion that it's not selecting the elements properly
That's not correct, your code is working fine. Just that the dialog is not opened because autoOpen is set to false.
I tried this code, hope it helps:
(also I don't think you need Promise)
<!DOCTYPE html>
<html>
<body>
<div title="Message!" id="main">
<p id="p">Paragraph to change!</p>
</div>
<!--jQuery-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!--jQuery UI-->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--jQuery UI CSS-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script>
function Alert(a) {
alert("a: " + a)
$("#p")[0].innerHTML = "I have changed!";
$("#main").dialog({
autoOpen: true,
height: "auto",
width: 400,
modal: true,
resizable: false,
buttons: {
"Ok": () => {
$(this).dialog("close");
resolve(true);
}
}
});
}
$("document").ready(function() {
Alert("test");
});
</script>
</body>
</html>
Just one thing not related to your error though just informing you so you will remember this, this code is actually not right
$(document).ready(function(){
await Alert("test");
});
The await keyword is only valid inside async functions within regular JavaScript code.
Just rewrite right way... hope it helps!
Any questions, just ask and I'll answer in the comments.
<!--jQuery--><script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!--jQuery UI--><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--jQuery UI CSS--><link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"/>
<script type="text/javascript">
$(() => {
const Alert = (param) => {
const $dialog = $("#dialog");
$('#targetContent')
.html(param)
.ready(async () => {
$dialog
.dialog({
autoOpen: false,
height: "auto",
width: 400,
modal: true,
resizable: false,
buttons: {
"Ok": () => {
$($dialog).dialog("close");
return resolve(true);
}
}
});
})
;
};
Alert("test");
});
</script>
<div id="dialog">
<p id="targetContent">Old content</p>
</div>
I have following jquery code to pop up a dialog. It works fine for the first time. However, when the dialog closed, and I opened it again, the dialog text area is empty (no text displayed) with only three buttons. Now, if I reopen it again (3rd time, 4th time ...), everything works fine again (text was shown). As you can tell from the name, the function buttonClicked() to pop up the dialog is triggered by clicking a button. So anyone has any clue?
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
function buttonClicked() {
var dialog = $( "#dialog" ).dialog({
modal: true,
autoOpen: false,
buttons: {
"Cancel": function() {
$(this).closest('.ui-dialog-content').dialog('close');
},
"Button2": function() {
// do something
$(this).closest('.ui-dialog-content').dialog('close');
},
"Button1": function() {
... // do something
$(this).closest('.ui-dialog-content').dialog('close');
}
}
});
dialog .dialog( "open" );
}
<div id = "dialog" name="dialog" style="display:none; ">
<style>
.ui-dialog-titlebar-close .ui-icon-closethick {
position: relative !important;
margin-top: -9px !important;
margin-left: -16px !important;
}
</style>
<p>I am the text shown in the dialog!!</p></div>
$( function() {
$("#dialog").dialog({
modal: true,
autoOpen: false,
buttons: {
"Cancel": function() {
$(this).closest('.ui-dialog-content').dialog('close');
},
"Button2": function() {
// do something
$(this).closest('.ui-dialog-content').dialog('close');
},
"Button1": function() {
... // do something
$(this).closest('.ui-dialog-content').dialog('close');
}
}
});
$('#yourBtn').click(function(){
$("#dialog").dialog('open');
})
}
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 working on a small project (just a practice example - not for real use). Its a very simple CRUD application, and I am not aloud to alter the index.html. Also have to use JQuery UI Dialog and not prompt().
I got up to ADD functionality and I'm stuck. I've created a Jquery UI dialog that appends a form - its triggered when 'Add item' is clicked. Then The action for clicking 'yes' in the form needs to return what was in the input. I am unable to retrieve the value and there is no server side technology(like php)involved. function add_item() in answers.js is where I am working now.
I also don't know why, but an additional input box appears on the bottom of my html page after clicking 'Add item' (it should only append to the form )
*Note: CRUD functions begin after document.ready...lower on the page.
Also, besides the one default item in index.html list items are originally from a json file
*
answer.js
$(document).ready(function()
{
///////// REMOVE ALL ////////////
$(document).on("click", "div a:nth-of-type(3)", function(e)
{
e.preventDefault();
remove_all();
});
$("div a:nth-of-type(3)").click(remove_all);
///////// ADD ITEM ////////////
$(document).on("click", "#add_item", function(e)
{
e.preventDefault();
add_item();
});
$("#add_item").click(add_item);
///////// LOAD ALL ////////////
$(document).on("click", "div a:nth-of-type(2)", function(e)
{
e.preventDefault();
load_all();
});
///////// REMOVE ITEM ////////////
$(document).on("click", "#my_list a", function(e)
{
e.preventDefault();
var current_item = $(this).parent();
remove_item(current_item);
});
$("#my_list a").click(remove_item(current_item));
///////// EDITABLE ITEM ////////////
});
/// CRUD FUNCTIONS ////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
function add_item()
{
$('body').append('<div id="dialog-form"><form> Add your item:<br><input type="text" name="new_item" id="new_item" ></form></div>');
// JQUERY UI DIALOG
$( "#dialog-form" ).dialog({
resizable: false,
title:'Add new item',
height:240,
width:260,
modal: true,
buttons: {
"Yes": function() {
var test = $('#new_item').val();
alert(test);
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
}
function remove_all()
{
$('#my_list li').hide();
}
function load_all()
{
$.getJSON( "myLists/myList.json", function( json )
{
var items = json;
$('#my_list li').remove();
$.each(items, function(index,the_item)
{
$('#my_list').append('<li>'+the_item+'x</li>')
});
});
}
function remove_item(current_item)
{
// APPEND DIALOG BOX DIV
$('<div id="dialog-confirm">').appendTo('body');
// JQUERY UI DIALOG
$( "#dialog-confirm" ).dialog({
resizable: false,
title:'Remove this item?',
height:140,
width:260,
modal: true,
buttons: {
"Yes": function() {
$(current_item).hide();
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
}
INDEX.HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="jquery-ui/css/ui-lightness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="answer.js"></script>
<title>jQuery Test</title>
</head>
<body>
<div>
<h1>My Shopping List</h1>
Add Item | Load List | Clear List
<ul id="my_list">
<li>Brand New Shoes x</li>
</ul>
</div>
</body>
</html>
Offering a few updates that I think might help:
Working Example: https://jsfiddle.net/Twisty/5g72nncw/
$(document).ready(function() {
///////// REMOVE ALL ////////////
$(document).on("click", "div a:nth-of-type(3)", function(e) {
e.preventDefault();
remove_all();
});
$("div a:nth-of-type(3)").click(remove_all);
///////// ADD ITEM ////////////
$(document).on("click", "#add_item", function(e) {
e.preventDefault();
console.log("Running Add Item.");
add_item();
});
$("#add_item").click(add_item);
///////// LOAD ALL ////////////
$(document).on("click", "div a:nth-of-type(2)", function(e) {
e.preventDefault();
load_all();
});
///////// REMOVE ITEM ////////////
$(document).on("click", "#my_list a", function(e) {
e.preventDefault();
var current_item = $(this).parent("li");
remove_item(current_item);
});
//$("#my_list a").click(remove_item(current_item));
///////// EDITABLE ITEM ////////////
});
/// CRUD FUNCTIONS ////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
function add_item() {
if ($("#dialog-form").length == 0) {
console.log("Dialog not found, creating new Dialog.");
var newDialog = $("<div>", {
id: "dialog-form"
});
} else {
console.log("Dialog Found.");
var newDialog = $("#dialog-form");
newDialog.dialog("open");
return true;
}
newDialog.append("<label style='display: block;'>Add your item:</label><input type='text' id='new_item' />");
//$('body').append('<div id="dialog-form"><form> Add your item:<br><input type="text" name="new_item" id="new_item" ></form></div>');
// JQUERY UI DIALOG
newDialog.dialog({
resizable: false,
title: 'Add new item',
height: 240,
width: 260,
modal: true,
autoOpen: false,
buttons: [{
text: "Yes",
click: function() {
var test = $('#new_item').val();
console.log(test);
$("#my_list").append("<li>" + test + " <a href='#'>x</a></li>");
$(this).dialog("close");
$('#new_item').val("");
}
}, {
text: "Cancel",
click: function() {
$(this).dialog("close");
$('#new_item').val("");
}
}]
});
//$("body").append(newDialog);
newDialog.dialog("open");
}
function remove_all() {
$('#my_list li').remove();
}
function load_all() {
$.getJSON("myLists/myList.json", function(json) {
var items = json;
$('#my_list li').remove();
$.each(items, function(index, the_item) {
$('#my_list').append('<li>' + the_item + 'x</li>')
});
});
}
function remove_item(current_item) {
// APPEND DIALOG BOX DIV
$('<div id="dialog-confirm">').appendTo('body');
// JQUERY UI DIALOG
$("#dialog-confirm").dialog({
resizable: false,
title: 'Remove this item?',
height: 140,
width: 260,
modal: true,
buttons: {
"Yes": function() {
$(current_item).hide();
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
}
When removing an item, you want to pass the <li> to your function. This way it is removed from the <ul>.
When adding the item, I did not append the <div> to the body. I noticed when you appended the <div>, since it was not in the DOM when the page loaded, it does not get initialized as a .dialog() and thus is rendered into the HTML. My method avoids this.
Nothing wrong with the way you create the buttons, yet this is more specific and is how it is described by the UI API: http://api.jqueryui.com/dialog/#option-buttons
Hope this helps.
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
});