I want to pop-up dialog when click input on create form and send data back to the create form
I want to pop-up dialog when click input on create form and send data back to the create form
jonathancai
Posts: 2Questions: 1Answers: 0
I want to pop-up a model dialog when click specific input on create/edit form. After I do some operation in the dialog and click OK, send data back to the create/edit form, then click create to save data to database.
I used jQuery UI to show the dialog, but the dialog isn't on top, the create/edit is highlighted. And when I clicked
the dialog, the create/edit form will be canceled.
Is there a built-in function in Editor I can use to solve this. Or is there some way to make my model dialog highlighted, on top and can send back data to create/edit form
Here's my code.
<script>
var editor;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor({
ajax : "/year.do?method=action",
table : "#year",
idSrc : 'primaryId',
fields : [ {
label : "year_code",
name : "year_code"
}, {
label : "year_name",
name : "year_name"
}, {
label : "remark",
name : "remark"
}, {
type : "hidden",
name : "version"
} ]
});
$('#year').DataTable({
dom : "Blfrtip",
ajax : "/year.do?method=action",
columns : [ {
data : "year_code"
}, {
data : "year_name"
}, {
data : "remark"
} ],
select : true,
buttons : [
{extend : "create", editor : editor},
{extend : "edit", editor : editor},
{extend : "remove", editor : editor}
]
});
$( 'input', editor.field('year_name').node() ).on( 'click', function () {
$( "#dialog" ).dialog( "open" );
} );
$( "#dialog" ).dialog({
autoOpen: false,
modal: true,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
});
</script>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<table id="year" class="table table-striped table-bordered">
<thead>
<tr>
<th>year_code</th>
<th>year_name</th>
<th>remark</th>
</tr>
</thead>
<tfoot>
<tr>
<th>year_code</th>
<th>year_name</th>
<th>remark</th>
</tr>
</tfoot>
</table>
</body>
This discussion has been closed.
Answers
Since you are using jQuery UI, you might want to try using their
moveToTop()API method.Allan
Thanks allan. But I tried moveToTop() of jQuery UI, the create form is still on top and highlighted. The thing is I don't have to use jQuery UI, just need to open a dialog to choose data from and send data back to create form.
The example below is very likely:
https://editor.datatables.net/examples/bubble-editing/simple.html
Click new button, and click input of Start date on create form, a calendar control popped up.
How can I to replace the calendar control with my user-defined element such as form or div and send data back to create from.
The thing about using jQuery UI dialog is that its the only modal library that Editor supports which allows multiple modals to be open at the same time. Editor's built in lightbox, Bootstrap, etc they all only allow a single modal at a time (because of the complications you are seeing!).
Its almost certainly a z-index issue. If you "Inspect" the page and take a look at the modal elements, what are their z-indexes?
Allan