CODEWITHSUNDEEP
javascriptjqueryajax
alim1990
alim1990

Reputation: 4972

The first row of an HTML table is being updated by Ajax and the other rows are taking the default value on change

I am updating the status of a user as in this post here.

My Problem is now that only the first row of the table is changed normally and whatever the value of the drop list of the rows, the value displayed and sent is now select.

Here is my Ajax script:

$(document).ready(function()
{
$(document).on('change', '#patient_status ', function()
{
    var pid = $(this).closest('tr').attr('id');
    var current_status = $(this).closest('tr').children('td.change_status').text();
    var new_status = $("#patient_status").val();
    if(current_status == new_status)
    {
        alert("The status selected is already the same!");
    }
    else
    {
        if(confirm("Are you sure you want to change the status of a patient ?"))
        {

            $(this).closest('tr').children('td.change_status').text(new_status);
            //console.log(pid + " " + new_status);
            $.ajax({
                url: '../php/changeStatus.php',
                type: 'POST',
                dataType: 'TEXT',
                data: {pid: pid, new_status: new_status},
                success:function(resp){

                },
                error:function(resp){

                },
            })
        }
    }
});
});

And here my HTML table:

<tr id="<?php echo $patient['patient_id']; ?>">
<td id="change_status"><?php echo $patient['patient_status']; ?></td>
<tr>
<td>
  <select style="color: #0090ff; " class="form-control select" name="patient_status" id="patient_status">
  <option value="select">Select</option>
  <option value="Active">Active</option>
  <option value="Deceased">Deceased</option>
  <option value="Discharged">Discharged</option>
  <option value="Defaulter">Defaulter</option>
  </select>
</td>

The result is like the following:

enter image description here

The first row is changed normally to Active as the drop list indicates.

The second row the value was discharged, and the value in database and on the screen was changed to select.

I think the problem is in here:

var new_status = $("#patient_status").val();

or the on change event is not the case to use here.

EDIT

Whatever the value selected in the second row and afterwards I console it and it was just: select as the value displayed.

I changed the line that I am suspecting into:

var new_status = $("#patient_status option:selected").text();

But nothing changed at all.

Upvotes: 0

Views: 362

Answers (1)

vi5ion
vi5ion

Reputation: 1028

You've given every select the same id, but an id has to be unique.

I suggest giving the select a class patient_status instead and changing the JS accordingly.

So something like this:

$(function() {
  $(document).on('change', '.patient_status', function() {
    var $select = $(this);
    var $tr = $select.closest('tr');
    var pid = $tr.attr('id');
    var $status = $tr.children('td.change_status');
    var current_status = $status.text();
    var new_status = $select.val();
    if (current_status == new_status) {
      alert("The status selected is already the same!");
    }
    else {
      if (confirm("Are you sure you want to change the status of a patient ?")) {
        $status.text(new_status);
        //console.log(pid + " " + new_status);
        $.ajax({
          url: '../php/changeStatus.php',
          type: 'POST',
          dataType: 'TEXT',
          data: { pid: pid, new_status: new_status },
          success: function(resp) {},
          error: function(resp) {}
        });
      }
    }
  });
});

There's also an issue with an open tr tag somewhere in the middle of your html and a reference to td.change_status, but this element and class combination doesn't exist in your html. There is a td with an id of change_status but then you have the same problem as stated above in that it is not unique.

Edit: HTML fix below

<tr id="<?php echo $patient['patient_id']; ?>">
  <td class="change_status"><?php echo $patient['patient_status']; ?></td>
  <td>
    <select style="color: #0090ff; " class="form-control select patient_status" name="patient_status">
      <option value="select">Select</option>
      <option value="Active">Active</option>
      <option value="Deceased">Deceased</option>
      <option value="Discharged">Discharged</option>
      <option value="Defaulter">Defaulter</option>
    </select>
  </td>
</tr>

Upvotes: 2

Related Questions