Redeem values of a modal item to update it in the bank

Navigation
1

I have some items returned from the database that is listed in a table. To add an item, I call a modal in which I fill in the fields saving them to the bank. However, if this field is wrong, I need to edit it. The question is, how do I retrieve values for each row by clicking edit to do a update in the bank?

See the code below as an example: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<table border="1" cellspacing="1" cellpadding="5">
   <thead>
      <tr>
         <th width="6%">Data</th>
         <th width="40%">Descrição</th>
         <th width="10%">Ação</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td rel="date">27/10/2016</td>
         <td rel="description">Febre amarela</td>
         <td rel="action">
            <a data-toggle="modal" href="http://fiddle.jshell.net/bHmRB/51/show/" data-target="#myModal">Edit</a>
            <a data-toggle="modal" href="#" data-target="#add">Delete</a>
         </td>
      </tr>
     <tr>
         <td rel="date">27/10/2016</td>
         <td rel="description">Gripe suína</td>
         <td rel="action">
            <a data-toggle="modal" href="http://fiddle.jshell.net/bHmRB/51/show/" data-target="#myModal">Edit</a>
            <a data-toggle="modal" href="#" data-target="#add">Delete</a>
         </td>
      </tr>
   </tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Modal title</h4>
         </div>
         <div class="modal-body">
           <form>
           Descrição: <input type="text"/>
           </form>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            <button type="button" class="btn btn-primary">Salvar</button>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Note: The delete button is only fictitious.

EDIT

I'm using PHP as back end to search for this data in the database.

    
asked by anonymous 26.01.2017 / 14:04

1 answer

1

After the loaded table, you can add a class to the edit buttons to "hear" the click event. So to get line values, you use two levels up using parent , and search for the description of that row. Finally, include description in the input for editing.

This excerpt: 

$(this).parent().parent().find('td[rel="description"]').html();

It will rise to the line, since the link is here: 

> TR
  > TD
    > A

When you go back to the line, you will search using find('td[rel="description"]') for the element you want.

Your Example: 

$(".editar").click(function() {
  var descricao = $(this).parent().parent().find('td[rel="description"]').html();
  $("#descricao").val(descricao);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
<table border="1" cellspacing="1" cellpadding="5">
  <thead>
    <tr>
      <th width="6%">Data</th>
      <th width="40%">Descrição</th>
      <th width="10%">Ação</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rel="date">27/10/2016</td>
      <td rel="description">Febre amarela</td>
      <td rel="action">
        <a data-toggle="modal" href="http://fiddle.jshell.net/bHmRB/51/show/" data-target="#myModal" class="editar">Edit</a>
        <a data-toggle="modal" href="#" data-target="#add">Delete</a>
      </td>
    </tr>
    <tr>
      <td rel="date">27/10/2016</td>
      <td rel="description">Gripe suína</td>
      <td rel="action">
        <a data-toggle="modal" href="http://fiddle.jshell.net/bHmRB/51/show/" data-target="#myModal" class="editar">Edit</a>
        <a data-toggle="modal" href="#" data-target="#add">Delete</a>
      </td>
    </tr>
  </tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <form>
          Descrição:
          <input id="descricao" type="text" />
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-primary">Salvar</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
    
26.01.2017 / 14:24
Convert a text file to PDF without saving to a physical location Convert RSS to JSON Google Feed API