Jeeva Jeeva - 4 months ago 15
Ajax Question

i want to stay in the same modal-dialog window after i click send

Below are some screenshots of the UI

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

enter image description here

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

enter image description here

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

enter image description here

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


Anybody as a Soluton for this!???

Answer

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.