不要使用Jquery-Ajax刷新菜单以刷新页面

Question

I'm working on a function to reload the page, but our menu which is actually an accordion should not be reloaded. Ie, to make it refresh the page to continue in the same state.

I'm showing below the functions I use JQuery to treat reload the page and consequently the same load in the center of the template.

This function below is the refresh of the page:

function recarregarPagina() {

//Verifica quais teclas estão sendo pressionadas
$(document).on("keydown", function(e) {

    //Houve um evento para recarregar a página?
    if ((e.which || e.keyCode) === 116 || (e.keyCode === 82 && e.ctrlKey)) {
        e.preventDefault();

        //Inicializa a hash
        var hash = window.location.hash;
        console.log("recarregarPagina 1=" + hash);

        //A última url está definida?
        if (hash !== '' && hash !== undefined) {
            console.log("recarregarPagina 2=" + hash);

            //Recarrega a página central do template de acordo com a última url visitada
            loadView(hash, false, true, true);
        }
    }
});
}

The function below is the load view (page) in center of template:

function loadView(url, post, submit, repeat) {

//Remove o hash da url para poder carregá-la sem a ocorrência de loop
url = url.replace("#", "");

//Inicializa variáveis
var div = $("#divConteudo");
var overlay = $("#overlay");


var type = "POST";
var data = $("form").serialize();

//Verifica se o tipo de requisição ajax será post ou GET
if (!post) {
    type = "GET";
}

//A última hash é diferente da url atual?
if (lastHash !== url || repeat) {

    //Exibe o loader
    overlay.show();
    div.hide();


    /**
     * Inicia a requisição AJAX
     */
    $.ajax({
        //Antes de enviar a requisição
        beforeSend: function() {
            //Atualiza o último hash visitado
            lastHash = url;

            //Insere a hash na url do navegador
            window.location.hash = url;

        },
        type: type,
        url: url,
        //Para enviar os dados junto com a página, verifica se será necessário o envio ou não,
        //pois dependendo do caso o $_POST pode atrapalhar o carregamento
        data: function() {

            //Não foi definido o envio?
            if (!submit) {
                //Não retorna os dados
                return null;

                //O envio foi definido, ou omitido
            } else {
                //Retorna os dados do formulário
                return data;
            }
        }


        //Quando a requisição estiver concluída
    }).done(function(data) {

        //Aguarda o carregamento da View
        $(div).html(data).load(function() {
        });

        //Remove o loader
        overlay.hide();
        div.show();

        //Inicializa o envento para tratar a submissão do form
        formSubmit($("form"));

    });
}

Answer 1

This replaces the whole contents of #divConteudo with the ajax response:

$(div).html(data); // you don't need the .load you have after this

You'll have to target an inner div instead, and filter the response to get only the piece of content you want to update. Something like this:

var targetDiv = $('#mioloDoConteudo');
var newData = $(data).find('#mioloDoConteudo').html();
targetDiv.html(newData);