Ajax opening content without refresh

Question

Ajax opening content without refresh

Asked 9 years, 7 months ago

Viewed 575 times

-1

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="estilos/estilo_principal.css" />
        <link rel="stylesheet" type="text/css" href="estilos/bootstrap.css" />
        <link rel="shortcut icon" href="imagens/favicon.ico" type="image/x-icon">
        <link rel="stylesheet" type="text/css" href="estilos/bootstrap-responsive.css" />
        <meta name="Description" content="" />
        <meta name="keywords" content="" />
        <script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="scripts/js_principal.js"></script>
        <script type="text/javascript" src="scripts/bootstrap.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#inline a").click(function(e){
                  e.preventDefault();
                  var href = "/paginas/"+$(this).attr('href');
                  $("#conteudo").load(this.href);
                });
            });
        </script>
        <title>Josino Ribeiro - Assessoria e Marketing</title>
    </head>
    <body>
        <div id="p0">
            <div id="p1">
                <header>
                  <div id="header">
                    <img width="121px" height="157px" src="imagens/logo.png" id="imgLogo" />
                  </div>
                  <div id="p101midias">
                            <div class="midias" id="instagram"></div>
                            <div class="midias" id="youtube"></div>
                            <div class="midias" id="twitter"></div>
                            <div class="midias" id="facebook"></div>
                        </div>
                </header>
                <nav>
                  <div id="caixamenu">
                    <ul class="inline">
                      <li class="menuLi"><a href="index.php">Home</a></li>
                      <li class="menuLi"><a href="paginas/josino.php"> Josino Ribeiro</a></li>
                      <li class="menuLi"><a href="#"> Serviços</a></li>
                      <li class="menuLi"><a href="#"> Clientes</a></li>
                      <li class="menuLi"><a href="#"> Contatos</a></li>
                    </ul>
                 </div>
                </nav>
                <div class="row-fluid" id="conteudo">
                      <div class="span6" id="esquerdo"> <img width="323px" height="434px" src="imagens/logo-middle.png" id="imgLogo"></div>
                      <div class="span6" id="direito">
                        <img src="imagens/img_min_1.png" id="min01">
                        <img src="imagens/img_min_2.png" id="min02">
                        <img src="imagens/img_min_3.png" id="min03">
                      </div>

                </div>

                <div id="Rodape1" class="span12">
                  <div id="escrita" class="span12">
                      <p align="left">
                        Josino Ribeiro - Assessoria e Marketing<br>
                        [email protected]<br>
                        (31) 8786 4013  </div>
                      </p>
                  <div id="logo" class="span12">
                    <img src="imagens/logo_ops.png" id="logoOps">
                    <img src="imagens/logo_hot_systems.png" id="logoHot">
                  </div>
                </div>
                  <div id="RodapeC">
                    <div id="Rodape">© Josino Ribeiro Comunicações - Todos os direitos reservados</div>
                  </div> <!-- Fim rodape -->
            </div> <!-- Fim p1 -->
        </div> <!-- Fim p0 -->
    </body>
</html>

I want you to open the contents of the pages in my id tag #conteudo, but it’s not working.

1

And what mistake does it give you? It shouldn’t be just href here: .load(this.href); ?

– Sergio

2015/05/28 at 18:03
It does not from error, just does not load the page I want.

– Renan Rodrigues

2015/05/28 at 18:06
This line is not being used: var href = "/paginas/"+$(this).attr('href'); you can take off and join / at the beginning of each link to ensure that it starts from root. And yes, it puts the website link online for us to see.

– Sergio

2015/05/28 at 18:09
Any error appears in the browser console?

– Guilherme Nascimento

2015/05/28 at 18:11

3 answers

Browser other questions tagged php html ajax

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

by Diego Moreira • **684** points · Answer 1 · 2015-05-28T18:13:24+00:00

In the . load function, you are passing wrong parameter to be loaded

$("#conteudo").load(this.href);

change to

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

by Guilherme Nascimento • **98,651** points · Answer 2 · 2015-05-28T18:17:19+00:00

It is likely that the address generated here var href = "/paginas/"+$(this).attr('href'); is inaccessible or the this.href be the wrong way.

Change this:

var href = "/paginas/"+$(this).attr('href');
$("#conteudo").load(this.href);

For this reason:

var href = "/paginas/"+$(this).attr('href');
$("#conteudo").load(href);

Or switch over .load for .ajax:

First try this (using this.href):

var href = "/paginas/"+$(this).attr('href');
$.ajax(this.href, {
  "cache": false,
  "dataType": "html"
}).done(function(data) {
     $("#conteudo").html(data);
}).fail(function(xhr, status, error) {
     $("#conteudo").html(status + ": " + error);
});

If it doesn’t work try this (using var href):

var href = "/paginas/"+$(this).attr('href');
$.ajax(href, {
  "cache": false,
  "dataType": "html"
}).done(function(data) {
     $("#conteudo").html(data);
}).fail(function(xhr, status, error) {
     $("#conteudo").html(status + ": " + error);
});

After reading the author’s own reply, I noticed that he used $("#inline a") when the right one would be $(".inline a"), as it represents this element <ul class="inline">.

by Renan Rodrigues • **3,709** points · Answer 3 · 2015-05-28T19:33:37+00:00

In fact, the mistake was very small, in seeing to put #conteudo, or should have put .conteudo, because .(dot) is a selector for class and # for id, so the correct is:

<script type="text/javascript">
            $(document).ready(function(){
                $(".inline a").click(function(e){
                  e.preventDefault();
                  var href = $(this).attr('href');
                  $("#conteudo").load(this.href);
                });
            });
        </script>