英文:
Ajax Loading Data and Form in DataTables
问题
I am building a page to display students' lists based on class name on data tables. The data tables are loaded using ajax requests, and each row on the table has buttons to forms on a modal for making changes and updates to a student. The problem I am having is, the first page that loaded without ajax, the submit button on the modal works fine, but on the tables loaded using ajax, the submit buttons are not working.
Buttons to Load Students List By Class Name
The Students List Data Table and Buttons to Load Forms
To try out the submit buttons, I just wanted to display an alert that the button was clicked using the code below:
$(document).ready(function(){
$('.promote-button').on('click', function(e){
e.preventDefault();
alert('Clicked');
});
});
viewstudents.php
<tbody>
<?php
while($row = $stmt->fetch()){
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo escape($row['student_firstnames']). ' ' . escape($row['student_surname']); ?></td>
<td><?php echo escape($row['student_gender']); ?></td>
<td><?php echo escape($row['student_current_class']) . ' - ' . escape($row['student_programme']); ?></td>
<td><?php echo escape($row['student_status']); ?></td>
<td>
<?php include 'school_students/studentsactionsmenu.php'; ?>
</td>
</tr>
<?php include 'school_students/studentsactionsmodals.php'; ?>
<?php
$no++;
}
?>
</tbody>
jQuery Method to Get Students List
function getstudentslist(classname, classIndex){
showSpinner();
$.ajax({
url : 'ajaxviewschoolstudent.php',
dataType: "html",
type : 'GET',
data:{
activeclass: classname
},
cache: false,
success : function (data) {
$("#results-table").html(data);
var dataTable = $("#results-table").DataTable();
$('table.table-data').DataTable();
hideSpinner();
},
error : function () {
toastr.error('An Error Has Occured');
hideSpinner();
}
});
}
studentsactionsmodals.php
<div class="modal-body">
Promote the student <?php echo '<span style="color:#FF0000;">' . escape($row['student_firstnames']) . ' ' . escape($row['student_surname']) . '</span>'; ?>
<!-- form start -->
<form role="form" method="post" class="promote-form" class="promote-form needs-validation" novalidate>
<div class="card-body">
<input type="hidden" class="form-control" id="id" name="id" value="<?php echo escape($row['student_id']); ?>">
<div class="form-group row">
<label for="class-name" class="col-sm-4 col-form-label">New Class Name</label>
<div class="col-sm-5">
<select class="form-select" name="class-name" id="class-name" value="<?php echo escape(Input::get('class-name')); ?>" required>
<?php
foreach($classes_list as $class_name){
?>
<option value="<?php echo $class_name; ?>"><?php echo $class_name; ?></option>
<?php
}
?>
</select>
</div>
</div>
</div>
<div class="card-footer">
<button type="submit" class="promote-button" class="btn btn-info">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
<!-- form end -->
</div>
Kindly Assist
英文:
I am building a page to display students' lists based on class name on data tables. The data tables are loaded using ajax requests, and each row on the table has buttons to forms on a modal for making changes and updates to a student. The problem I am having is, the first page that loaded without ajax, the submit button on the modal works fine, but on the tables loaded using ajax, the submit buttons are not working.
Buttons to Load Students List By Class Name
The Students List Data Table and Buttons to Load Forms
To try out the submit buttons, I just wanted to display an alert that the button was clicked using the code below:
$(document).ready(function(){
$('.promote-button').on('click', function(e){
e.preventDefault();
alert('Clicked');
}); });
viewstudents.php
<tbody>
<?php
while($row = $stmt->fetch()){
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo escape($row['student_firstnames']). ' ' . escape($row['student_surname']) ; ?></td>
<td><?php echo escape($row['student_gender']); ?></td>
<td><?php echo escape($row['student_current_class']) . ' - ' . escape($row['student_programme']); ?></td>
<td><?php echo escape($row['student_status']); ?></td>
<td>
<?php include 'school_students/studentsactionsmenu.php'?>
</td>
</tr>
<?php include 'school_students/studentsactionsmodals.php'?>
<?php
$no++;
}
?>
</tbody>
jQuery Method to Get Students List
function getstudentslist(classname, classIndex){
showSpinner();
$.ajax({
url : 'ajaxviewschoolstudent.php',
dataType: "html",
type : 'GET',
data:{
activeclass: classname
},
cache: false,
success : function (data) {
$("#results-table").html(data);
var dataTable = $("#results-table").DataTable();
$('table.table-data').DataTable();
//document.getElementById('spinner-text').textContent = 'Done';
hideSpinner();
},
error : function () {
toastr.error('An Error Has Occured');
hideSpinner();
}
});
}
studentsactionsmodals.php
<div class="modal-body">
Promote the student <?php echo '<span style="color:#FF0000;">' . escape($row['student_firstnames']) . ' ' . escape($row['student_surname']) . '</span>?' ?>
<!-- form start -->
<form role="form" method="post" class="promote-form" class="promote-form needs-validation" novalidate>
<div class="card-body">
<input type="hidden" class="form-control" id="id" name="id" value="<?php echo escape($row['student_id']); ?>">
<div class="form-group row">
<label for="class-name" class="col-sm-4 col-form-label">New Class Name</label>
<div class="col-sm-5">
<select class="form-select" name="class-name" id="class-name" value="<?php echo escape(Input::get('class-name')); ?>" required>
<?php
foreach($classes_list as $class_name){
?>
<option value="<?php echo $class_name; ?>"><?php echo $class_name; ?></option>
<?php
}
?>
</select>
</div>
</div>
</div>
<div class="card-footer">
<button type="submit" class="promote-button" class="btn btn-info">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
<!-- form end -->
</div>
Kindly Assist
答案1
得分: 1
将代码转换为事件委托时,您可以将事件侦听器附加到页面加载时存在于 DOM 中的父元素上。这是一个例子:
$(document).on('click', '.promote-button', function(e){
e.preventDefault();
alert('Clicked');
});
在修改后的代码中,$(document) 充当父元素,事件侦听器附加到该元素上。事件侦听器侦听属于类名为 "promote-button" 的元素的点击事件,这些元素是文档元素的后代。这样,即使动态向 DOM 中添加了具有 "promote-button" 类的新元素,事件仍将被正确处理。
英文:
To convert the code to event delegation, you can attach the event listener to a parent element that is present in the DOM when the page loads. Here's an example:
$(document).on('click', '.promote-button', function(e){
e.preventDefault();
alert('Clicked');
});
In the modified code, $(document) acts as the parent element to which the event listener is attached. The event listener listens for click events on elements with the class "promote-button" that are descendants of the document element. This way, even if new elements with the "promote-button" class are added dynamically to the DOM, the event will still be handled correctly.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论