Question

以下是UI的一些截图

这是我登录后立即获得的第一个窗口

使用jQuery我已经使用了如下的slidetoggle功能进行反馈。

现在，当我点击每行的回复按钮时，会触发bootstrap-modal弹出窗口。

我在这里感到很困惑。当我点击发送它应该保持在同一个窗口。它适用于使用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");

}
}
});
});
});

用户界面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>

Send_reply in Controller

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

任何人作为Soluton为此！???

Answer 1

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

因为你有多个提交按钮#mailsubmit，jQuery总是只针对第一个，这就是它只适用于第一行的原因。

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

并注意：在问题中使用大量的问号让你看起来像一个12岁的比伯粉丝。

我点击发送后想要保持在同一个模态对话窗口中

1 个答案: