How to add mascara in the input ajax via jquery?

Question

How to add mascara in the input ajax via jquery?

Navigation

#1 by (2 votes)

1

Hello everyone, I have a function that edits the table dynamically, but the data contained in it has formatting coming from the database, but when I double click it it does not remain with the mask. the table coming from the bank is this

IcanedittheinformationandwhenIenteritsavestheinformationandgoestothebottomlinetoeditthenextinformation,butsavedwithoutformatting,Iwantedtoformatonlythevaluefieldanddatefield,Ialreadytriedwith.mask()ewith.unmaskbutdidnotwork

lookattheexamplebelowitworking

$(document).ready(function () {
    $('#tblEditavel tbody tr').each(function (i) {
        $(this).children('td').each(function (p) {
           
            $(this).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);
                            }
                        })
                        var posicao = p + 1;
                        $(this).parent()
                                .html(conteudoNovo)
                                .parents('tr')
                                .next()
                                .children('td:nth-child(' + posicao + ')')
                                .trigger('dblclick');

                    } else if (keyCode == 27 || e.type == 'blur')
                        $(this).parent().html(conteudoOriginal);

                }));
                $(this).children().select();
            });
        });
    });
})

table{
                border-collapse: collapse;
            }
            table, td, th{
                border: 1px solid black;
                padding: 5px;
                
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><tableid="tblEditavel">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Nome</th>
                    <th>Valor Parcela</th>
                    <th>Vencimento</th>
                    <th>Parcela</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>74</td>
                    <td title="Nome" class="editavel">Fatura 45 Fornecedor B</td>
                    <td title="valor" class="editavel vlr">2.350,00</td>
                    <td title="vencimento" class="editavel dt">10/02/2017</td>
                    <td>1 / 3</td>
                </tr>
                <tr>
                    <td>75</td>
                    <td title="Nome" class="editavel">Fatura 45 Fornecedor B</td>
                    <td title="valor" class="editavel vlr">2.350,00</td>
                    <td title="vencimento" class="editavel dt">10/03/2017</td>
                    <td>2 / 3</td>
                </tr>
                <tr>
                    <td>76</td>
                    <td title="Nome" class="editavel">Fatura 45 Fornecedor B</td>
                    <td title="valor" class="editavel vlr">2.350,00</td>
                    <td title="vencimento" class="editavel dt">10/04/2017</td>
                    <td>3 / 3</td>
                </tr>
            </tbody>
        </table>

html jquery ajax

asked by anonymous 03.02.2017 / 15:03

1 answer

How do I insert the value of a variable within an HTML attribute using pure Javascript Twitter User-App Authentication

score 2 · Accepted Answer

Use jquery-maskmoney and jquery-mask and ask a question before adding the element with the title attribute that was clicked:

Example

$(document).ready(function() {
  $('#tblEditavel tbody tr').each(function(i) {
    $(this).children('td').each(function(p) {

      $(this).dblclick(function() {
        if ($('td > input').length > 0) {
          return;
        }
        var conteudoOriginal = $(this).text();
        var novoElemento = $('<input/>', {
          type: 'text',
          value: conteudoOriginal
        });
        if ($(this).attr('title')=='valor')
        { 
           $(novoElemento)
              .maskMoney({decimal:',',thousands:'.'});
        }
        if ($(this).attr('title')=='vencimento')
        { 
           $(novoElemento)
              .mask("99/99/9999");
        }
        $(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);
              }
            })
            var posicao = p + 1;
            $(this).parent()
              .html(conteudoNovo)
              .parents('tr')
              .next()
              .children('td:nth-child(' + posicao + ')')
              .trigger('dblclick');

          } else if (keyCode == 27 || e.type == 'blur')
            $(this).parent().html(conteudoOriginal);

        }));
        $(this).children().select();
      });
    });
  });
})

table {
  border-collapse: collapse;
}
table,
td,
th {
  border: 1px solid black;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script><tableid="tblEditavel">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Nome</th>
                    <th>Valor Parcela</th>
                    <th>Vencimento</th>
                    <th>Parcela</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>74</td>
                    <td title="Nome" class="editavel">Fatura 45 Fornecedor B</td>
                    <td title="valor" class="editavel vlr">2.350,00</td>
                    <td title="vencimento" class="editavel dt">10/02/2017</td>
                    <td>1 / 3</td>
                </tr>
                <tr>
                    <td>75</td>
                    <td title="Nome" class="editavel">Fatura 45 Fornecedor B</td>
                    <td title="valor" class="editavel vlr">2.350,00</td>
                    <td title="vencimento" class="editavel dt">10/03/2017</td>
                    <td>2 / 3</td>
                </tr>
                <tr>
                    <td>76</td>
                    <td title="Nome" class="editavel">Fatura 45 Fornecedor B</td>
                    <td title="valor" class="editavel vlr">2.350,00</td>
                    <td title="vencimento" class="editavel dt">10/04/2017</td>
                    <td>3 / 3</td>
                </tr>
            </tbody>
        </table>