javascript - 如何为同一个弹出窗口调用 Controller ？

Question

我正在使用 CodeIgniter。我有两个名为 status 和 action 的下拉菜单。

在状态下拉列表中，选项为

Create
Pending
Verified

在操作下拉列表中，选项是

Paid
Refund
Dispute

现在，我正在做的是，当用户从下拉列表中选择状态时，将显示 onchage 弹出窗口。 action 的相同 onchage 弹出窗口。

在弹出窗口中，我有一个消息字段和两个名为提交和取消的按钮。

我在单击提交按钮时调用 Controller 以使用 AJAX 插入消息。它适用于 status 下拉列表，但如何在单击同一弹出窗口中的提交按钮时调用 action 下拉列表的另一个 Controller ？

我想使用操作下拉列表的弹出窗口。

任何想法都会有很大帮助。

你能帮我解决这个问题吗？

$(function() {
  $("#f_order_status, #f_order_status_confirm").change(function() {
    $('#popup_verify').show();
  });
});

function closePopup(obj) {
  var id = $(obj).data('id');
  $("#popup_verify").hide();
};

$("#o_order_status_action").on("submit", function(e) {
  e.preventDefault(); //prevents form default action
  var f_order_status = $('#f_order_status').val(); // get the selected value from dropdown
  var f_order_status_confirm = $('#f_order_status_confirm').val(); // get the selected value from dropdown

  $.ajax({ //do ajax to do update
    type: "POST",
    url: "<?php echo base_url('Customer_control/admin_order_verification');?>",
    data: {
      f_order_status: f_order_status,
      f_order_status_confirm: f_order_status_confirm

    },
    success: function(dataReturned) {
      if (dataReturned == 'true') {
        location.href = baseUrl + "/Customer_control/list"
      } else {
        alert("There are some issue white updateing the records");
      }
    }
  });
});

.confirmation_alert {
  position: fixed;
  /* Stay in place */
  z-index: 9;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  -webkit-animation-name: fadeIn;
  /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s;
}

.profile_content {
  position: fixed;
  top: 25%;
  /*transform: translateY(-50%);*/
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.5s;
  animation-name: slideIn;
  animation-duration: 0.5s;
  max-width: 922px;
  margin: auto;
  left: 0;
  right: 0;
  box-shadow: 0 0 15px rgba(0, 0, 0, .3);
  margin-top: -65px;
}

.profile_header {
  padding: 1px 20px;
  background-color: #fafafc;
  color: white;
  /* min-height: 58px; */
  border-bottom: 1px solid #f7f7f7;
  display: block;
  width: 100%;
}

.profile_content.p_v_popup {
  border: 2px solid #666;
}

.confirmation_alert .profile_content {
  max-width: 380px;
  border: 2px solid #f96e64;
}

.p_v_popup .profile_header {
  background: #666;
}

.confirmation_alert .profile_header {
  padding: 6px 20px;
  background-color: #f96e64;
}

.profile_body {
  padding: 35px 50px;
}

.profile_footer {
  padding: 15px;
  background-color: #fdfdfe;
  color: #858585;
  text-align: center;
}


/* Add Animation */

@-webkit-keyframes slideIn {
  from {
    top: -500px;
    opacity: 0
  }
  to {
    top: 25%;
    opacity: 1
  }
}

@keyframes slideIn {
  from {
    top: -500px;
    opacity: 0
  }
  to {
    top: 25%;
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

.p_v_popup .profile_footer .submit_btn {
  background: #666;
}

.confirmation_alert .profile_footer .submit_btn {
  background: #f96e64;
  color: #fff;
}

.confirmation_alert .profile_footer .btn_default {
  padding: 5px;
  display: inline-block;
  outline: none;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 300;
  min-width: 100px;
  border-radius: 50px;
  margin: 0 3px;
}

<select class="select_control" name="f_order_status" id="f_order_status">
  <option value="" disabled selected>Select</option>
  <option value="1">Create</option>
  <option value="-1">Pending</option>
  <option value="2">Verified</option>
</select>

<select class="select_control" name="f_order_status_confirm" id="f_order_status_confirm">
  <option value="" disabled selected>Select</option>
  <option value="1">Paid</option>
  <option value="-1">Refund</option>
  <option value="2">Dispute</option>
</select>


<div class="confirmation_alert" id="popup_verify" style="display: none;">
  <div class="opacity"></div>
  <form id="o_order_status_action" method="post">
    <div class="profile_content p_v_popup">
      <div class="profile_header clearfix">
        <a href="javascript:void(0);" class="close_popup " onclick="closePopup(this)" data-id=""> x </a>
        <div class="profile_name_pic"> Confirmation!!! </div>
      </div>
      <div class="profile_body">
        <div class="row">
          <div class="col-md-12">
            <div class="leave_reason">

              <div class="form_group">
                <input type="hidden" name="hidden_cust_id" id="hidden_cust_id" value="<?php echo $encryption_id;?>">
                <input type="hidden" name="hidden_o_id" id="hidden_o_id" value="<?php echo $encript_o_id_id;?>">
                <label>Message</label>
                <textarea class="form_control" name="f_followup_message" rows="2" id="f_followup_message"></textarea>
              </div>

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

      <div class="profile_footer clearfix">
        <button type="submit" class="btn_default submit_btn">Submit</button>
        <button type="button" class="btn_default cancel_btn" onclick="closePopup(this)" data-id=""> Cancel</button>
      </div>
    </div>
  </form>
</div>
</div>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Answer 1

您必须跟踪单独的点击。我使用了java脚本变量，你可以使用选择框上的数据属性来做到这一点

var selectedBox = null;
$(function() {
  $("#f_order_status_confirm").change(function() {
    selectedBox = 2;
    $('#popup_verify').show();
  });
  $("#f_order_status").change(function() {
    selectedBox = 1;
    $('#popup_verify').show();
  });
});

关于 Ajax 部分

  url = "<?php echo base_url('Customer_control/admin_order_verification');?>";
  if(selectedBox == 2){
      url = "<?php echo base_url('Customer_control/admin_order_verification_something');?>";
  }
  $.ajax({ //do ajax to do update
    type: "POST",
    url: url,
    data: {
      f_order_status: f_order_status,
      f_order_status_confirm: f_order_status_confirm

    },