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.
Related
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 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 am trying to use a dialogue box modal for displaying terms and condition on my webpage. But at button disagree the webpage doesnot close while calling function window.close. I want to close the recent page after clicking the button disagree
Below pasted is the sample code I am having problem at.
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:600,
width:400,
modal: true,
buttons: {
'Agree': function() {
$( this ).dialog( window.location.assign('../mdv/main.php') );
},
'Disagree': function() {
$( this ).dialog( window.close() );
}
}
});
});
</script>
Thank you in advance.
You do it like this:
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:600,
width:400,
modal: true,
buttons: {
'Agree': function() {
$( this ).dialog( window.location.assign('../mdv/main.php') );
},
'Disagree': function() {
$( this ).dialog("close");
}
}
});
});
</script>
You can either close the dialog itself using the code above or you can close the window if it's a popup window opened previously via JavaScript.
In which case you'll need the reference of that to invoke the close method.
However you can't close an entire webpage/tab with JavaScript which is a javaScript limitation. As I mentioned, you can only close it if it was previously opened with JavaScript.
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");
});
});
I have a table that, when any row is clicked, launches a jQueryUI modal dialog box to allow users to edit that record. I use the following script which seems to work, successfully loading the relevant record's details in using AJAX:
$("#datatbl tr").bind('click', function() {
var url = 'item_edit.asp?id='+$(this).attr("data-myid");
var dialog = $('<div style="display:hidden" title="Record details:"></div>').appendTo('body');
// load remote content
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog({
height: 440,
width: 550,
autoOpen: false,
modal: true,
buttons: {
"Update this record": function() {
$('#editform').submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
dialog.dialog('open');
}
);
//prevent the browser to follow the link
return false;
});
It works ok the first time I click on a record, but if I click cancel and try to edit another record, the dialog box does appear (with the correct record details) however, no scripts within the dialog box work - eg: there's a jqueryUI datepicker input and some validation.
There are no javascript errors and, from my limited understanding of FireBug, I can't spot anything going wrong so I would appreciate some advice how to proceed, thanks!
EDIT: Argh! Sometimes, it takes something like typing it out here to spot the obvious. I just realised that the DIV created for the dialog box doesn't get destroyed when the box closes. I've added a line to do this and it now works. Thanks for listening. :)
For future reference, I added an ID to the DIV created in 'var dialog' and removed it in the Cancel function:
Cancel: function() {
$( this ).dialog( "close" );
$('#dialogbox').remove();
}
I'd still appreciate if anybody suggests a better way to handle this behaviour.
I fixed it: the DIV created for the dialog box doesn't get destroyed when the box closes.
I added an ID to the DIV created in 'var dialog' and removed the DIV in the Cancel function:
Cancel: function() {
$( this ).dialog( "close" );
$('#dialogbox').remove();
}
You can create the dialog at one time only, not on every load of its content, just set the autoOpen to false.
<div id="dialog">
<div id="content" style="display:hidden" title="Record details:"></div>
</div>
$('#dialog').dialog({
height: 440,
width: 550,
autoOpen: false,
modal: true,
buttons: {
"Update this record": function() {
$('#editform').submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$("#datatbl tr").bind('click', function() {
var url = 'item_edit.asp?id='+$(this).attr("data-myid");
// load remote content
$('#content').load(url);
$('#dialog').dialog('open');
return false;
}};