Edit modal data fill with php database

Question

Edit modal data fill with php database

Navigation

#1 by (1 votes)

1

I have a form that does the editing of the database data based on the received id.

/*
função para atualizar os dados quando clicado em submit
*/

$('.editfoto').submit(function () {
        var form = $(this);
        var dados = new FormData($(this)[0]);
        $("#btnEdit").prop("disabled", true);

        id = $(this).data("idedit");

        $.ajax({
            url: 'editafoto.php?id=' + id,
            cache: false,
            contentType: false,
            processData: false,
            data: dados,
            type: 'GET'
        }).done(function (data) {
            fetchUser();
            alert("Dados Atualizados com Sucesso");
            console.log("STATUS : ", data);
            $("#btnEdit").prop("disabled", false);
            $('#modalEdit').modal('hide');
            $('.editfoto')[0].reset();

        }).fail(function (jqXHR, textStatus) {
            console.log("Request failed: " + textStatus);
            $("#btnEdit").prop("disabled", false);
        });
        return false;

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script><linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<!-- chama o modal -->
 <a id="editfoto" data-idedit="<?php echo $row['idfoto']; ?>"><i class="fas fa-edit"></i></a>

<div class="modal fade" id="modalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Editar Foto</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="editfoto" method="POST" enctype="multipart/form-data">
                    <input type="hidden" id="idfoto" name="idfoto" value="<?php echo $ftvi->getIdfoto(); ?>" />
                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" for="datavisita">Data Vísita</label>
                        </div>
                        <div class="col col-lg-6">    
                            <input type="text" name="dtvisita" id="dtvisita" required autocomplete="off" class="form-control  form-control-sm form-group small" value="<?php echo $ultil->formataData($ftvi->getIdfoto()); ?>" />
                        </div>
                    </div>

                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" for="idvisita">Visíta</label>
                        </div>
                        <div class='col col-md-6'>   
                            <input type="text" name="idvisita" id="idvisita" readonly class="form-control  form-control-sm form-group small" value="<?php echo $_SESSION['id']; ?>" />
                        </div>
                    </div>
                    <br />
                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" for="percentandamento">Porcentagem Andamento</label>
                        </div>
                        <div class="col col-md-6 slidecontainer">
                            <input type="range" name="percentandamento" id="percentandamento" required min="1" max="100" value="<?php echo $ftvi->getPercentandamento(); ?>" class="form-control-range slider" oninput="disp.value = percentandamento.value">
                            <output  id="disp"></output>
                        </div>
                    </div>
                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" for="caminhofoto">Foto</label>
                        </div>
                        <div>   
                            <input type="file" name="caminhofoto" id="caminhofoto" required class="form-control-file form-control-sm form-group small" accept="image/png,image/jpg" value="<?php echo $ftvi->getCaminhofoto(); ?>" />
                        </div>
                    </div>
                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" class="control-label" for="descricaofoto">Descrição Foto</label>
                        </div>
                        <div class='col-md-auto'>                
                            <textarea name="descricaofoto" id="descricaofoto" cols="25" rows="3" class="form-control  form-control-sm form-group small" ><?php echo $ftvi->getDescricaofoto(); ?></textarea>
                        </div>
                    </div>  
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                <button type="submit" id="btnEdit" class="btn btn-primary">Salvar</button>
            </div>
            </form>
        </div>
    </div>
</div>

The problem is that I am not able to pass the information from PHP to Modal. so it loads the information to be edited.

I found an example that uses data-attributes, but if I put all data-attributes in my call link it will get huge. I already have a time that I try to solve this problem and nothing.

I have the listing and when clicking the icon / link edit it open a modal like this one of the addicina, only with the data loaded from the bank. A print:

php javascript html jquery

asked by anonymous 22.11.2018 / 15:46

1 answer

Remove a class from a Tag with more than one class How to avoid the layout destroyer in the Tabbed Layout when changing the tab?

score 1 · Answer 1

I noticed a syntax error in your code that may not be allowing you to find the correct id you want to edit:

url: 'editafoto.php=id' + id,

Where should I actually go:

url: 'editafoto.php?id=' + id,

a "?" is to signal that from this point your "Query String" starts, and you say that there is a "parameter" called "id" whose value "=" is the contents of the variable "id".

But you also already have a field of type HIDDEN in the form as the name "idfoto" that will pass this value, so, do you really need to mount this query string in the url of the page you are calling?

Be very careful about security because any user can change this "ID" and submit the form, changing the data of another registry, which may not be appropriate.

Also understand that if you are intending to load a list of photos to open each one in a modal, that way you will have to load all the data of all the photos from the list on the screen to open one by one, that is , your html return could get huge. a more economical way would be to load the list and click on a photo, load the data to be edited through ajax.

Maybe I did not answer your question, but I preferred to list here some alerts that may give you some guidance on where to go.