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

Question

Below are some screenshots of the UI

This is first window which i get as soon as i login

Using jQuery i've used slidetoggle function as below for feedback.

now when i click reply button for each row bootstrap-modal popup is triggered.

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.

Below are the Code

Ajax code

// 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");

}
}
});
});
});

Table HTML in UI

<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' => "[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!???

Answer 1

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.

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.

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.

And a side note: Using tons of question marks in questions makes you look like a 12 year old Bieber fan.