Populating data from an html table row

Question

The given snippet has a javascript function and a table in which I want to show content of each row using a modal.

But the problem is when I am using alert in middle for debugging for any number of row when I click in view button it always shows the first value of m_id but it must show the corresponding values. $v object is returning expected data only no problem in that.

I need help since I am just a beginner in ajax.

<script type="text/javascript">
  function view_message(){
    //alert("aa gyaksjhfjxvhk");
    var m_id = document.getElementById('m_id').value;
    var c_name = document.getElementById('c_name').value;
    var message = document.getElementById('message').value;

   
    alert(m_id);
    //alert(loc);

    $.ajax({
      type: "POST",
      url: "view_message.php",
      data:
      { 'm_id' :m_id,
        'c_name' : c_name,
        'message' : message
      },
      success: function(data){
      //  alert("success");
        
         $(".message_container").html(data);

      }
    });
  
  }

</script>

foreach($v_message as $v)
              {         
                 echo '<tr>';
                  echo '<td>'.$v->time.'</td>';
                  echo '<td>'.$v->c_name.'</td>';

                   echo '<input id="m_id" name="m_id" value="'.$v->id.'" hidden />';
                   echo '<input id="c_name" name="c_name" value="'.$v->c_name.'" hidden />';
                   echo '<input id="message" name="message" value="'.$v->message.'" hidden />';
                 
                  echo '<td data-toggle="modal" data-target="#myModal">';
                  
                
                  echo '  <input type="button" id="view" onclick="view_message()" value="view"></input>';
                echo '</td>';
                
                  echo '<td data-toggle="modal" data-target="#myModal1">
                    
                 <a href="#"><span>Delete</span></a>';
                  
                  echo '</td>';

                  echo '</tr>';  ?>

                  <div id="message_container">
                  </div>

IDs must be unique in the document. http://stackoverflow.com/a/9454716/2181514. Your for loop generates multiple items with the same id, so when you do `$(#id` you get the first one. — freedomn-m, Jul 30 '16 at 07:49

freedomn-m · Answer 1 · 2016-07-30T12:02:05.167

IDs must be unique in the document. See: stackoverflow.com/a/9454716/2181514.

Your for loop generates multiple items with the same id, so when you do $(#id you get the first one.

You can fix this by using classes and passing a reference to the current row:

Change

onclick="view_message()"
<input id="m_id" name="m_id"

to

onclick="view_message(this)"
<input class='m_id' id="m_id" name="m_id"

then:

function view_message(el){
    var row = $(el).closest("tr");
    var m_id = $(".m_id", row).val();

Update: typo - should have been $(el).closest, not $(this) Example fiddle: https://jsfiddle.net/37tkgsnm/

html:

<tr>
  <td><input class='m_id' value='123' /></td>
  <td><button type="button" onclick="view_message(this);">click</button></td>
</tr>

js:

function view_message(el) {
    var row = $(el).closest("tr");
    alert($(".m_id", row).val())
}

it says undefined in alert box. – Pratik Agarwal Jul 30 '16 at 08:02 — Pratik Agarwal, Jul 30 '16 at 08:02

score 0 · Answer 2 · answered Jul 30 '16 at 09:12

change your selector $(.message_container) to $(#message_container) modified code is below.

<script type="text/javascript">
function view_message(){
//alert("aa gyaksjhfjxvhk");
var m_id = document.getElementById('m_id').value;
var c_name = document.getElementById('c_name').value;
var message = document.getElementById('message').value;


alert(m_id);
//alert(loc);

$.ajax({
  type: "POST",
  url: "view_message.php",
  data:
  { 'm_id' :m_id,
    'c_name' : c_name,
    'message' : message
  },
  success: function(data){
  //  alert("success");

     $("#message_container").html(data);

  }
  });

}

</script>

you are selecting your alertbox using class selector `$(.)` change it to id selector because message_container is ID of your alert box — Meesam Abbas, Jul 30 '16 at 09:25

score 0 · Answer 3 · answered Jul 30 '16 at 10:00

because your selector is document, its find first element with target id, so always first row element return in result.in php code replace onclick="view_message()" with class="view-btn" and use my answer javascript,

<script type="text/javascript">
$(document).ready(function() {
    var view_message = function(){

    var row = $(this).closest('tr');
    var m_id = $(row).find('#m_id').val();
    var c_name = $(row).find('#c_name').val();
    var message = $(row).find('#message').val();      
    alert(m_id);      
    }
    $(".view-btn").on('click', view_message);
});
</script>

foreach($v_message as $v)
              {         
                 echo '<tr>';
                  echo '<td>'.$v->time.'</td>';
                  echo '<td>'.$v->c_name.'</td>';

                   echo '<input id="m_id" name="m_id" value="'.$v->id.'" hidden />';
                   echo '<input id="c_name" name="c_name" value="'.$v->c_name.'" hidden />';
                   echo '<input id="message" name="message" value="'.$v->message.'" hidden />';
                 
                  echo '<td data-toggle="modal" data-target="#myModal">';
                  
                
                  echo '  <input type="button" id="view" class="view-btn" value="view"></input>';
                echo '</td>';
                
                  echo '<td data-toggle="modal" data-target="#myModal1">
                    
                 <a href="#"><span>Delete</span></a>';
                  
                  echo '</td>';

                  echo '</tr>';  ?>

                  <div id="message_container">
                  </div>

Populating data from an html table row

3 Answers3