I've created a table where my data can be ACTIVE or INACTIVE and this is already working, my goal is I just want to add a function that when I clicked the button to make my data INACTIVE, it will pop up a modal and has a message. But I don't know how will I make it pop up.
I've found a similar post but it cannot be applied to mine, because what I did has a different approach and I think mine is easier for myself to understand and will or might complicate things for me if I try to use the link. Thanks in advance
Here is my code in my JQUERY
$(document).on('click', '.status_checks', function() { var status = '1'; var selector = $(this); var id = $(this).data('id'); if ($(this).hasClass("btn-success")) { status = '0'; } $.ajax({ type: "POST", url: "../forms/form_BtnStats.php", data: { id: id, status: status }, success: function(data) { selector.hasClass("btn-success") ? (selector.removeClass("btn-success").addClass( "btn-danger"), selector.text("Inactive")) : (selector.removeClass("btn-danger").addClass( "btn-success"), selector.text("Active")); // location.reload(); } }); }); // For status Active/Inactive function StatusChange() { $("#dataTables").DataTable().destroy(); $("#tb_body").empty(); var status = $('#stats').val(); if (status) { $.ajax({ type: "POST", url: "../forms/form_statusForspecs_dtbl.php", data: { status: status }, success: function(data) { $("#dataTables").append(data); $("#dataTables").DataTable(); } }); } } // Startup $(document).ready(function() { $('#stats').change(function() { $(this).val(); }); $("#stats").trigger('change'); });@import https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="index.css"> <style> .statusButton { color: white; display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; border-radius: 20px; white-space: nowrap; padding: 2px 12px; font-size: 12px; line-height: 1.42857143; border-radius: 4px; user-select: none; } </style> </head> <!-- this is the modal that I want to pop up --> <div class="modal fade" id="reason_for_modal"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <center> Confirmation </center> </h4> </div> <!-- Modal body --> <div class="modal-body panel-body"> <center> <br><br> <p> <strong> Reason for Inactive </strong> </p> </center> </div> <!-- Modal footer --> <div class="modal-footer"> <div class="col-sm-15"> <div class="form-group"> <button type="submit" id="submitBtn" class="btn btn-danger pull-right" data-toggle="modal" data-target="#maModal" onclick="window.location.href='#'"> <span class="fa fa-check"></span> Close </button> </div> </div> </div> </div> </div> </div> <div id="page-wrapper"> <div class="row"> <div class="col-lg-12"> <br> <br> <a href="../forms/form_toolspec.php"> <button class="btn btn-primary pull-right"> <span class="fa fa-plus-circle"></span> Add Record </button> </a> </h1> </div> <!-- /.col-lg-12 --> </div> <br> <!-- Status --> <div> <form action="GET"> <div class="form-group"> <label> Table group by Status </label> <select name="selector_id" onchange="StatusChange()" style="width:200px;" class="show-menu-arrow form-control" id="stats"> <!-- <option value="" disabled> Select Status </option> --> <option value="1" selected> ACTIVE </option> <option value="0"> INACTIVE </option> </select> </div> </form> </div> <!-- /.row --> <div class="row"> <div class="col-lg-12"> <div class="panel panel-primary"> <div class="panel-heading"> Table of Tools Specification </div> <!-- /.panel-heading --> <div class="panel-body" id="showStatus"> <div class="table-responsive"> <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables"> <thead> <tr> <th> Tools Name </th> <th> Model No. </th> <th> Value </th> <th> Number of days </th> <th> <center> Status </center> </th> </tr> </thead> <tbody id="tb_body"> </tbody> </table> </div> </div> </div> </div> </div> </div>Here is my form_statusForspecs_dtbl.php AJAX call in function StatusChange()
<?php include ("../include/connect.php"); $status = $_POST['status']; $con->next_result(); $result = mysqli_query($con, "CALL GetToolSpecByStatus('$status')"); while ($row = mysqli_fetch_assoc($result)) { echo '<tr>'; echo "<td><a href='edit_toolspec.php?ID=".$row['ID']."' style='color:red;'>" . $row['tools_name'] . "</a></td>"; echo '<td>'.$row['model_num'].'</td>'; echo '<td>'.$row['model_num_val'].'</td>'; echo '<td>'.$row['no_of_days'] .'</td>'; ?> <td> <center> <p data-id="<?php echo $row['ID'];?>" class="status_checks statusButton <?php echo ($row['status'])? 'btn-success': 'btn-danger'?>"> <?php echo ($row['status'])? 'Active' : 'Inactive'?> </p> </center> </td> <?php echo '</tr>'; } ?> Here is my form_btnStats.php AJAX call for button to change status and will be recorded in sql database
<?php include('../include/connect.php'); $user_id=$_POST['id']; $newStatus=$_POST['status']; $query = "UPDATE tools_spec SET status='$newStatus' WHERE ID = '$user_id'"; $result = mysqli_query($con, $query); if($result === TRUE) { echo json_encode(1); } else { echo json_encode(0); } ?> 
没有评论:
发表评论