Update select after registration without refresh

Question

Good afternoon, this is my first post, I would like the help of vcs, I have a select option that searches the data in the bd, just after this I have a button where I open a modal window to include more options to this select if you need, with this I do a cadre in the bd without refreshing the page, this because I already have items inserted in the other inputs, what I need is that after the registration this select option is updated without the page re-fres. follows the code.

<select id="location" name="reup"  >
<option value="">item</option>
<?php aqui vem os demais option com a busca no bd   ?>
</select>

jquery:

$('#insert').click(function(e){
    e.preventDefault();

    var nomer = $('#nomer').val();
    .....
    var obsr = $('#obsr').val();

    $.post('insreu.php', {
        nomer:nomer,
        .....
        obsr:obsr
    }, function(resposta){

        if(resposta == 1){

            $('input, textarea').val('');
            $('#reup').append(e);
            alert('Cadastrado com sucesso.');
        }else {
            alert(resposta);
        }
    });

});

Thanks for your help.

Answer 1

I recommend splitting your code into two files, one that will contain all the information on the page and a second that will be a jquery helper to perform a new query, which will contain only the options.

default.php

<select id="location" name="reup">

    <!-- Arquivo que será incluído o arquivo que será responsável por mostrar as options atualizadas -->
    <?php include "options.php"; ?>

</select>

---

options.php

In the archive options.php, should contain the query on the server and bring the options to be shown in the selection field.

<option value="">item</option>
<?php aqui vem os demais option com a busca no bd   ?>

---

Javascript

In JS, we will continue to do the normal inclusion as it is already being done, but we will add a .load() to reload the file options.php after inserting the new option, this will bring the selection field with the updated options.

$('#insert').click(function(e){
    e.preventDefault();

    var nomer = $('#nomer').val();
    .....
    var obsr = $('#obsr').val();

    $.post('insreu.php', {
        nomer:nomer,
        .....
        obsr:obsr
    }, function(resposta){

        if(resposta == 1){

            $('input, textarea').val('');
            $('#reup').append(e);


            // Aqui iremos recarregar o elemento com o name=reup, o recarregamento será apenas nesse elemento e irá recarregar o arquivo options.php, com isso irá realizar a consulta novamente das opções disponíveis
            $('[name="reup"]').load('options.php');


            alert('Cadastrado com sucesso.');

        }else {
            alert(resposta);
        }
    });

});

---

Reference: load()