Refresh-free browsing

Asked

Viewed 911 times

-1

the problem and when editing "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 is that it has since error:0 when navigating... 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

2 answers

3

the property window.location returns information about the current url

you can capture the calling hash window.location.hash

execute this command on your browser console.

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

  • humm very good ta catching even the values... more now how do I navigate... open the desired page inside the <div id="start"></div>

  • 2

    Take a look at handlebars, underscore for template.

  • 1

    So @Willian, then you are already falling into a slightly different approach, it seems that you really want a Single-Page Application, for this, I suggest you use a front-end framework focused on this, I work with the Backbonejs but there are also other options like Angularjs or the Emberjs which are other good options...

  • @Heyman, so which class makes this request for another page in the blackbonejs seems to be the easiest hehe this angular and violent too... hehe, plus what class to min gives a look how it works

  • @Eyman ain’t so easy

  • yes, at first it’s not so easy, but after you get the concept and with a little practice, you’ll see that it’s much better... looks at this site here I started with him, it’s very didactic! try to understand the concept, application within the browser, today we are in a development phase where we have two applications, back-end app and front-end app

Show 1 more comment

2


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

Change 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 the success ajax:

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

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

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

<?php
echo 'ok';
exit;

  • I could use a . load() instead of $.ajax() would not be better?

  • to be quite honest, I would have to look at the documentation to tell the exact difference...

  • then with a problem like: akele code with $.ajax({}) gives a load on a page then I try to use a link from that page that was loaded... <a class="Tc" href="#canceled-'. $result->id. '" data-url="query_detail.php? password='. $result->id. '" data-info="GET" style="text-Decoration: None;">'. $result->data. '<a/> just doesn’t work

  • @Willian, my good, here we do not function as a support forum. If you have a new question, make a. I already give an important tip: your question has to be well explained and considered useful to other people as well. Please very Much, check out the guide [Ask].

Browser other questions tagged javascript jquery ajax

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