单击发送后，我想留在同一个模态对话框窗口中 [英] i want to stay in the same modal-dialog window after i click send

问题描述

下面是用户界面的一些屏幕截图

Below are some screenshots of the UI

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

我使用jQuery，如下所示使用slidetoggle函数获取反馈.

现在，当我单击每行的答复按钮时，就会触发引导模式弹出窗口.

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

I'm confused here. As i click send it should stay in the same window. it works for the first one using ajax. but for 2nd one onwards it refreshes the page.

代码下方

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>

在控制器中发送回复

public function send_reply(){
      $data = array(
      'from_email' => "[e-mail]", 
       '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'); 
       }
       }

任何人都可以作为解决方案！???

Anybody as a Soluton for this!???

推荐答案

因为您要为每行创建一个引导模态，并且每个模态都具有具有相同ID的元素，所以在W3C规范中这不是有效的HTML.

Because you are creating a bootstrap modal for every row, and every modal has elements with same IDs which is not valid HTML in W3C specification.

因此，由于您具有多个带有#mailsubmit的提交按钮，因此jQuery始终仅将第一个目标作为目标，这就是为什么它仅适用于第一行的原因.

So as you have multiple submit buttons with #mailsubmit jQuery always targets only the first one which is why it only works for first row.

要么使用类名来定位提交按钮，要么使用当前打开的模式的输入作为目标以提交正确的数据，或者重写模式窗口的生成，以便在页面上仅生成一个，并使用javascript在以下情况下用正确的行值正确填充输入:模态打开.

Either use class name for targeting submit buttons and target the inputs of currently open modal to submit correct data or rewrite your modal window generation so that only one is generated on page and use javascript to properly fill the inputs with correct row values when the modal opens.

还有一个注释:在问题中使用大量问号会使您看起来像是12岁的Bieber粉丝.

这篇关于单击发送后，我想留在同一个模态对话框窗口中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！