jeeva jeeva - 4 months ago 20
jQuery Question

want to update dropdown in each row in the database using Ajax

Here is my UI Screenshot

Highlighted is the Dropdown

What i want?

As i Select any option in the Dropdown it should get updated for that particular row in Database using AJAX

Below are the Codes that i've written. I'm just a Beginner, please excuse if the code is not neat!!

I'm using Codeigniter

Front End

<?php if( is_array( $fbrecords ) && count( $fbrecords ) > 0 )
foreach($fbrecords as $r) { ?>
<tr>
<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(

'name'=>'status',
'row' => '12px',
'id' => 'status',
'selected'=>'none',
'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>


Ajax Code - I've added a Console.log to see weather next row dropdown is being selected or not

$(document).ready( function() {
$(".statusClass").change(function(event) {

//var dropDown = document.getElementById("status");
//var status = dropDown.options[dropDown.selectedIndex].value;
var status = $("select.statusClass").val();
console.log(status);
jQuery.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "index.php/user_authentication/user_data_status_submit",
dataType: 'json',
data: {status:status},
success: function(data){
if (result)
{
alert("success");
}
}

});
});
});


Controller

public function user_data_status_submit(){

$data = array(

'status' => $this->input->post('status'),

);

//Either you can print value or you can send value to database
echo json_encode($data);
$this->login_database->feedback_update($data);

}


*Console Ouputs for the first 3 rows show the 1 row selection thrice - Below is the Screeshots of that *

Shows the first row o/p thrice after selecting 2nd and 3rd row DropDown

Answer

You are checking the values of all select box. Instead of that you get the values which you are updating to obtain the result this keyword will use.

$(document).ready(  function() {
$(".statusClass").change(function(event) {
    var status = $(this).val();