CODEWITHSUNDEEP
jqueryhtmlajax
WMomesso
WMomesso

Reputation: 264

Editable table on JQuery and html?

I'm trying to make a PivotTable for editing the data without refresh, but when double-clicking the line nothing happens, follows the JQuery code

$(document).ready(function(){
    $('#tblEditavel tbody tr td.editavel').dblclick(function(){
        if($('td > input').length > 0){
            return;
        }
        var conteudoOriginal = $(this).text();
        var novoElemento = $('<input/>', {type: 'text', value:conteudoOriginal});

        $(this).html(novoElemento.bind('blur keydown', function(e){
            var keyCode = e.which;
            var conteudoNovo = $(this).val();
            if(keyCode == 13 && conteudoNovo != '' && conteudoNovo != conteudoOriginal){
                var objeto = $(this);
                $.ajax({
                    type:"POST",
                    url:"alterar.php",
                    data: {
                        id:$(this).parents('tr').children().first().text(),
                        campo:$(this).parent().attr('title'),
                        valor:conteudoNovo
                    }
                    success:function(result){
                        objeto.parent().html(conteudoNovo);
                        $('body').append(result);
                    }
                })
            }
            else if( keyCode == 27 || e.type == 'blur') {
                $(this).parent().html(conteudoOriginal);
            }
        }));
        $(this).children().select();
    }    
})})

code of the simple table HTML

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="atualiza.js"></script>
    <style>
        table{
            border-collapse: collapse;
        }
        table, td, th{
            border: 1px solid black;
            padding: 5px;

        }
    </style>
</head>
<body>
    <table id="tblEditavel">
        <thead>
            <tr>
                <th>Id</th>
                <th>Nome</th>
                <th>Valor</th>
                <th>Vencimento</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>74</td>
                <td title="Nome" class="editavel">Fatura 45 Jhovini</td>
                <td title="valor" class="editavel">2.350,00</td>
                <td title="vencimento" class="editavel">10/02/2017</td>
            </tr>

        </tbody>
    </table>

</body>

Before the code worked, but after putting the ajax it does not work with double click, what did I do wrong?

Upvotes: 0

Views: 707

Answers (1)

Ionut Necula
Ionut Necula

Reputation: 11472

You're missing a , before succes in AJAX and you have an extra closing } after $(this).children().select();. See the working snippet:

$(document).ready(function() {
  $('#tblEditavel tbody tr td.editavel').dblclick(function() {
      if ($('td > input').length > 0) {
        return;
      }
      var conteudoOriginal = $(this).text();
      var novoElemento = $('<input/>', {
        type: 'text',
        value: conteudoOriginal
      });
      $(this).html(novoElemento.bind('blur keydown', function(e) {
        var keyCode = e.which;
        var conteudoNovo = $(this).val();
        if (keyCode == 13 && conteudoNovo != '' && conteudoNovo != conteudoOriginal) {
          var objeto = $(this);
          $.ajax({
            type: "POST",
            url: "alterar.php",
            data: {
              id: $(this).parents('tr').children().first().text(),
              campo: $(this).parent().attr('title'),
              valor: conteudoNovo
            }, //added this comma here
            success: function(result) {
              objeto.parent().html(conteudoNovo);
              $('body').append(result);
            }
          })
        } else if (keyCode == 27 || e.type == 'blur'){
          $(this).parent().html(conteudoOriginal);
          }
      }));
      $(this).children().select();
    
        //} removed the extra } from here.
    });

  })
table {
  border-collapse: collapse;
}
table,
td,
th {
  border: 1px solid black;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblEditavel">
  <thead>
    <tr>
      <th>Id</th>
      <th>Nome</th>
      <th>Valor</th>
      <th>Vencimento</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>74</td>
      <td title="Nome" class="editavel">Fatura 45 Jhovini</td>
      <td title="valor" class="editavel">2.350,00</td>
      <td title="vencimento" class="editavel">10/02/2017</td>
    </tr>

  </tbody>
</table>

Upvotes: 3

Related Questions