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

时间:2023-01-12 21:13:38

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.

我在下面显示了我使用JQuery处理重新加载页面的函数,因此在模板的中心加载了相同的负载。

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"));

    });
}

1 个解决方案

#1


0  

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

这将使用ajax响应替换#divConteudo的全部内容:

$(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:

您将不得不以内部div为目标,并过滤响应以仅获取您要更新的内容。像这样的东西:

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

#1


0  

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

这将使用ajax响应替换#divConteudo的全部内容:

$(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:

您将不得不以内部div为目标,并过滤响应以仅获取您要更新的内容。像这样的东西:

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