UI Dialogs keep appearing on the webpage
UI Dialogs keep appearing on the webpage
I'm trying to duplicate example: http://editor.datatables.net/examples/simple/server-side-processing.html
This is the Server Side Processing example. I've setup my own webpage as close to the example as I thought necessary, however I'm experiencing something strange. When I click on the New or Edit buttons, I expect a dialog box to appear. Instead the webpage itself is displaying the input fields at the bottom of the page. I don't understand what I've done wrong. Following is the HTML to the webpage. I'm probably overlooking something silly... Please advise.
Alan
<html>
<head>
<link rel="stylesheet" type="text/css" href="../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../media/extensions/Buttons/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../media/extensions/Select/css/select.dataTables.min.css">
<script type="text/javascript" language="javascript" src="../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="../media/extensions/Buttons/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="../media/extensions/Select/js/dataTables.select.min.js"></script>
<script type="text/javascript" language="javascript" src="../media/js/dataTables.editor.min.js"></script>
<script type="text/javascript">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
"ajax": "../jsp/server_processing.jsp",
"table": "#example",
"fields": [ {
"label": "Browser:",
"name": "browser"
}, {
"label": "Rendering engine:",
"name": "engine"
}, {
"label": "Platform(s):",
"name": "platform"
}, {
"label": "Engine version:",
"name": "version"
}, {
"label": "CSS grade:",
"name": "grade"
}
]
} );
$('#example').DataTable( {
dom: "Bfrtip",
ajax: {
url: "../jsp/server_processing.jsp",
type: "POST"
},
serverSide: true,
columns: [
{ data: "browser" },
{ data: "engine" },
{ data: "platform" },
{ data: "version" },
{ data: "grade" }
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
</script>
</head>
<body>
<table class="display" id="example">
<thead>
<tr>
<th width="25%">Browser</th>
<th width="20%">Rendering engine</th>
<th width="25%">Platform(s)</th>
<th width="15%">Engine version</th>
<th width="15%">CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Browser</th>
<th>Rendering engine</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Aaahhhh. Never mind. I figured it out. I forgot to reference the css for editor:
<link rel="stylesheet" type="text/css" href="../media/css/dataTables.editor.css">
It's working now.