时间戳

首页 > 解决方案 > 如果使用 jquery 单击按钮，如何激活弹出模式？

javascript - 如果使用 jquery 单击按钮，如何激活弹出模式？

问题描述

我创建了一个表，其中我的数据可以是 ACTIVE 或 INACTIVE 并且这已经在工作，我的目标是我只想添加一个函数，当我单击按钮使我的数据变为 INACTIVE 时，它将弹出一个模式并具有一个消息。但我不知道我将如何让它弹出。

我找到了一个类似的帖子，但它不能应用于我的帖子，因为我所做的有不同的方法，我认为我的方法更容易让我自己理解，并且如果我尝试使用该链接，将会或可能会使事情复杂化。提前致谢

这是我在 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>

这是我在函数 StatusChange() 中的 form_statusForspecs_dtbl.php AJAX 调用

<?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>';
 }

 ?>

这是我的 form_btnStats.php AJAX 调用按钮更改状态并将记录在 sql 数据库中

<?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);
    }
?>

标签： javascriptjqueryajax

解决方案

选项 1：简单的 CSS 类分配

Example: https://www.w3schools.com/w3css/w3css_modal.asp

选项 2：使用 jQuery.show() / jQuery.hide()

function StatusChange() {
   ...
   if (status == 0) {
      // This should use # / id
      jQuery('div.modal').show();
   }
}

选项 3：使用 jQuery UI 对话框

Example: https://jqueryui.com/dialog/

推荐阅读