Add new row form is not shown as a dialog
Add new row form is not shown as a dialog
sandeep.pm2
Posts: 1Questions: 1Answers: 0
Hi,
I am following this to add a CRUD operation to my datatable with an ajax source.
https://www.codeproject.com/Articles/193068/Adding-data-management-CRUD-functionalities-to-the
The problem that I am facing is that on Clicking the Add new row button , the form to enter the details is being shown below the datatable (as in the picture attached). I expect the form to be shown as a dialog. Is the something that I am missing.
<body id="dt_example">
<form id="formAddNewStudent" action="#" title="Add New Student" >
<table style="width: 100%">
<tr>
<td style="width: 50%"><label for="id">Roll No</label></td>
<td style="width: 50%"><input type="text" name="id" id="id" rel="0" class="required"/></td>
</tr>
<tr>
<td><label for="name">Student Name</label></td>
<td><input type="text" name="name" id="name" class="required" rel="1"/></td>
</tr>
<tr>
<td><label for="emergencyContactName">Emergency Contact Name</label></td>
<td><input type="text" name="emergencyContactName" id="emergencyContactName" class="required" rel="2"/></td>
</tr>
<tr>
<td><label for="emergencyContactNo">Emergency Phone No</label></td>
<td><input type="text" name="emergencyContactNo" id="emergencyContactNo" class="required" rel="3"/></td>
</tr>
<tr>
<td><label for="standard">Standard</label></td>
<td><input type="text" name="standard" id="standard" class="required" rel="4"/></td>
</tr>
<tr>
<td><label for="section">Section</label></td>
<td><input type="text" name="section" id="section" class="required" rel="5"/></td>
</tr>
<tr>
<td><label for="teacherName">Teacher's Name</label></td>
<td><input type="text" name="teacherName" id="teacherName" rel="6"/></td>
</tr>
<tr>
<td><label for="address">Address</label></td>
<td><input type="text" name="address" id="address" class="required" rel="7"/></td>
</tr>
<tr>
<td><label for="groups">Groups</label></td>
<td><input type="text" name="groups" id="address" rel="8"/></td>
</tr>
</table>
<br />
<br />
<button id="btnAddNewStudentOk">Add</button>
<button id="btnAddNewStudentCancel">Cancel</button>
</form>
<div id="container">
<div id="demo_jui">
<h3 style="width: auto; text-align: center">Student Information</h3>
<br/>
<br/>
<button id="btnAddNewStudent" value="Ok">Add new student</button>
<button id="btnDeleteStudent" value="cancel">Delete selected student</button>
<table id="studentTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Roll No</th>
<th>Student Name</th>
<th>Emergency Contact Name</th>
<th>Emergency Phone No</th>
<th>Standard</th>
<th>Section</th>
<th>Teacher's Name</th>
<th>Address</th>
<th>Groups</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
This discussion has been closed.