Navigation without refresh

Question

Navigation without refresh

Navigation

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

-1

the problem and when I edit "in the browser url bar" I have to press 2x enter to load the desired page ... and it should only be with 1x enter

the other problem and that there is error: 0 when browsing ... I do not understand why ...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
  </head>

  <body>
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li><a class="tc" href="#home" data-url="a_teste.php" data-info="GET">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

     <div id="conteudo">
      <!-- /carrega as informaçoes -->
     </div>

    <!-- Placed at the end of the document so the pages load faster -->
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script>
$(document).ready(function(){
// faz load via url
var hash = window.location.hash;
var hashman = $(".tc[href='"+hash+"']").attr("data-url");
var hashman_tipo = $(".tc[href='"+hash+"']").attr("data-info");

if (typeof hashman !== "undefined") {
loading(1);
navegacao(hashman,hashman_tipo);
}else {
loading(1);
navegacao("a_teste.php","GET");
}
// faz load via link
    $(".tc").click(function(){
    $("#conteudo").fadeOut('slow',function(){ $("#conteudo").fadeIn(loading(1)); } )
    var link = $(this).attr("data-url");
    var tipo = $(this).attr("data-info");
        navegacao(link,tipo);
    });

function navegacao(link,tipo){
        $.ajax({
           url : link,
           dataType : "HTML", // Pode ser SCRIPT se o retorno for somente comandos JavaScript
           type : tipo, // Pode ser get ou post..
           success : function(conteudo){
                $("#conteudo").hide().html(conteudo).fadeIn('slow');
           },
           error : function(a,b,c){
                 alert("Erro : "+a["status"]+" "+c);
           }
        });
}

function loading(status) {
    if ( status == 1 )
        $('#conteudo').html("<div id='loading'><br><br><center><img src='assets/img/load.gif' border='0' /></center></div>");
    else
        $('#loading').fadeOut();
}

});


    </script>
  </body>
</html>

javascript jquery ajax

asked by anonymous 21.10.2014 / 16:24

2 answers

3

property window.location returns information about the current url

You can capture the hash by calling window.location.hash

run this command on your browser's console.

var hash = window.location.hash;
console.log(hash.split('/'));

21.10.2014 / 17:02

What is the difference between c and c ++ [duplicate] Problem uploading files to server

score 2 · Accepted Answer

Your confusion is $(".tc").click(function(){ AQUI }); .

Switch to:

$(".tc").click(function(){    
    $("#conteudo").fadeOut('slow',function(){ 
        loading(1);
        var link = $(this).attr("data-url");
        var tipo = $(this).attr("data-info");
        navegacao(link,tipo);
    });        
});

And in% AJAX%:

$("#conteudo").html(conteudo).fadeIn('slow');

Tip: Instead of using attribute success , use date $(this).attr('data-url') .

I tested it with this HTML and using a basic PHP for AJAX:

<?php
echo 'ok';
exit;