Ajax Loading Data and Form in DataTables

huangapple go评论57阅读模式
英文:

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
Ajax Loading Data and Form in DataTables

The Students List Data Table and Buttons to Load Forms
Ajax Loading Data and Form in DataTables

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
Ajax Loading Data and Form in DataTables

The Students List Data Table and Buttons to Load Forms
Ajax Loading Data and Form in DataTables

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(){
$(&#39;.promote-button&#39;).on(&#39;click&#39;, function(e){
	e.preventDefault();
	alert(&#39;Clicked&#39;);
}); });

viewstudents.php

&lt;tbody&gt;
&lt;?php
while($row = $stmt-&gt;fetch()){
?&gt;
	&lt;tr&gt;
		&lt;td&gt;&lt;?php echo $no; ?&gt;&lt;/td&gt;
		&lt;td&gt;&lt;?php echo escape($row[&#39;student_firstnames&#39;]). &#39; &#39; . escape($row[&#39;student_surname&#39;]) ; ?&gt;&lt;/td&gt;
		&lt;td&gt;&lt;?php echo escape($row[&#39;student_gender&#39;]); ?&gt;&lt;/td&gt;
		&lt;td&gt;&lt;?php echo escape($row[&#39;student_current_class&#39;]) . &#39; - &#39; . escape($row[&#39;student_programme&#39;]); ?&gt;&lt;/td&gt;
		&lt;td&gt;&lt;?php echo escape($row[&#39;student_status&#39;]); ?&gt;&lt;/td&gt;
		&lt;td&gt;
			&lt;?php include &#39;school_students/studentsactionsmenu.php&#39;?&gt;
		&lt;/td&gt;
	&lt;/tr&gt;
	&lt;?php include &#39;school_students/studentsactionsmodals.php&#39;?&gt;

&lt;?php
	$no++;
}
?&gt;

</tbody>

jQuery Method to Get Students List

function getstudentslist(classname, classIndex){
showSpinner();

$.ajax({
	url : &#39;ajaxviewschoolstudent.php&#39;,
	dataType: &quot;html&quot;,   
	type : &#39;GET&#39;,
	data:{
		activeclass: classname
	},
	cache: false,
	success : function (data) {
		$(&quot;#results-table&quot;).html(data);
		var dataTable = $(&quot;#results-table&quot;).DataTable();
		$(&#39;table.table-data&#39;).DataTable();
		
		//document.getElementById(&#39;spinner-text&#39;).textContent = &#39;Done&#39;;
		hideSpinner();
	},
	error : function () {
	   toastr.error(&#39;An Error Has Occured&#39;);
	   hideSpinner();
	}
});

}

studentsactionsmodals.php

&lt;div class=&quot;modal-body&quot;&gt;
Promote the student &lt;?php echo &#39;&lt;span style=&quot;color:#FF0000;&quot;&gt;&#39; . escape($row[&#39;student_firstnames&#39;]) . &#39; &#39; . escape($row[&#39;student_surname&#39;]) . &#39;&lt;/span&gt;?&#39; ?&gt;
&lt;!-- form start --&gt;
&lt;form role=&quot;form&quot; method=&quot;post&quot; class=&quot;promote-form&quot; class=&quot;promote-form needs-validation&quot; novalidate&gt;
	&lt;div class=&quot;card-body&quot;&gt;
		&lt;input type=&quot;hidden&quot; class=&quot;form-control&quot; id=&quot;id&quot; name=&quot;id&quot; value=&quot;&lt;?php echo escape($row[&#39;student_id&#39;]); ?&gt;&quot;&gt;
		&lt;div class=&quot;form-group row&quot;&gt;
			&lt;label for=&quot;class-name&quot; class=&quot;col-sm-4 col-form-label&quot;&gt;New Class Name&lt;/label&gt;
			&lt;div class=&quot;col-sm-5&quot;&gt;
				&lt;select class=&quot;form-select&quot; name=&quot;class-name&quot; id=&quot;class-name&quot; value=&quot;&lt;?php echo escape(Input::get(&#39;class-name&#39;)); ?&gt;&quot; required&gt;
					&lt;?php
						foreach($classes_list as $class_name){
							?&gt;
							&lt;option value=&quot;&lt;?php echo $class_name; ?&gt;&quot;&gt;&lt;?php echo $class_name; ?&gt;&lt;/option&gt;
							&lt;?php
						}
						?&gt;
				&lt;/select&gt;
			&lt;/div&gt;
		&lt;/div&gt;

	&lt;/div&gt;

	&lt;div class=&quot;card-footer&quot;&gt;
		&lt;button type=&quot;submit&quot; class=&quot;promote-button&quot; class=&quot;btn btn-info&quot;&gt;Submit&lt;/button&gt;
		&lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
	&lt;/div&gt;
&lt;/form&gt;
&lt;!-- form end --&gt;

</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(&#39;click&#39;, &#39;.promote-button&#39;, function(e){
    e.preventDefault();
    alert(&#39;Clicked&#39;);
});

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.

huangapple
  • 本文由 发表于 2023年6月6日 15:16:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/76412238.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定