After searching with keyup() edit in Modal and return list with edited value?

Question

Good evening guys I’m performing a search with jQuery and the event keyup() this way:

$('#colaborador').keyup(function(){

    var txtInput = $('#colaborador').val();

    if(txtInput.length == 0){
        $('#listPhone').html('');
        return;
    }

    var html = '';

    $.ajax({
        url : "paginas/listPhone.php",
        type : "GET",
        data : {busca: txtInput},
        dataType : "json",
        success : function(data){
            var html = "";
            for (var i = 0; i < data.length; i++) {
                html += '<tr>';
                html += ...
                html += '</tr>';
            }
            $("#listPhone").html(html);
        }
    });
});

until then everything running well, to each letter typed my script goes in the database and returns a JSON with the lines of the searched content, without problems.

after the return I open a modal with a form inside, also without problems!

to save the edit I do in this form I use the following code:

$('#salvar').click(function() {
    var dados = $('#myForm01').serialize();
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: 'paginas/editarRamal.php',
        async: true,
        data: dados,
        success: function(response) {
            location.reload(); //DÚVIDA AQUI
        }
    });
    return false;
});

I am doing a page re-load, but I would like to know how I would do it so when clicking the record button go back to the list displayed only with the new value in the edited field.

Answer 1

Location.Reload() refreshes the current page. If you use this function you will lose the page data. In this case I advise you not to use Reload. Try this one: $('#save'). click(Function() { var data = $('#myForm01'). serialize(); $. ajax({ type: 'POST', dataType: 'json', url: 'pages/editarRamal.php', async: true, and date: data, Success: Function(Sponse) { $("#collaborator"). val (Response); //and if you want you close the modal here with: // $("seumodal"). modal ("Hide"); } }); Return false; });