Ajax Handler

CabrestoSexy

Power Member
Boas pessoal :)

É o seguinte, eu vi um site que gostei imenso da forma de como ele troca de pagina sem fazer refresh
Investiguei um bocado e descobri que penso que seja por uma função chamada Ajax Handler,

O site em questão é este: http://ataria3.net

Abrir o codigo fonte dele, e reparei que lá no link que aponta para o script panama.js e estava la o script :P

O Script em questão penso que seja este
Código:
 var last_page = "";
     var pageurl = "";
     var history_back_page = "";
     var current_pid = 0;
     $(document).ready(function () {
         $(function(){
            $(document).on("click", "a[rel='panama']", function(event) {
                //e.preventDefault();
                /* 
                if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
                if commented, html5 nonsupported browers will reload the page to the specified link.
                */
             
                //get the link location that was clicked
                if(pageurl != "") {
                    history_back_page = pageurl;
                }
                pageurl = $(this).attr('href');
                loadPage(pageurl,1);
                return false;
            });
        });
     });

E eu gostava que me ajudassem a saber como é que ele está a funcionar :D

Mais abaixo la quase no fim do panama.js eu reparei que tem lá um script tambem que é capaz de ter a ver com esse de cima...
Que é este
Código:
function loadPage(page,pushit) {
        pageurl = page
        if(last_page!=pageurl) {
            last_page = pageurl;
            loading(true);
            $(".loadingbox_extended").fadeIn(150);
            //to get the ajax content and display in div with id 'content'
            $("#js_content").slideUp(700,function() {
                var request = $.ajax({
                    url: "ajax.php",
                    type: "GET",
                    cache: false,
                    data: "method=page&"+pageurl.replace('?','').replace('/',''),
                    dataType: "html"
                });
                request.done(function( msg ) {
                    $(".loadingbox_extended").fadeOut(150);
                    $( "#js_content" ).html( msg ,function() { 
                     
                    });
                    $("#js_content").slideDown(120,function() {loading(false);});
                });
                request.fail(function( jqXHR, textStatus ) {
                    $(".loadingbox_extended").fadeOut(150);
                    $( "#js_content" ).html("&nbsp;<h2>Die Seite ist gerade nicht erreichbar</h2><br><br>");
                    $("#js_content").slideDown(120,function() {loading(false);});
                });
            });
        }
        if(pushit == 1) {
            historyBool = false;
            //to change the browser URL to 'pageurl'
            //window.history.pushState({path:pageurl},'',pageurl); 
            if(changeHash) {
                History.pushState(null,'Ataria3',pageurl);
            }
            //  History.pushState(null, Title, urlPath);
            historyBool = true;
        }
    }

Agora... quanto a esse segundo script, eu penso que tenho um "igual" mas feito em php que é este
PHP:
      $includeDir = ".".DIRECTORY_SEPARATOR."pages".DIRECTORY_SEPARATOR;
      $includeDefault = $includeDir."home.php";
   
      if(isset($_GET['s']) && !empty($_GET['s']))
      {
   
        $_GET['s'] = str_replace("\0", '', $_GET['s']);
        $includeFile = basename(realpath($includeDir.$_GET['s'].".php"));
        $includePath = $includeDir.$includeFile;
     
        if(!empty($includeFile) && file_exists($includePath))
        {
          include($includePath);
        }
        else
        {
        include($includeDefault);
        }

      }
      else
      {
        include($includeDefault);
      }

Será que dá para darem ai um empurrãozinho ? :D

Ou então se for muito complicado aproveitar esse codigo, se me puderem ajudar a criar um ajax hander do 0 assim com o mesmo efeito desse site talvez menos complexo que esse tambem era muito fixe :)
Se quiserem depois posso dar uma recompensazita :P
 
Última edição:
Aff Sharkz nao percebeste o que eu quero xD

Tipo vai ao http://ataria3.net e carrega nos links do menu.
Vais reparar que ele carrega as paginas tipo de registo, da home, da team, tudo sem fazer refresh ao navegador, carrega elas por javascript/ajax u_u

É isso que eu quero <.<
 
@CabrestoSexy o que o @ByMySlf te disse é o que tu queres, porque o plugin que ele te aconselhou é um plugin que te permite facilmente fazer aquilo que queres sem teres que reinventar a roda percebes, isto é, o plugin que ele te aconselhou permite fazer o que queres sem teres que criar tudo de raiz (alterar o dom de um documento através de ajax)
 
@CabrestoSexy o que o @ByMySlf te disse é o que tu queres, porque o plugin que ele te aconselhou é um plugin que te permite facilmente fazer aquilo que queres sem teres que reinventar a roda percebes, isto é, o plugin que ele te aconselhou permite fazer o que queres sem teres que criar tudo de raiz (alterar o dom de um documento através de ajax)

Pois eu nao tinha reparado no que ele tinha postado xDD
Ele postou praticamente ao mesmo tempo que eu, e so vim agora aqui xD

Vou analisar o que ele mandou, e ver se percebo algo u_u
 
Pois eu nao tinha reparado no que ele tinha postado xDD
Ele postou praticamente ao mesmo tempo que eu, e so vim agora aqui xD

Vou analisar o que ele mandou, e ver se percebo algo u_u
Não tem muito que saber, basta seguir as instruções e está feito, é o bem de utilizar um plugin. Também se precisares de ajuda basta criares um novo post :D
 
Mas olha uma cena...

http://pjax.herokuapp.com/ esta é a pagina para testar digamos como é que o pjax funciona ne ? Tipo basicamente uma demo certo ?
É que se for, nao é bem isto que eu quero :c

Isto é basicamente pushState que é tipo, sim carrega o conteudo, vá digamos via ajax, mas da reload na pagina á mesma <.<

Mesmo assim vou explorar bah xD
 
O demo parece estar com problemas, porém, o plug-in faz o que pretendes. Tens aqui um demo a funcionar.

Se pretenderes usar pjax mas sem a dependência do jQuery, procura por pjax-standalone.
 
Nunca usei esse pjax, mas parece-me uma excelente solução.

De qualquer maneira, deixo aqui o que uso em casos semelhantes (no caso, até era para adicionar conteúdo/artigos "auto" sem refresh, que está agora na moda, tipo os tumblr's etc., mas modifiquei para algo mais parecido com o que queres presumo):

Código:
$("#menu-x").click(function() { // ao clicar no menu/link com o ID menu-x
   $.ajax({
    type:"post",
    url:"menu.php?pagina=menux", // a pagina que queres ir buscar, pode ser um HTML simples acho
    beforeSend:function(){
     $(".conteudo").html( "<img src='loading.gif' />" ); // uma imagem/gif de loading para o visitante saber que a pagina esta a carregar (opcional)
    },
    complete:function(){
     $(".conteudo").html( "" );
    },
    success:function(result){
     $(".conteudo").html( result ); // coloca o html que veio do script php em cima (neste caso) dentro da div .conteudo
    }
   });
});

Não sei se é a melhor solução, mas é por aqui que costumo ir (não testei este código atenção).
 
O demo parece estar com problemas, porém, o plug-in faz o que pretendes. Tens aqui um demo a funcionar.

Se pretenderes usar pjax mas sem a dependência do jQuery, procura por pjax-standalone.

Yh esse exemplo está funcional...

E o exemplo do mlima tambem funciona mais ou menos, ele faz a request, processa a request, entrega a request , mas depois a pagina da um reload e o site desaparece e fica so o fundo do site wtf :|
Mas acho que isto é um problema do meu site talvez.... Ja o tive uma vez, e tambem foi por causa de funçoes ajax.... (Depois ponho aqui um print)

Contudo nessa porra do pjax nao consigo a funcionar de maneira nenhuma :(

Eu fiz tudo como ta nesse exemplo.

Coloquei a data-pjax="#main" numa tag de link minha, criei a div com o id="main"
Chamei o javascript
$(function(){
$('a[data-pjax]').pjax()
});

Fiz tudo com vi nesse exemplo funcional, mas a mim simples nao funciona -.- ja estou seriamente a entrar em depressao :|

Será que tenho de criar algum ficheiro .json tambem ? :|
 
Só experimentei o pjax uma única vez, há imenso tempo, e sei que estava a funcionar bem. Coloca aqui o teu código para te tentar ajudar.
 
Boas :D

Bah, ja consegui fazer tudo como eu queria por mim mesmo, descobri o erro que se estava a suceder, e consegui por isto a carregar por Ajax exatamente como eu queria...
Mas por causa da complexidade do meu site, eu tinha de mudar um montes de cenas para o site ficar 100% a trabalhar correto xD

E só para ter 5 ou 6 links a carregar bonitinho via Ajax não vale a pena, pelo trabalho que iria ter...

Talvez utilize isto num site de menos complexidade, ou noutro futuro trabalho meu :D

Contudo nao quero deixar de agradecer a todos os que me tentaram ajudar :)
Se há coisa que eu nao sou é mal agradecido, por isso obrigado a todos na mesma <3

Cumprimentos
 
Pois, ás vezes (muitas) o problema é mesmo a quantidade de "plugins" javascript/jquery que temos ao mesmo tempo, tenho sempre dificuldades com a "falta" de compatibilidade que isso pode trazer. E às vezes, basta-me mudar de sitio "<scripts>" que tenho, colocar mais acima ou mais abaixo para resolver o problema, mas é sempre na base da tentativa/erro.
 
Pois, ás vezes (muitas) o problema é mesmo a quantidade de "plugins" javascript/jquery que temos ao mesmo tempo, tenho sempre dificuldades com a "falta" de compatibilidade que isso pode trazer. E às vezes, basta-me mudar de sitio "<scripts>" que tenho, colocar mais acima ou mais abaixo para resolver o problema, mas é sempre na base da tentativa/erro.

Nem me digas nada fdz...

Eu tenho por exemplo as vezes

<script type="text/javascript" src="js/jquery.11-0.js"></script>
<script type="text/javascript" src="js/javascript_top.js"></script>
<script type="text/javascript" src="js/exemplo.js"></script>

Mas por exemplo, as vezes se mudar para esta ordem

<script type="text/javascript" src="js/javascript_top.js"></script>
<script type="text/javascript" src="js/exemplo.js"></script>
<script type="text/javascript" src="js/jquery.11-0.js"></script>

Ja tenho cenas no meu site a deixar de funcionar -.-

Até mete nojo xD
 
A ordem com que são carregados os scripts/css é essencial.

Pois tambem ja reparei nisso xD
Por acaso foi algo que eu nunca dei muita importancia xD
Pensei que o importante era estar para lá, que desde que tivesse la, funcionava xDD

Ja agora, alguem me quer dar "dicas" de como é que sei como é que estou a carrega los de maneira ou ordem "correta" ?

Cumprimentos u_u
 
Se um script depende de outro para executar a dependência tem que ser carregada primeiro. Se quiseres algo que te ajude a carregar de forma correcta vê algo como require.js e afins.
 
Última edição:
acho que em última análise deves sempre saber o que usas, e um pouco como funciona, e não atirar scripts só porque viste numa página.
tirando isso, algo simples de perceber é: se um script vai utilizar funções do jquery, provavelmente é melhor carregar primeiro o jquery em si.
 
Back
Topo