时间戳

首页 > 解决方案 > 在jsp中使用模态确认删除选定的项目

java - 在jsp中使用模态确认删除选定的项目

问题描述

我有一张桌子，上面有拒绝按钮。单击拒绝按钮后，它会打开一个模式弹出窗口以进行确认。我希望一旦用户确认弹出窗口，它应该删除该行。但是我的代码不起作用。它总是在 ajax 请求中显示未定义。

拒绝按钮被点击的页面的ui 这是确认弹出窗口

这是我的jsp代码...

      `<table class="table table-bordered table-hover table-sm">
        <thead>
         <tr>
          <th>User Profile ID</th>         
          <th>Name</th>
         <th>Interested Received On</th>
         <th>Accept</th>
         <th>Reject</th>
         <th>View Profile</th>
    </tr>
  </thead>

  <tbody id="tableList">
  </tbody>

<!-- REJECT MODEL POPUP -->


  <!-- Modal Header -->
  <div class="modal-header">
    <h4 class="modal-title">Are you sure?</h4>
    <button type="button" class="close" data-dismiss="modal">&times;</button>
  </div>

  <!-- Modal body -->
  <div class="modal-body">
   Are you sure you want to reject this profile? You CAN NOT view this profile in your list anymore if you delete.
  </div>

  <!-- Modal footer -->
  <div class="modal-footer">

     <button type='button' class='btn btn-danger btn-sm btn-ok' id="action"  onclick='rejectRequest(this)' data-toggle='modal' data-target='#rejectModel'>Yes, Reject</button>         
     <button type="button" class="btn btn-primary" data-dismiss="modal">No, Don't Reject</button>
  </div>


</div>

`

这是我的jQuery

function rejectRequest(link){
$('#rejectModel').show();
$('.loader').show ();
var url ="userHome"
var action =$(link).attr('href');
$.ajax({
    url:url,
    type:'Post',
    data:{
        action:action
    },

    success: function(result){
        $('.loader').hide();
        $('#confirm-reject').modal('hide');
        var successUrl = "userHome.jsp"; 
        window.location.href = successUrl;
    },
    error: function(jqxhr) {
        $('.loader').hide();
        $('#action').html("<font color='red'>Something went wrong. Please refresh and try again.</font>");              
        return false;
    }


});

}

一旦用户单击是，拒绝，我想从 ajax 操作 var 中获取此值 这是我想要得到的 id

每次我在 ajax 请求中获取 null 或未定义值时..请建议我哪里错了..

这是拒绝按钮 html

<button type="button" class="btn btn-danger btn-sm" name="accept" id="reject_cbd6631d-0c36-4332-8127-094dd5441984" value="Reject=cbd6631d-0c36-4332-8127-094dd5441984" data-href="Reject=cbd6631d-0c36-4332-8127-094dd5441984" data-toggle="modal" data-target="#confirm-reject">Reject</button>

提前致谢，感谢您的帮助。

标签： javajqueryjspbootstrap-4

解决方案

在您function添加一个click事件中，即单击拒绝按钮获取data-href值，然后打开您modal并将值传递给ajax：

$("#confirm-reject").modal('hide');
var url = "userHome";
//on click of reject button
$('button[name="accept"]').on("click", function() {
  //getting current value of button click
  var action = $(this).attr('data-href');
  $("#loader").show();

  //opening modal
  $("#confirm-reject").modal('show');
  //on click of Yes,Reject button
  $("#action").on("click", function() {
    console.log(action);
    $.ajax({
      url: url,
      type: 'Post',
      data: {
        action: action
      },

      success: function(result) {
        $('.loader').hide();
        $('#confirm-reject').modal('hide');
        var successUrl = "userHome.jsp";
        window.location.href = successUrl;
      },
      error: function(jqxhr) {
        $('.loader').hide();
        $('#action').html("<font color='red'>Something went wrong. Please refresh and try again.</font>");
        return false;
      }
   });

  });

});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form action="../UserHomeController" method="post" id="interestReceivedForm" class="needs-validation box text-secondary">
  <h1 class="margin-top-h1">List of Interest Received</h1>
  <div class="table-responsive" id="table-one">
    <table class="table table-bordered table-hover table-sm">
      <thead>
        <tr>
          <th>User Profile ID</th>
          <th>Name</th>
          <th>Interested Received On</th>
          <th>Accept</th>
          <th>Reject</th>
          <th>View Profile</th>
        </tr>
      </thead>

      <tbody id="tableList">
      </tbody>
    </table>

    <div id="ignorecrossbefore" style="display:none;"> </div>
    <div class="loader" id="loader">
      <img src="../images/loader.gif" />
    </div>

  </div>
  <!-- REJECT MODEL POPUP -->
  <div class="modal cstm-model" id="confirm-reject" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Are you sure?</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          Are you sure you want to reject this profile? You CAN NOT view this profile in your list anymore if you delete.
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">

          <button type='button' class='btn btn-danger btn-sm btn-ok' id="action" data-toggle='modal' data-target='#rejectModel'>Yes, Reject</button>

          <button type="button" class="btn btn-primary" data-dismiss="modal">No, Don't Reject</button>
        </div>


      </div>
    </div>
  </div>

  <button type="button" class="btn btn-danger btn-sm" name="accept" id="reject_cbd6631d-0c36-4332-8127-094dd5441984" value="Reject=cbd6631d-0c36-4332-8127-094dd5441984" data-href="Reject=cbd6631d-0c36-4332-8127-094dd5441984">Reject</button>

推荐阅读