my edit and delete query only work on the first page of datatables, but not on the second page. i'm using ajax and jquery. i'm new and this is for my project in college. thanks for helping me. here's the code.
<script>
$(function () {
$("#example1").DataTable();
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false
});
});
</script>
<script type="text/javascript">
$(document).ready(function (){
$(".open_modal").click(function (e){
var m = $(this).attr("id");
$.ajax({
url: "user_edit.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalEdit").html(ajaxData);
$("#ModalEdit").modal('show',{backdrop: 'true'});
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function (){
$(".open_delete").click(function (e){
var m = $(this).attr("id");
$.ajax({
url: "user_delete.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalDelete").html(ajaxData);
$("#ModalDelete").modal('show',{backdrop: 'true'});
}
});
});
});
</script><button type="button" data-toggle="modal" data-target="#tambah" class="btn btn-info"><i class="glyphicon glyphicon-plus"></i> Tambah User</button>
</br>
</br>
<?php include"alert.php"; ?>
<table id="example1" class="table table-bordered table-striped" >
<thead>
<tr>
<th>Nomor</th>
<th>Username</th>
<th>Nama Lengkap</th>
<th>Password</th>
<th>Level</th>
<th>Nama Toko</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
include "connection.php";
$query_mysql = mysqli_query($connection,"SELECT username, password, level, nama_lengkap, status, nama_toko FROM master_user INNER JOIN master_toko ON master_user.id_toko = master_toko.id_toko where status='0'")or die(mysqli_error());
$nomor = 1;
while($data = mysqli_fetch_array($query_mysql)){
?>
<tr>
<td><?php echo $nomor++; ?></td>
<td><?php echo $data['username']; ?></td>
<td><?php echo $data['nama_lengkap']; ?></td>
<td><?php echo $data['password']; ?></td>
<td><?php echo $data['level']; ?></td>
<td><?php echo $data['nama_toko']; ?></td>
<td>
<a href="#" class='btn btn-primary open_modal' id='<?php echo $data['username']; ?>'><span class="glyphicon glyphicon-pencil" style="padding-right: 2px"></span>Edit</a> |
<a href="#" class='btn btn-danger open_delete' id='<?php echo $data['username']; ?>'><span class="glyphicon glyphicon-trash" style="padding-right: 2px"></span>Hapus</a>
</td>
</tr> <?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- FOR EDIT AND DELETE -->
<div id="ModalEdit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
<div id="ModalDelete" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>and this is for edit i reference the username because username is my primary key here the code
include "connection.php";
$username = $_GET['username'];
echo $username;
$ambildata = mysqli_query($connection,"select * from master_user where username='$username'");
while($row= mysqli_fetch_array($ambildata)){
?>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Edit User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" action="proses_edituser.php" name="modal-popup" enctype="multipart/form-data" method="POST" id="form-edit">
<div class="form-group">
<label class=" control-label col-md-3">Username</label>
<div class="col-md-9">
<input class="form-control" type="text" name="username" value="<?php echo $row['username']; ?>"/>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Nama Lengkap</label>
<div class="col-md-9">
<input class="form-control" type="text" name="nama_lengkap" value="<?php echo $row['nama_lengkap']; ?>"/>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<input class="form-control" type="password" name="password" value="<?php echo $row['password']; ?>"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Level</label>
<div class="col-md-9">
<select name="level" class="form-control">
<option value=''>--Select--</option>
<option value='owner' <?php if ($row['level']=='owner'){echo"SELECTED";}?>>Owner</option>
<option value='manajer' <?php if($row['level'] == 'manajer'){ echo "SELECTED"; } ?>>Manajer</option>
<option value='bendahara' <?php if($row['level'] == 'bendahara'){ echo "SELECTED"; } ?> >Bendahara</option>
<option value='administrator' <?php if($row['level'] == 'administrator'){ echo "SELECTED"; } ?>>Administrator</option>
</select>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Toko</label>
<div class="col-md-9">
<select name="id_toko" class="form-control">
<option value="">-- Pilih Toko --</option>
<?php
require "connection.php";
$datatoko = "SELECT * FROM master_toko ORDER BY id_toko ASC";
$resultsql = mysqli_query($connection, $datatoko);
if (mysqli_num_rows($resultsql) > 0) {
while ($row = mysqli_fetch_assoc($resultsql)) {
echo "<option value='$row[id_toko]'>$row[nama_toko]</option>";
// $nama_toko = $row['nama_toko'];
//echo '<option value="'.$row['id_toko'].'">'. $nama_toko.'</option>';
}
}
?>
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" value="Simpan"><span class="glyphicon glyphicon-floppy-saved" style="padding-right: 2px"></span>Simpan</button>
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-floppy-remove" style="padding-right: 2px"></span>Batal</button>
</div>
</form>
<?php
}
?>
</div>
</div>
</div>The issue is because the html for these buttons are rendered again & previous event attached to these are not found. So you need to add the events for newly elements also. One good solution is to use jQuery on method to attach the event on dynamic elements as well. Use the below code to check
<script type="text/javascript">
$(document).ready(function (){
$("body").on('click', '.open_modal', function (e){
var m = $(this).attr("id");
$.ajax({
url: "user_edit.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalEdit").html(ajaxData);
$("#ModalEdit").modal('show',{backdrop: 'true'});
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function (){
$("body").on('click', '.open_delete', function (e){
var m = $(this).attr("id");
$.ajax({
url: "user_delete.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalDelete").html(ajaxData);
$("#ModalDelete").modal('show',{backdrop: 'true'});
}
});
});
});
</script>