Edit PHP Data with Jquery and Modal Bootstrap

Asked

Viewed 34 times

-1

Gentlemen, because in the code below is not passing the data (fetch) to the modal so I can update?

Html

<a href="#editModal" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Editar">&#xE254;</i></a><input type="hidden" name="update_id" id="update_id">                    
                    <div class="form-group">
                        <label>Título</label>
                        <input type="text" class="form-control" name="title" id="title" placeholder="Nome do lead" required>
                    </div>
                    <div class="form-group">
                        <label>Telefone</label>
                        <input type="text" class="form-control" name="phone" id="phone" required>
                    </div>
                    <div class="form-group">
                        <label>E-mail</label>
                        <input type="email" class="form-control" name="email" id="email" required>
                    </div>
                    <div class="form-group">
                        <label>Valor</label>
                        <input type="text" class="form-control" name="value" id="value" required>
                    </div>
</div>

Jquery

// Edit modal
$(document).ready(function() {
    $(document).on('click', 'edit', function(){

        $('#editModal').modal('show');

            $tr = $(this).closest('tr');

            var data = $tr.children("td").map(function(){
                return $(this).text();
            }).get();

            console.log(data);

            $('#update_id').val(data[0]);
            $('#title').val(data[1]);
            $('#phone').val(data[2]);
            $('#email').val(data[3]);
            $('#value').val(data[4]);
            $('#step').val(data[5]);
            $('#prob').val(data[6]);
    });
});
javascript jquery bootstrap-4
  • 2

    .on('click', 'edit', ... shouldn’t be .on('click', '.edit', ..., with the point before edit signaling that it is a CSS class?

  • @Woss, not my friend.

  • It should. The second argument there is the selector. It may be that not only is that the problem, but that this is wrong is.

1 answer

0

    $("#editModal").on('show.bs.modal', event => {
        tr = $(this).closest('tr');

        let data =[];

        $(tr).find('td').each (function() {
            data.push(this.html());
        });  

        $('#update_id').val(data[0]);
        $('#title').val(data[1]);
        $('#phone').val(data[2]);
        $('#email').val(data[3]);
        $('#value').val(data[4]);
        $('#step').val(data[5]);
        $('#prob').val(data[6]);
    });

Browser other questions tagged javascript jquery bootstrap-4

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