-1

o problema e quando edito "na barra de url do navegador" tenho que apertar 2x enter para carregar a pagina desejada... e deveria ser apenas com 1x enter

o outro problema e que tem vez que da erro:0 ao navegar... nao entendo por qual motivo...

<!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>
1

2 Respostas 2

3

a propriedade window.location retorna informações sobre a url atual

você pode capturar a hash chamando window.location.hash

execute no console do seu navegador este comando.

var hash = window.location.hash;
console.log(hash.split('/'));
6
  • humm muito bom ta pegando mesmo os valores... mais agora como faço para navegar... abrir a pagina desejada dentro da <div id="inicio"></div>
    – Willian
    21/10/2014 às 15:24
  • 2
    Da uma olhada em handlebars, underscore para template.
    – Rodrigo
    22/10/2014 às 15:06
  • 1
    Então @Willian, ai você ja esta caindo numa abordagem um pouco diferente, parece que você quer realmente uma Single-Page Application, para isso, eu sugiro que você use um framework de front-end focado nisso, eu trabalho com o Backbonejs mas tambem há outras opções como o AngularJs ou o [Emberjs](emberjs.com/) que são outras boas opções...
    – lleitep3
    22/10/2014 às 17:05
  • @heyman, entao qual a classe que faz essa requisição de outra pagina no blackbonejs parece ser o mais facil hehe esse angular e violento demais... hehe, mais qual a classe pra min da uma olhada como funciona
    – Willian
    22/10/2014 às 17:34
  • @heyman ee nao e tao facil nao hehe
    – Willian
    22/10/2014 às 18:19
2

Sua confusão está $(".tc").click(function(){ AQUI });.

Mude para:

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

E no success do AJAX:

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

Dica: em vez de usar o attribute $(this).attr('data-url'), use o data $(this).data('url').

Testei com este HTML e usando um PHP básico para o AJAX:

<?php
echo 'ok';
exit;
4
  • eu poderia usar um .load() no lugar de $.ajax() nao seria melhor?
    – Willian
    22/10/2014 às 16:20
  • pra ser bem sincero, eu ia ter que olhar na documentação pra dizer a diferença exata...
    – brasofilo
    22/10/2014 às 20:32
  • entao to com um problema tipo: akele codigo com $.ajax({}) da um load em uma pagina ai tento usar um link dessa pagina que foi carregada... <a class="tc" href="#cancelado-'.$resultado->id.'" data-url="query_detalhe.php?senha='.$resultado->id.'" data-info="GET" style="text-decoration: none;">'.$resultado->data.'<a/> so que nao funciona
    – Willian
    22/10/2014 às 23:11
  • @Willian, meu bom, aqui a gente não funciona como um fórum de suporte. Se você tem uma nova pergunta, faça uma. Já adianto uma dica importante: sua pergunta tem que ser bem explicada e ser considerada útil para outras pessoas também. Por favor very much, confira o guia Como perguntar.
    – brasofilo
    22/10/2014 às 23:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .