How to make jQuery .load only load content inside the main?

Question

How to make jQuery .load only load content inside the main?

Navigation

#1 by (2 votes)
#2 by (1 votes)

3

How could I do to make the .load function instead of loading the content of <body> just load the contents within <main> ?

My jQuery:

// Checa se a página foi carregada para evitar aplicar os códigos antes de ter algum elemento não carregado. Pode-se usar também "$(function(){".
        $(document).ready(function(){
            $(".ajax").on("click", function(e){
                e.preventDefault(); //eliminamos o evento
                var path = $(this).attr("href"); //Pegamos o caminho
                var titulo = $(this).data('titulo'); //pegamos o titulo da página
                document.title = titulo; // Alterar o titulo da página
                window.history.pushState("", titulo, path);   
                $("main").empty(); //Limpa para poder colocar o conteúdo.
                $("main").load(path); //Faz uma requisição http para o servidor.
            });
        });

HTML:

<body>
    <!-- No caso, o header é a parte fixa, que não muda. -->
    <header>
        <div>"Aqui fica o player de audio."</div>
        <ul>
            <li><a href="home.html" class="ajax" data-titulo="Início do meu Site">Home</a></li>
            <li><a href="sobre.html" class="ajax" data-titulo="Sobre mim">Sobre</a></li>
        </ul>
    </header>
    <main>
        <!-- Aqui é onde o conteúdo vai ser carregado. -->
    </main>


</body>

jquery ajax

asked by anonymous 15.08.2014 / 04:47

2 answers

1

In HTML place:

   <body>
    <!-- No caso, o header é a parte fixa, que não muda. -->
    <header>
        <div>"Aqui fica o player de audio."</div>
        <ul>
            <li><a href="home.html" id="ajax" data-titulo="Início do meu Site">Home</a></li>
            <li><a href="sobre.html" id="ajax" data-titulo="Sobre mim">Sobre</a></li>
        </ul>
    </header>
    <main id="conteudo">
        <!-- Aqui é onde o conteúdo vai ser carregado. -->
    </main>


</body>

In jQuery do load() like this:

$(document).ready(function(){
            $("a#ajax").on("click", function(e){
                e.preventDefault(); //eliminamos o evento
                var path = $(this).attr("href"); //Pegamos o caminho
                var titulo = $(this).attr('data-titulo'); //pegamos o titulo da página
                document.title = titulo; // Alterar o titulo da página
                window.history.pushState("", titulo, path);   
                $("#conteudo").empty(''); //Limpa para poder colocar o conteúdo.
                $("#conteudo").load(path); //Faz uma requisição http para o servidor.

                return false;
            });
        });

15.08.2014 / 04:50

Release external access on sql server 2014 How do I create a Team Project by branching the code from another Team Project in TFS 2013?

score 2 · Accepted Answer

Simply put the element you want to load after the separate URL with a space, as in ex. below:

$(".ajax").on("click", function(e){
    e.preventDefault(); //eliminamos o evento
    var path = $(this).attr("href"); //Pegamos o caminho
    var titulo = $(this).data('titulo'); //pegamos o titulo da página
    document.title = titulo; // Alterar o titulo da página
    window.history.pushState("", titulo, path);   
    $("main").load(path + ' main', function () {
        $("main").html($(this).children('main').html());
    }); //Faz uma requisição http para o servidor.
});

Note that loading an element into itself loads the nesting into one another:

<main>
<main>
conteúdo...
</main>
</main>

which can cause display problems or other unwanted bugs. So I had to do that function in the complete load, to undo the elements.

Another solution I usually use to facilitate this is to create a container / receiver element (which should be on every page) like this:

HTML:

<div id="ajax-container">
<main>
conteúdo...
</main>
</div>

jquery:

...
$("#ajax-container").load(path + ' main');
...