Ajax opening content without refresh

Question

Ajax opening content without refresh

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

-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 to open the content of the pages in my tag with id #conteudo , but it is not working.

php html ajax

asked by anonymous 28.05.2015 / 20:01

3 answers

Search by age in field of date of birth How to select all the columns of a row?

score 1 · Answer 1

1

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

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

switch to

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

28.05.2015 / 20:13

score 0 · Answer 2

In fact, the error was quite small, in seeing put % with%, or should have put #conteudo , because. (dot) is a selector for class and # for id, then the correct one 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>

score 0 · Answer 3

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

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 change .load by .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 does not 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 answer, I noticed that he used $("#inline a") when the correct one would be $(".inline a") , as it represents this <ul class="inline"> element.