How to do the . jQuery load only the content inside the <main>?

Question

How to do the . jQuery load only the content inside the <main>?

Asked 11 years, 2 months ago

Viewed 3,680 times

3

How could I make for that function .load instead of loading the contents of <body> only load content inside <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>

2 answers

2

Just place the element you want to load after the separate URL with a space, as in e.g. 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 when loading with the load an element within itself, nesting will occur within each other:

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

which may cause viewing problems or other undesirable bugs.. Then I had to do that function in the complete load, to untangle the elements.

Another solution that I use to facilitate this question is to create a container/receiver element (which should be on all pages) like this:

HTML:

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

jquery:

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

Hello @Jader I was gone all day yesterday. I will test your example. I believe it will work because I think the problem is in this (path) same. D

– Alexandre Lopes

2014/08/16 at 17:42
It worked! Vlw Jader, again solving my problems, rsrs...

– Alexandre Lopes

2014/08/16 at 17:51
See: http://player.esy.es/new/

– Alexandre Lopes

2014/08/16 at 17:52

Browser other questions tagged jquery ajax

You are not signed in. Login or sign up in order to post.

by Alisson Acioli • **5,815** points · Answer 1 · 2014-08-15T02:50:02+00:00

in HTML put:

   <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 the load() thus:

$(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;
            });
        });