DataTables get ID

Question

I'm working with DataTables and CodeIgniter, and Right now I want to be able to edit any row in my table, and I'm already doing it! But I'm only updating the row that has the ID = 1, that's because in my controller I defined this :

        $this->db->set('NameContact', $_POST['Name']);
        $this->db->set('NumberContact', $_POST['Number']);
        $this->db->where('IdContact', 1);
        $this->db->update('contacts');

As you can see I need to get the id of the selected row in the table to pass it with the $_POST method. But I can't seem to find a right way to do it via JS. Any help pls?

My HTML:

{Contacts}
                <tr>
                    <td id="{IdContact}">{IdContact}</td>
                    <td>{NameContact}</td>
                    <td>{NumberContact}</td>
                    <td><a data-toggle="modal" data-target="#EditNumber"> <i class="fa fa-edit"></i></a></td>
                </tr>
                {/Contacts}

My JS:

function EditPhoneNumber(){
var Name = document.getElementById("EditName").value;
var Number = document.getElementById("EditNumber").value;
console.log(Name);
console.log(Number);

jQuery.ajax({
  type: "POST",
  url: 'http://localhost/projeto/index.php/Backoffice_Controller/EditContacts',
  data: {Name: Name, Number: Number},
  success: function (response) {
    console.log("success");
    console.log(response); 
  },
  error: function(response){
    console.log("error");
     console.log(response); 
  }
});
}

Here is my Modal:

<div id="EditNumber" class="modal fade" role="dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <h4 class="modal-title">Editar Contacto</h4>
  </div>
  <div class="modal-body">
    <input type="text" name="NameContact" placeholder="Name" id="EditName"><br>
    <input type="text" name="NumberContact" placeholder="Number" id="EditNumber">
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-default" onclick="EditPhoneNumber()">Editar</button>
  </div>
</div>

@FrankerZ They are in a modal! But dont think that will have something to do! — Gabriel Gomes, Oct 21 '18 at 23:23
Possible duplicate of [Passing data to a bootstrap modal](https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal) — Blue, Oct 21 '18 at 23:25

score 0 · Answer 1 · answered Oct 22 '18 at 04:22

Pass data-id into your html tag like below and on tag click you need to manage function instead of opening modal directly.Look at the below code.

HTML

{Contacts}
    <tr>
        <td id="{IdContact}">{IdContact}</td>
        <td>{NameContact}</td>
        <td>{NumberContact}</td>
        <td><a href="javascript:void(0)" data-id="{IdContact}" onclick="editNumberModal(this)"> <i class="fa fa-edit"></i></a></td>
    </tr>
{/Contacts}

In your Modal

<div id="EditNumber" class="modal fade" role="dialog">
<!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Editar Contacto</h4>
        </div>
        <div class="modal-body">
            <input type="text" name="NameContact" placeholder="Name" id="EditName"><br>
            <input type="text" name="NumberContact" placeholder="Number" id="EditNumber">
            <input type="hidden" name="NumberContactId" id="EditId">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-default" onclick="EditPhoneNumber()">Editar</button>
        </div>
    </div>
</div>

JS

function editNumberModal(obj){
    vat id = jQuery(obj).attr('data-id');
    jQuery('#EditNumber').modal();
}

function EditPhoneNumber(){
    var Name = document.getElementById("EditName").value;
    var Number = document.getElementById("EditNumber").value;
    var Id = document.getElementById("EditId").value;
    console.log(Name);
    console.log(Number);

    jQuery.ajax({
      type: "POST",
      url: 'http://localhost/projeto/index.php/Backoffice_Controller/EditContacts',
      data: {Name: Name, Number: Number, Id:Id},
      success: function (response) {
        console.log("success");
        console.log(response); 
      },
      error: function(response){
        console.log("error");
        console.log(response); 
      }
    });
}

DataTables get ID

1 Answers1