jQuery how to load a link in a div without refreshing the page?

Asked

Viewed 1,216 times

1

I’m doing a job for the college where the teacher asked us to use Links without refresh in it, he taught us to do but it’s not working in my case.

When I change the pages in the menu, the content should be loaded by modifying only the div with id = conteudo (remaining the header along with the menu and footer). But this is not happening... The div updates but the header, menu and footer disappear.

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".menu a").click(function(e){
            e.preventDefault();
            var href =$(this).attr('href');
            $(".conteudo")load(href + ".conteudo");
        });
    });    
</script>

HTML

<body>
    <div class="base"><!-- inicio div base -->
        <div><img id="logo" src="imagens/img/logo.jpg">
        </div>
    <div class="menu"><!-- inicio menu -->
    <ul id="menu">
                <li><a href="inicio.html">Pagina Inicial</a></li>
        <li><a>O Clube +</a>
                    <ul class="submenu">
                        <li><a href="historia.html">História</a></li>
                        <li><a href="diretoria.html">Diretoria</a></li>
                    </ul></li>
                    <li><a href="fotos.html">Fotos</a></li>
        <li><a href="#">Contato</a></li>
        <li><a href="#">Eventos</a></li>
    </ul>
    </div> <!-- Fim da div menu -->
    <div id="conteudo">
    <figure>
        <span class="trs next"></span>
        <span class="trs prev"></span>
        <div id="slider">
            <a href="#" class="trs"><img src="imagens/slideshow/panoramica.jpg" alt="Vista Panorâmica"></a>
            <a href="#" class="trs"><img src="imagens/slideshow/piscina.jpg" alt="Piscina"></a>
            <a href="#" class="trs"><img src="imagens/slideshow/clube.jpg" alt="Clube"></a>
        </div>
        <figcaption></figcaption>                 
    </figure>
    <div class="reservas">
        <h2>Titulos temporário e Reservas</h2>
        <p>Interessados a títulos temporários entrar em contato com a diretoria, ou pelo fone (49) 99126-8111. </p>
        <p>Reservas do clube para casamentos e festas particulares entrar em contado com Jackson Berti (Kinho) pelo fone (49) 99135-5523.</p>
    </div>
    <div class="informacoes">
        <div id="info">
        <div class="end">
            <h2>Iporã Piscina Clube</h2>
            <p>Rua Anildo Heissler, s/n<br>
                Iporã do Oeste - Santa Catarina<br>
            cep: 89899-000 / fone: (49) 3634-1155</p>
        </div>
        <div class="face">
            <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fiporapiscinaclube%2F&tabs=timeline&width=300&height=120&small_header=false&adapt_container_width=false&hide_cover=false&show_facepile=false&appId" 
                    width="300" height="130" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
        </div>
            <div class="avaliacao">
               <FORM ACTION="mailto:[email protected]" METHOD="POST" ENCTYPE="text/plain" NAME="cadastro">
                   <input type=hidden name="destino" value="[email protected]">
                <h3>Avaliação do Clube</h3>
                Nome Completo:<INPUT TYPE="TEXT" NAME="nome" SIZE="35"><br>
                Seu e-mail:<INPUT TYPE="TEXT" NAME="email" SIZE="35"><br>
                Reclamações, Melhorias e Elogios: 
                <TEXTAREA NAME="observacoes" ROWS="5" COLS="37"></TEXTAREA><br>                      <INPUT TYPE="SUBMIT" VALUE="Enviar os dados"  onClick="return validar();">
                  <INPUT TYPE="RESET" VALUE="Limpar os dados">
               </form>
            </div>
        </div>
    </div>

        <!-- inicio rodape  -->
        <div class="rodape">
            <hr>
            <p class="direitos">© Iporã Piscina Clube 2016 | Todos os Direitos Reservados.</p> 

        </div>
    </div>                 
    </div><!-- fim da div base-->
</body>
javascript jquery
  • 2

    $(".conteudo")load(href + ".conteudo");, wouldn’t be something like $("#conteudo").load(href);?

  • @Anthonyaccioly altered and did not solve

2 answers

1

There’s a typo here

$(".conteudo")load(href + ".conteudo");

Missed a point after the $(".conteudo")

this line has to stay like this:

$(".conteudo").load(href + ".conteudo");

  • If it will work I’m not sure because I did not have the other screens, but the only error in Javascript was this, preventing the wheel Function.

1

Your script can delete the ". content" from the end of the load and should include access to div through "#" instead of "." since it is "id" and not "class":

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".menu a").click(function(e){
            e.preventDefault();
            var href =$(this).attr('href');
            $("#conteudo")load(href); //eliminar ".conteudo" e trocar ".conteudo" por "#conteudo"
        });
    });    
</script>

Regarding your footer, the div of it is within the content currently, just close the contents before:

...
    </div><!-- fim da div conteudo -->
    <!-- inicio rodape  -->
    <div class="rodape">
        <hr>
        <p class="direitos">© Iporã Piscina Clube 2016 | Todos os Direitos Reservados.</p> 
    </div><!-- fim da div rodape-->
</div><!-- fim da div base-->

Browser other questions tagged javascript jquery

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