Redeem values from a modal item to update it in the database

Asked

Viewed 120 times

1

I have some items returned from the bank that is listed in a table. To add an item, I call a modal where I fill in the fields by saving them in the database. However, if filling in this field is wrong, I need to edit it. The point is, how do I redeem the values for each line by clicking on edit to make a update at 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>
<script src="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 dummy.

EDIT

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

php html bootstrap-3 form

1 answer

1


After the table is loaded, you can include a class in the buttons edit to "listen" to the event click. So to get line values, you use two levels up using Parent, and search for the description of that line. Finally, include the value of Description in the edit input.

That stretch:

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

It will go up to the line since the link is here:

> TR
  > TD
    > A

When you return to line, you will search using find('td[rel="description"]') by 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>
<script src="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 -->

  • If you have other fields, it would just replicate by changing the rel?

  • For example, if you open the same modal to both edit to add, as I do to grab the value of the button I’m clicking (whether it’s Edit or add)?

  • Yes, for other fields, just change the selector and save to different variables. In your example is Description, but can be n variables..

  • To see which button you are clicking you can do so: $(this).html() == 'Edit'). Placing inside a if to check if it is Edit or add. $(this) is the selector that gets the object of the element that was target @Acklay

  • Just one more question. How do I grab instead of html, get value?

  • Value is usually for inputs, using . val(). For other elements, if I’m not mistaken . attr('value') or . prop('value')

  • worked with attr. thanks. abs.

  • It would be easier to use .parents('tr') instead of .parent().parent(). This will raise to the relative tr, or you can use the .closest('tr'). Both work, anyway. ;)

  • I didn’t know the method parents @Inkeliz, I learned one more =] thank you very much!

Show 4 more comments

Browser other questions tagged php html bootstrap-3 form

You are not signed in. Login or sign up in order to post.