I open modal dialog twice,
the textbox is locked in the first dialog(parent dialog) after the second dialog closed
Why? How to resolve the problem? I am new user,so I can't post the image
Any answer will be appreciated, thank you
Html:
<XMP>
<input id="btnDlg" type="button" value="open dialog" />
<div id="dlg1"><%=Html.TextBox("txtName","can not edit") %><input id="btnShowDlg" type="button" value="dialog again" /></div>
<div id="dlg2"><div>the second dialog</div><%=Html.TextBox("txtName2") %></div>
</XMP>
jquery:
$("#dlg1").dialog({
autoOpen: false,
height: 350,
width: 300,
title: "The first dialog!",
bgiframe: true,
modal: true,
resizable: false,
buttons: {
'Cancel': function() {
$(this).dialog('close');
},
'OK': function() {
$(this).dialog('close');
}
}
})
$("#dlg2").dialog({
autoOpen: false,
height: 200,
width: 300,
title: "This is the second dialog!",
bgiframe: true,
modal: true,
resizable: false,
buttons: {
'Cancel': function() {
$(this).dialog('close');
},
'OK': function() {
$(this).dialog('close');
}
}
})
$("#btnDlg").click(function() {
$("#dlg1").dialog("open");
})
$("#btnShowDlg").click(function() {
$("#dlg2").dialog("open");
})
buttons: {
"Save": function () {
//validate
if (typeof (Page_ClientValidate) == 'function') {
Page_ClientValidate(newValGroup);
}
if (Page_IsValid) {
gettHTML(divID, PriceID);
}
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function (ev, ui) {
$(this).dialog("destroy");
}
});
$("#" + divID).dialog('open');
return false;
Yes divid can you try Making Modal : false. it will work..
let me know..
Thanks
Related
I have a modal popup just for comfirmation. When 'continue' is clicked it closes and it goes to the controller Action Delete and it returns. But after returning back to the view, the summary message validation div is not being showed which is what I want.
Here is the modal with div code:
<div id="delete-dialog" title="Confirmation">
<p>Are you sure you want to delete this?</p>
</div>
<script type="text/javascript" lang="javascript">
//$(document).ready(function () {
$(function () {
var deleteLinkObj;
$('.delete-link').click(function () {
deleteLinkObj = $(this); //for future use
$('#delete-dialog').dialog('open');
return false; // prevents the default behaviour
});
$('#delete-dialog').dialog({
autoOpen: false,
width: 400,
height: 250,
resizable: false,
modal: true, //Dialog options
buttons: {
"Continue": function () {
$.post(deleteLinkObj[0].href, function (data)
{ //Post to action
if (data == '')
{
}
else
{
}
});
$(this).dialog("close");
},
"Cancel": function ()
{
$(this).dialog("close");
}
}
});
});
//})
</script>
So what i basically want it to do, is going to the controller if 'continue' is clicked, and show the summary message.
So how can I 'stop' the execution of the jquery function after comming from the controller?
I got the modal code from this site
You should use .append of jQuery inside your callback, after the post.
As you did not show any div. I'm assuming the div as
<div id="summary"></div>
This is how you the final dialog is :
$('#delete-dialog').dialog({
autoOpen: false,
width: 400,
height: 250,
resizable: false,
modal: true, //Dialog options
buttons: {
"Continue": function () {
$.post(deleteLinkObj[0].href, function (data)
{ //Post to action
if (data == '')
{
}
else
{
$('#summary').append(data); // this will append the content in data to your div with id as summary
}
});
$(this).dialog("close");
},
"Cancel": function ()
{
$(this).dialog("close");
}
}
});
Hope it helps
Following is my JS:
ShowHoverServerImageModalWindow: function () {
$("#divSettings").dialog({
width: 200,
height: 200,
modal: false,
title: "Server Image",
autoOpen: false,
closeOnEscape: true,
draggable: false,
resizeable: false,
/*position: "my position!!", */
buttons: [
{
text: "Close",
click: function () { $(this).dialog("close"); }
},
]
});
//Show the dialog
$("#divSettings").dialog('open');
},
I want the modal to be opened where my curser is at
How can i do that?
source: http://jqueryui.com/demos/dialog/ and http://docs.jquery.com/Tutorials:Mouse_Position
$("#divSettings").dialog({
... //your previous code
position: [e.pageX, e.pageY]
});
Easily found on google.
or just before you trigger the pop-up:
EDIT: now include the trigger.
$(document).click(function (e) {
$("#divSettings").dialog('option', 'position', [e.pageX, e.pageY]);
$("#divSettings").dialog('open');
});
Does anyone know how to create a jQuery Dialog in a function? I can't find an attribute to set the message... In every example I found, the dialog has been statically written into the code in a div-tag. However, I want to create it dinamically, so I need to know how to create a dialog in a function.
It is no problem to set the title:
<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$( "#opener" ).click(function() {
//$( "#dialog" ).dialog( "open" );
$( this ).dialog({ title: 'Please confirm deletion!' });
return false;
});
});
</script>
</head>
<body>
I have the documentation and some examples here.
Thanks for helping out guys.
Cheers,
doonot
============================= [SOLUTION]=====================================
Thanks for all who answered this questions. This is how i wanted it:
function createDialog(title, text) {
return $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
.dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Confirm": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
}
And it can be called for example like this (clicking on an image):
<img src="delete.png" onClick="createDialog('Confirm deletion!', 'Do you really want to delete this package?')">
function createDialog(title, text, options) {
return $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
.dialog(options);
}
Here is a simple example:
function openDialog(message) {
if ($('#dialog').length == 0) {
$(document.body).append('<div id="dialog">'+message+'</div>');
} else {
$('#dialog').html(message);
}
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$( "#dialog" ).dialog("open");
}
I used this with additionally jQuery tmpl plugin.
var confirmTemplate = jQuery.template("<div class='dialog' title='${title}'><p>${text}</p></div>");
function showDialog(options) {
if (options && options.data && options.dialog) {
var dialogOptions = jQuery.extend({}, { modal: true, resizable: false, draggable: false }, options.dialog);
return jQuery.tmpl(confirmTemplate, options.data).dialog(dialogOptions);
}
}
function hideDialog (item) {
if (!item.jQuery) item = $(item);
item.dialog("close").dialog("destroy").remove();
}
usage:
showDialog({
data: {
title: "My Title",
text: "my Text"
}
dialog: {
myDialog: "options"
}
});
Hi
I am using jquery dialog box,and when I am selecting a record from atable, it call the dialog box, then when I close it and chose another record, it opens the old dialog with the new dialog... what is the problem
$(document).ready(function () {
$("#btnenterpat").click(function () {
$("#enter_payment").dialog('open');
});
$("#enter_payment").dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 400,
height: 300,
buttons: {
Cancel: function () {
$(this).dialog('close');
},
ok: function () {
retur_dialog = 'ok';
$(this).dialog('close');
},
},
beforeClose: function () {
if (retur_dialog == 'ok') {
$.ajax({
url: 'ssssssss.php',
data: {
pm1: $("#pm1").val(),
pm2: $("#pm2").val(),
pm3: $("#pm3").val(),
pm4: $("#pm4").val(),
pm5: $("#pm5").val(),
pm6: $("#pm6").val(),
pm7: $("#pm7").val(),
},
});
}
}
});
});
EDIT:
First page:
<?php
include ("angela_test.php")
?>
<div style="font-size:12px;">
</div>
<br />
<table id="tbl_angela_test_data"></table>
<div id="p_angela_test_data"></div>
<script type="text/javascript">
$(document).ready(function(){
var selected_id;
var colCap = Array();
var colDef = Array();
var grp_filter = 0;
$.ajax({
url: "getColDefs.php" ,
data: {table: "bk_accounts", userid: "5", groupid: "1"},
dataType: "json",
async: false,
success: function (data) {
colCap = data[0];
colDef = data[1];
}
});
var cols = '';
for(i=0; i<colDef.length; i++) {
cols += colDef[i].name;
if (i != (colDef.length-1)) {
cols += ';';
}
}
jQuery("#tbl_angela_test_data").jqGrid({
url:'admin/angela_test_table_get.php',
postData: {columns: cols},
datatype: 'json',
mtype: 'POST',
height: 'auto',
width: 'auto',
rowNum: 20,
rowList: [10,20,30],
colNames: colCap,
colModel: colDef,
pager: "#p_angela_test_data",
viewrecords: true,
toolbar: [true, 'both'],
caption: "angela_test",
onSelectRow: function(id){
selected_id = id;
$("#angela_test_del_bnt, #angela_test_edit_bnt").attr("disabled", false);
}
});
jQuery("#tbl_angela_test_data").setGridWidth(500);
$("#t_tbl_angela_test_data").height(40);
$("#t_tbl_angela_test_data").append('<button id="angela_test_edit_bnt" style="height:30px; width:100px;" disabled="true">Edit</button>');
// edit button
$("#angela_test_edit_bnt").click(function(){
var rw = '#angela_test_item_'+selected_id;
var maintab = $("#tabs");
if ($(rw).html() != null) {
maintab.tabs('select',rw);
} else {
maintab.tabs('add',rw,'Edit form');
$(rw, '#tabs').load('admin/angelatest.php?id='+selected_id);
}
});
//////////////////////////////
})
</script>
and the second page is:
<?php
include_once("angela_test.php");
?>
<input type="button" id="btnenterpat" value="Enter Payment">
and the dialog code is:
<script type="text/javascript">
$(document).ready(function () {
$("#btnenterpat").click(function () {
$("#angela_test").dialog('open');
});
$("#angela_test").dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 400,
height: 300,
buttons: {
Cancel: function () {
$(this).dialog('close');
},
ok: function () {
$(this).dialog('close');
},
},
}).parent().find(".ui-dialog-titlebar-close").hide();
});
</script>
<!--Enter Payment windows -->
<div id="angela_test" ></div>
<!--dialog windows end -->
Calling $('#some-div').dialog('destroy') would restore the #some-div element to its original form before calling $('#some-div').dialog(...). Maybe you can consider doing that upon closing the dialog?
I'm creating a Web interface for a table in Mysql and want to use jQuery dialog for input and edit. I have the following code to start from:
$("#content_new").dialog({
autoOpen: false,
height: 350,
width: 300,
modal: true,
buttons: {
'Create an account': function() {
alert('add this product');
},
Cancel: function() {
$(this).dialog('close');
$.validationEngine.closePrompt(".formError",true);
}
},
closeText: "Sluiten",
title: "Voeg een nieuw product toe",
open: function(ev, ui) { /* get the id and fill in the boxes */ },
close: function(ev, ui) { $.validationEngine.closePrompt(".formError",true); }
});
$("#newproduct").click(function(){
$("#content_new").dialog('open');
});
$(".editproduct").click(function(){
var test = this.id;
alert("id = " + test);
});
So when a link with the class 'editproduct' is clicked it gets the id from that product and I want it to get to the open function of my dialog.
Am I on the right track and can someone help me getting that variable there.
Thanks in advance.
Set a variable eg the_id on top of everything in your script and try this code:
$("#newproduct").click(function(){
$("#" + the_id).dialog('open');
});
$(".editproduct").click(function(){
the_id = this.id;
});
Thanks Sarfraz you were right about the variable. For others interest the full code is now:
$(document).ready(function() {
var id = 0;
$("#content_new").dialog({
autoOpen: false,
height: 350,
width: 300,
modal: true,
buttons: {
'Create an account': function() {
alert('add this product');
},
Cancel: function() {
$(this).dialog('close');
$.validationEngine.closePrompt(".formError",true);
}
},
closeText: "Sluiten",
title: "Voeg een nieuw product toe",
open: function(ev, ui) { alert(id); },
close: function(ev, ui) { $.validationEngine.closePrompt(".formError",true); }
});
$("#newproduct").click(function(){
$("#content_new").dialog('open');
});
$(".editproduct").click(function(){
id = this.id;
$("#content_new").dialog('open');
});
$("#new").validationEngine();});
And on the opening of the modal dialog box i get the correct ID.