Ajax opening content without refresh

Asked

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.

php html ajax
  • 1

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

  • It does not from error, just does not load the page I want.

  • 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.

  • Any error appears in the browser console?

3 answers

1

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

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

change to

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

0

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">.

0

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>

  • You said #content, but the question is correct #content, what changed was #inline: http://answall.com/a/66464/3635

Browser other questions tagged php html ajax

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