How to update a page after insert, update or delete with ajax without reflesh

1

I have code on page extena delete.php that does the actions,

HTML:

<div class="modal fade" id="modalAddfoto" 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">Adicionar 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="addfoto" method="POST" enctype="multipart/form-data">
                            <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" />
                                </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="1" 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" />
                                </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" ></textarea>
                                </div>
                            </div>  
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                        <button type="submit" id="btnAdd" class="btn btn-primary">Salvar</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
        
         <div class="container">
         <!--getData.php-->
        <table class="table table-bordered table-responsive">
    <thead>
        <tr>
            <th>#</th>
            <th>Decrição Foto</th>
            <th>Data Visita</th>    
            <th>Andamento</th>
            <th>Foto</th>
            <th colspan="2" class="text-center">Ações</th>
        </tr>
    </thead>
    <tbody>
     <tr>
                    <td>1</td>
                    <td>Teste 01</td>
                    <td>18/10/2018</td>
                    <td>60%</td>
                    <td><img src="<?php print($row['caminhofoto']); ?>" alt="Imagem" height="42" width="42"></td>
                    <td align="center">
                        <a id="delfoto" data-id="<?php echo $row['idfoto'] ?>"><i class="fas fa-trash"></i></a>
                    </td>
                </tr>
    </tbody>
    </table>

         </div>

In my js code I have: the getData.php that queries the database and displays a table with the returned data

fetchUser();
function fetchUser()
{
    $.get("getData.php", function (data, status) {

    }).done(function (data) {
        $('#result').html(data);
    });
}

In the case of delete,

$("#delfoto").click(function () {
    id = $(this).data("id");
    alert(id);
    $.get("delete.php?id=" + id, function (data, status) {

    }).done(function (data) {
        fetchUser();
    });
});

In the case of delete <a id="delfoto" data-id="<?php echo $row['id'] ?>"><i class="fas fa-trash"></i></a> The problem is that as it calls an external page to display the data in the result div then it stays in the empty html code of the browser as if it did not exist, and when trying to exclude a record by clicking in the icon of the link id="delfoto" nothing happens precisely because it is as if there was no such link on the page.

I would like to know if there is any other way to update the data after a CRUD action or if there is a way to fix this without reflesh.

    
asked by anonymous 21.11.2018 / 19:58

1 answer

1

By analyzing your question better, I realized what has happened: Since your link is added after page initialization, it does not have the event listener that is added at startup and needed for the action. But you can use a static page element to add the event.

Your function called by the click would be:

$("body").on('click','#delfoto', function () {
  // a partir da versão 1.7 + pode-se usar também:
  // $('#delfoto').live( 'click', function () {

    id = $(this).data("id");
    alert(id);
    $.get("delete.php?id=" + id, function (data, status) {

    }).done(function (data) {
        fetchUser();
    });
});

More information on the links:

link link link

    
22.11.2018 / 11:37