单击发送后，我想留在同一个模式对话框窗口中

Question

以下是部分界面截图

这是我登录后立即进入的第一个窗口

使用 jQuery，我使用了如下的 slidetoggle 函数来获取反馈。

现在，当我点击每一行的回复按钮时，会触发引导模式弹出窗口。

我在这里很困惑。当我点击发送时，它应该留在同一个窗口中。它适用于使用 ajax 的第一个。但从第二个开始，它会刷新页面。

以下是代码

Ajax 代码

// Ajax post for email sending
$(document).ready(  function() {
$("#mailsubmit").click(function(event) {

event.preventDefault();
var recipient = $("input#recipient").val();
var subject = $("input#subject").val();
var message = $("textarea#message").val();

jQuery.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "index.php/user_authentication/send_reply",
dataType: 'json',
data: {recipient: recipient, subject: subject, message:message},
success: function(result) {
if (result)
{
// Show Entered Value
console.log("Success");

}
}
});
});
});

UI 中的表格 HTML

<table  class="table table-hover">
    <thead>
      <tr>

        <th id="nameCol">ID </th>
        <th>NAME</th>
        <th >EMAIL</th>
        <th>MOBILE</th>
        <th>MESSAGE</th>
        <th>DATE & TIME</th>
        <th>STATUS</th>
        <th>REPLY</th>
      </tr>
    </thead>
    <tbody>


<?php if( is_array( $fbrecords ) && count( $fbrecords ) > 0 ) 
foreach($fbrecords as $r) { ?>
    <tr class="idrow">
        <td id="tdname"  style="display:none;" > <?php echo $r->id; ?></td>
        <td><?php echo $r->fullname; ?></td>
        <td><?php echo $r->email; ?></td>
        <td><?php echo $r->mobile; ?></td>
        <td><?php echo $r->message; ?></td>
        <td><?php echo $r->jtime; ?></td>
        <td> <?php  $data=array(
 'data-row' => $r->id, //ID of the row      
'name'=>'status',
'row' => '12px',
'id' => 'status',
'selected'=>$r->status,
'class'=>'statusClass'

);
$data_status = array(
'none' => 'none',
'A&A' => 'Attended & Acted',
'YTA' => 'Yet to Attend',
);
echo form_dropdown($data, $data_status, set_value('status')); ?> </td>
        <td><button type="button" class="btn btn-sm btn-success emlbtn" data-toggle="modal" data-target="#myModal-<?php echo $r->id; ?>"> Reply to <?php $fname=explode(" ",$r->fullname); echo $fname[0]; ?></button>



  <!-- Modal -->
  <div class="modal fade" id="myModal-<?php echo $r->id; ?>" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Reply to <?php $fname=explode(" ",$r->fullname); echo $fname[0]; ?> </h4>
        </div>
        <div class="modal-body">
        <?php 
        echo "<br/>";

         echo $this->session->flashdata('email_sent'); 
         echo "<br/>";

        echo form_open(); ?>
           <label>Recipient :</label>
          <input type="text" id="recipient" name="recipient" value= "<?php  echo $r->email;  ?>" style="cursor:not-allowed" disabled ></input>
          <br> </br>
          <label>Subject :</label>
          <input type="text" id="subject" name="subject" value= "Re: <?php $msg=$r->message; echo substr($msg,0,20); echo "......"; ?>"  ></input>
          <br> </br>
          <label>Message :</label>
          <textarea value="Your Message" id="message" name="message" style="margin: 0px; width: 564px; height: 131px;"></textarea>
        <br> </br>
          <?php 
          $data = array(
            'id' => 'mailsubmit',
            'value' => 'Send Mail'
            );
          echo form_submit($data,'submit' );
          echo form_close(); ?>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

        </td>
      </tr>
<?php } ?>


</tbody>
</table>

在控制器中发送回复

public function send_reply(){
      $data = array(
      'from_email' => "tabsheer.abdulla@ionidea.com", 
       'recipient' =>  $this->input->post('recipient'),
       'from_name' => "tabsheerabdulla",
       'subject' => $this->input->post('subject'),
       'message' => $this->input->post('message'),
       );
       echo json_encode($data);

       $this->load->library('email'); 

         $this->email->from($data['from_email'], $data['from_name']); 
         $this->email->to($data['recipient']);
         $this->email->subject($data['subject']); 
         $this->email->message($data['message']); 

         //Send mail 
         if($this->email->send()) {
         $this->session->set_flashdata("email_sent","<span> * Email sent successfully. </span> "); 
         //$this->load->view('adminhp'); 
         } else {
         $this->session->set_flashdata("email_sent","<span> * Error in sending Email.</span> "); 
        // $this->load->view('adminhp'); 
       }
       }

任何人都可以解决这个问题！？？？

Answer 1

因为您正在为每一行创建一个引导模式，并且每个模式都有具有相同 ID 的元素，这在 W3C 规范中是无效的 HTML。

因此，当您有多个带有#mailsubmit 的提交按钮时，jQuery 总是只针对第一个，这就是为什么它只适用于第一行。

要么使用类名来定位提交按钮，要么使用当前打开的模式的输入来提交正确的数据，要么重写你的模式窗口生成，以便在页面上只生成一个，并使用 javascript 正确填充输入时使用正确的行值模式打开。

附带说明：在问题中使用大量问号会让你看起来像一个 12 岁的比伯粉丝。