I have a very simple dialog box
<script>
$(function() {
$( "#openDialog").on("click", function(){
$( "#dialog-modal" ).dialog({
height: 300,
width: 600,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$( "#dialog-modal" ).show();
});
});
</script>
I am populating this dialog with a HTML table that has information passed into it from a Java method. I can get this working when the page is loaded but i want the information to load with the user opens the dialog box.
I have checked the API of jquery ui and the dialog has a beforeClose function but no beforeOpen function. What would be the best way of doing this? I have tried callbacks when the user opens the dialog box ( on the .show ) but i cannot get this working
<script>
$(function() {
$( "#openDialog").on("click", function(){
$( "#dialog-modal" ).dialog({
height: 300,
width: 600,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$( "#dialog-modal" ).show(function(
JavaClass.javaMethod();
));
});
});
</script>
Why not just
<script>
$(function() {
$( "#openDialog").on("click", function(){
if (shouldOpenDialog()){ // Do what you must do here
$( "#dialog-modal" ).dialog({
height: 300,
width: 600,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$( "#dialog-modal" ).show();
}
});
});
</script>
EDIT: Or, if your verification is asynchronous,
<script>
$(function() {
$( "#openDialog").on("click", function(){
if (shouldOpenDialog(function() { // Do what you must do here
$( "#dialog-modal" ).dialog({
height: 300,
width: 600,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$( "#dialog-modal" ).show();
});
});
});
</script>
having
function shouldOpenDialog(callback) {
asyncCall(onComplete: function(o){
if (o.ok)
callback();
});
}
Related
I am calling up a confirm box using jQuery UI Dialog like so:
function tps_show_confirm(cTitle, cContent, noClose = true, dwidth = 300, callback=null) {
if (noClose == true) {
var dClass = 'no-close';
} else {
var dClass = '';
}
var confirmDiv = '<div class="tps-confirm-modal">'+cContent+'</div>';
var maxHeight = window.innerHeight * .80;
$( confirmDiv ).dialog({
title: cTitle,
dialogClass: dClass,
modal: true,
width: dwidth,
maxHeight: maxHeight,
draggable: false,
resizable: false,
create: function(event, ui) {
$('body').css({ overflow: 'hidden' })
},
beforeClose: function(event, ui) {
$('body').css({ overflow: 'inherit' })
},
buttons: {
Ok: function() {
if (typeof callback === 'function') {
callback();
}
$( this ).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
}
I am trying to figure out how to delay the .dialog('close') action when the OK button is clicked until the callback() function is finished. I've tried various combinations of .done() an/or .finish() and .when() but I don't quite understand those and they don't seem to be for this case.
Any ideas how to achieve this?
Hopefully jquery.when will be useful
Ok: function() {
if (typeof callback === 'function') {
$.when(callback()).then(function() {
$(this).dialog('close');
}.bind(this));
}else{
$( this ).dialog('close');
}
}
This snippet can be useful. I am passing a callback back function.Inside a callback function there is an asynchronous call.Now when you will click on ok button the callback function will start executing but the dialog will be closed only when there is a response from async operation
function tps_show_confirm(callback = null) {
var confirmDiv = '<div class="tps-confirm-modal">Hello Test</div>';
var maxHeight = window.innerHeight * .80;
$(confirmDiv).dialog({
title: 'test',
dialogClass: 'dClass',
modal: true,
width: 300,
maxHeight: 300,
draggable: false,
resizable: false,
create: function(event, ui) {
$('body').css({
overflow: 'hidden'
})
},
beforeClose: function(event, ui) {
$('body').css({
overflow: 'inherit'
})
},
buttons: {
Ok: function() {
if (typeof callback === 'function') {
$.when(callback()).then(function(data) {
console.log(data)
$(this).dialog('close');
}.bind(this));
} else {
$(this).dialog('close');
}
},
Cancel: function() {
$(this).dialog('close');
}
}
});
}
function test() {
var root = 'https://jsonplaceholder.typicode.com';
return $.ajax({
url: root + '/posts/1',
method: 'GET'
}).then(function(data) {
return data;
});
}
tps_show_confirm(test)
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
I am using the basic modal confirmation example but when I user clicks on the Approvebutton, I want it to execute the php function Approve();
<script>
$( function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Approve": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
} );
</script>
echo "<a href='test.php?cmd_test=approve_ts&test_id=$test_id'>Approve</a>";
if (isset($_GET["cmd_test"]))
{
$test_id = $_GET['test_id'];
//do other stuff
}
Create a PHP script. I'll call it ajax.php. In that, put your PHP code.
<?php
if (isset($_GET["cmd_test"]))
{
$test_id = $_GET['test_id'];
//do other stuff
}
?>
Then, as others have said, use an AJAX request.
$.get('ajax.php', function (data) {
// do stuff here
});
Put that in your Approve/Cancel functions
delete dialog box is not getting opened
my code
view:
`<div id="dialog-confirm" title="Delete dialog" style="display: none;">
<p>
Are you sure you want to delete the point?
</p>
</div>`
javascript:
`options += '<div onclick="editPoint(' + id + ')">Edit</div>
<div onclick="deletePoint(' + id + ')">Delete</div>';
optionsBox.html(options);`
controller:
public string delete_marker ( string Id )
{
try
{
mapmaker_dbDataContext DB = new mapmaker_dbDataContext ();
DB.SP_DeletePoint ( Id, /"Innayat"/ User.Identity.Name );
return "Point successfully deleted";
}
catch (Exception exc)
{
return "Delete operation failed";
}
}
delete function:
function deletePoint(id) {
MapScript.removeOptionsBox();
$( "#dialog-confirm" ).css('display','block');
alert('in detele');
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete": function() {
var link = '<%= Url.Action("delete_marker", "Home", new { id = "-1" }) %>';
link = link.replace("-1",id);
$.ajax({
url: link,
type: "GET",
cache: false,
success:
function (data) {
//alert(data);
if($('.up-triangle.firstAnimationA').length || $('.up-triangle.firstAnimationB').length )
//LoadList(0);
LoadNeighborhoodList(0, MapScript.neighborhoodCenter.latitude, MapScript.neighborhoodCenter.longitude);
if($('.up-triangle.secondAnimationA').length || $('.up-triangle.secondAnimationB').length )
//LoadList(1);
LoadNeighborhoodList(1, MapScript.neighborhoodCenter.latitude, MapScript.neighborhoodCenter.longitude);
if($('.up-triangle.thirdAnimationA').length || $('.up-triangle.thirdAnimationB').length )
{
//LoadList(2);
LoadNeighborhoodList(2, MapScript.neighborhoodCenter.latitude, MapScript.neighborhoodCenter.longitude);
}
},
error: function(){
alert('Delete operation failed');
}
});
$( this ).dialog( "close" );
$( "#dialog-confirm" ).css('display','none');
alert('delete button clicked');
},
"Cancel": function() {
$( this ).dialog( "close" );
$( "#dialog-confirm" ).css('display','none');
}
}
});
$( "#dialog-confirm" ).dialog();
}
its giving error what wrong with the code? even if i replace the ajax functionlity with an alert its again giving error
Declare your dialog div on load body or document like this ...
$(function() {
$( "#dialog-confirm" ).dialog({
autoOpen: false});
});
I have an Asp.Net MVC application, where in 1 View, I have a list with every record showing Edit icon. Clicking the edit icon opens a modal dialog popup to update the record .
I face problem in reopening the dialog or clicking other edit icon for popup after closing the dialog .
Following is my jquery code to open the dialog :
var singltym;
$(function () {
$('#addSingleTimeDialog').dialog({
cache: false,
autoOpen: false,
width: 450,
height: 450,
closeOnEscape: true,
resizable: true,
modal: true});
$('#singletymlink').on('click', function () {
singltym = $(this);
var dialogDiv = $('#addSingleTimeDialog');
var viewUrl = singltym.attr('href');
$.ajax({
cache: false,
url: viewUrl,
dataType: 'html',
success: function (data) {
dialogDiv.html(data);
dialogDiv.dialog('open');
}
});
return false;
});
});
var singltym;
$(function () {
$('#addSingleTimeDialog').dialog({
cache: false,
autoOpen: false,
width: 450,
height: 450,
closeOnEscape: true,
resizable: true,
modal: true});
$('#singletymlink').on('click', function () {
singltym = $(this);
var dialogDiv = $('#addSingleTimeDialog');
var viewUrl = singltym.attr('href');
$.ajax({
cache: false,
url: viewUrl,
dataType: 'html',
success: function (data) {
dialogDiv.html(data);
dialogDiv.dialog('open');
//I work in this method
$( this ).dialog( "close" );
}
});
});
});
Or
$.ajax({
cache: false,
url: viewUrl,
dataType: 'html',
success: function (data) {
dialogDiv.html(data);
$("#dialogDiv").dialog("open");
$( this ).dialog( "close" );
}
If $( this ).dialog( "close" ); not working because not try this specific sentence??
$('#addSingleTimeDialog').dialog("close");
The above issue can be solved by including the below scripts in parent view from where the dialog popup is clicked & initiated :
<script type="text/javascript" src="../../Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.unobtrusive.min.js"></script>
As well as insert the below scripts in child view which is the UI for modal dialog popup :
<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.unobtrusive.min.js"></script>
By scripting in such way, the jquery script conflict is avoided & reopening of dialog can be swiftly done.
You could use the open method:
$('#addSingleTimeDialog').dialog('open');
Came across this older question, found a simpler solution not listed here.
Add an event listener for the close event, and call destroy when the dialog is closed.
close: function(event, ui) {$(this).dialog("destroy");}
Try writing $( this ).dialog( "close" ); method in close function. Eg :
close: function(){ $( this ).dialog( "close" ); },
$( this ).dialog( "close" ); does not destroy the dialog, instead it just closes and makes it available to be used for next time.
My problem was solved by replacing
$(this).dialog("close");
with
$(this).dialog("destroy");
This div [#divSaveAndDistribute] appears only once. how can i make it appear anytime it is triggered? Thanks
pic1 = new Image(16, 16);
pic1.src = "images/loader.gif";
$(document).ready(function(){
$("#save").live('click',function() {
//alert("you just clicked me");
var table="products_tb";
$("#status").html('<img src="images/loader.gif" align="absmiddle"> Checking empty fields...');
$("#dialog-confirm").dialog("open");
var dataString = 'table='+table;
//alert(dataString);
//$("#alert").fadeIn(200).html('<img src="images/load/ajax-loader.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "checkEmpty.php",
data: dataString,
cache: false,
success: function(html)
{
// $("#alert").fadeOut(200);
// $(".confirm").easyconfirm();
$("#status").html(html);
// $("#pled").val("");
}
//clear_form_elements("form#CommentForm");
});
});
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-confirm" ).dialog({
autoOpen: false,
resizable: false,
height:200,
width:400,
modal: true,
buttons: {
"check": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
//alert("you just offed me");
$('#divSaveAndDistribute').show();
}
}
});
It should be help full:
$( "#dialog-confirm" ).dialog("open");
$( "#dialog-confirm" ).dialog("close");
On the bottom of this site: http://jqueryui.com/demos/dialog/ you have list of methods, events and options