Ajuda ao carregar na paginação a div actualiza sem fazer refresh

AndreLC · April 2, 2012 at 04:21 PM

Boa tarde a todos,

Tenho no meu index.php uma listagem com três imóveis iniciais e estou a fazer para que quando o utilizador carregue na paginação o div que contém essa listagem (ajaxContent) actualize sem fazer refresh à página e até aqui tudo bem.

Segue a imagem da paginação para melhor compreensão:

http://img195.imageshack.us/img195/3083/pagx.jpg

A minha questão é que se carregar na "Primeira" e na "Última" e nos números das páginas está a actualizar como suposto, mas se carregar em "Anterior" ou "Seguinte" ele só executa uma vez, ou seja só anda para a frente ou para trás uma vez, se fizer seguinte novamente fica igual. Por exemplo, estou na página 1, faço seguinte e vai para a página 2 e se fizer seguinte novamente já não avança e o mesmo se aplica para o anterior.

Outra coisa é o facto de não marcar a página onde estou, o que anteriormente fazia. Por exemplo, se estou na página 1 e faço seguinte ele deveria marcar a página 2 e não a 1.

Porque é que isto está a acontecer e como resolvo?

O código que tenho jQuery:

<script type="text/javascript">

    $(document).ready(function(){        
        $("a#ajax").click(function( e ){        //função que será chamada quando o link da paginação for clicado
            e.preventDefault();                 //evitando a ação default
            var href = $( this ).attr('href');  //carregando a url que está no href do link na div ajaxContent
            $("#ajaxContent").load( href +" #ajaxContent");  
		//alert( href );
        });  
    });

</script>

e o código php da paginação:

<div id="pesquisa_page_i">
<?php


      $sqlTotal   = "SELECT id FROM imoveis WHERE (estado=1 OR estado=3)";
      //Executa o SQL
      $qrTotal    = mysql_query($sqlTotal) or die(mysql_error());
      //Total de Registos na tabela
      $numTotal   = mysql_num_rows($qrTotal);
      //Calculo do Total de páginas a serem exibidas
      $totalPagina= ceil($numTotal/$quantidade);
      //Defini o valor máximo a ser exibido na página tanto para a direita como para a esquerda
      $exibir = 5;
      //Pagina Anterior - Caso o valor seja zero, por padrão ficará o valor 1
      $anterior  = (($pagina - 1) == 0) ? 1 : $pagina - 1;
      //Pagina Seguinte - Caso a pagina +1 for maior ou igual ao total, terá o valor do total 
  //caso contrario fica com o valor da página + 1
  $posterior = (($pagina + 1) >= $totalPagina) ? $totalPagina : $pagina + 1;
      //Primeira Página e Anterior
    
       echo '<a id="ajax" href="?pagina=1">Primeira</a> | ';
       echo "<a id='ajax' href=\"?pagina=$anterior\">Anterior</a> | ";
       
      //Exibe (expande) as páginas à esquerda
  
       for($i = $pagina-$exibir; $i <= $pagina-1; $i++){
           if($i > 0)
            echo '<a id="ajax" href="?pagina='.$i.'"> '.$i.' </a>';
       }
       //Pagina actual
   
       echo '<a id="ajax" href="?pagina='.$pagina.'"><strong><font color=#BC202C>'.$pagina.'</font></strong></a>';
       //Exibe (expande) as páginas à direita
       
       for($i = $pagina+1; $i < $pagina+$exibir; $i++){
           if($i <= $totalPagina)
            echo '<a id="ajax" href="?pagina='.$i.'"> '.$i.' </a>';
       }
      //Proxima e Ultima Pagina
      echo " | <a id='ajax' href=\"?pagina=$posterior\">Seguinte</a> | ";
      echo "  <a id='ajax' href=\"?pagina=$totalPagina\">Última</a>";

?>
</div>

Obrigado pela ajuda.

Com os melhores cumpriementos,

AndreLC

AndreLC · April 3, 2012 at 01:27 PM

Tanta volta e não estou a conseguir colocar isto como expus nas minhas dúvidas no post anterior.

Já alguém passou pelo mesmo e sabe como resolvo? Como esta parte é no index preciso que isto trabalhe com alguma urgência.

Desde já, obrigado.

HappyHippyHippo · April 3, 2012 at 06:23 PM

1º : tens os id's dos links da paginação todos iguais a "ajax"

depois de corrigir isso, pensa assim (faz os ajustes necessários) :

<script type="text/javascript">
    $(document).ready(function(){        
        $("a.ajaxPagging").click(function( e ){ // assumindo a altração de id="ajax" para class="ajaxPagging"
            e.preventDefault();

           // supondo que atribuis o id="ajaxPaggingPrev" ao link anterior
           // supondo que atribuis o id="ajaxPaggingNext" ao link seguinte
           // supondo que atribuis o id="ajaxPaggingLast" ao link ultimo
           // usar um attributo "não html" page para guardar a página a que os links ".ajaxPagging" deveram saltar

           var link = $(this);
            var page = parseInt($(this).attr("page"));
            var href = link.attr('href')+"?page="+page;

            $("#ajaxContent").load( href +" #ajaxContent", function() {
                if (page > 1)
                    $("#ajaxPaggingPrev").attr("page") = page-1;
                else
                    $("#ajaxPaggingPrev").attr("page") = 0;

                if (page < parseInt($("#ajaxPaggingLast").attr("page")))
                    $("#ajaxPaggingPrev").attr("page") = page-1;
                else
                    $("#ajaxPaggingPrev").attr("page") = 0;
            });
        });  
    });
</script>

AndreLC · April 3, 2012 at 07:57 PM

Sim, tinha todos iguais a ajax para identificar que eram aqueles links que queria afectar no id="ajaxcontent".

Não sei se percebi mais ou menos a ideia, mas fica tudo à mesma com a class="ajaxPagging"? E o que coloco nos índices, actuais onde tenho a variável $i ? Pois o atributo "não html" não está a guardar e não está a "saltar" de página em página...

O anterior e o seguinte continua só a andar uma vez, não anda mais para além disso e não mexe na numeração, não actualiza. Eu coloquei assim:

<script type="text/javascript">
    $(document).ready(function(){        
        $("a.ajaxPagging").click(function( e ){ // assumindo a alteração de id="ajax" para class="ajaxPagging"
            e.preventDefault();

           // supondo que atribuis o id="ajaxPaggingPrev" ao link anterior
           // supondo que atribuis o id="ajaxPaggingNext" ao link seguinte
           // supondo que atribuis o id="ajaxPaggingLast" ao link ultimo
           // usar um attributo "não html" pagina para guardar a página a que os links ".ajaxPagging" deveram saltar

           var link = $(this);
            var pagina = parseInt($(this).attr("pagina"));
            var href = link.attr('href')+"?pagina="+pagina;

            $("#ajaxContent").load( href +" #ajaxContent", function() {
                if (pagina > 1)
                    $("#ajaxPaggingPrev").attr("pagina") = pagina-1;
                else
                    $("#ajaxPaggingPrev").attr("pagina") = 0;

                if (pagina < parseInt($("#ajaxPaggingLast").attr("pagina")))
                    $("#ajaxPaggingPrev").attr("pagina") = pagina-1;
                else
                    $("#ajaxPaggingPrev").attr("pagina") = 0;
            });
        });  
    });
</script>

<?php


      $sqlTotal   = "SELECT id FROM imoveis WHERE (estado=1 OR estado=3)";
      //Executa o SQL
      $qrTotal    = mysql_query($sqlTotal) or die(mysql_error());
      //Total de Registos na tabela
      $numTotal   = mysql_num_rows($qrTotal);
      //Calculo do Total de páginas a serem exibidas
      $totalPagina= ceil($numTotal/$quantidade);
      //Defini o valor máximo a ser exibido na página tanto para a direita como para a esquerda
      $exibir = 5;
      //Pagina Anterior - Caso o valor seja zero, por padrão ficará o valor 1
      $anterior  = (($pagina - 1) == 0) ? 1 : $pagina - 1;
      //Pagina Seguinte - Caso a pagina +1 for maior ou igual ao total, terá o valor do total 
  //caso contrario fica com o valor da página + 1
  $posterior = (($pagina + 1) >= $totalPagina) ? $totalPagina : $pagina + 1;
      //Primeira Página e Anterior
    
       echo '<a class="ajaxPagging" href="?pagina=1">Primeira</a> | ';
       echo "<a class='ajaxPagging' id='ajaxPaggingPrev' href=\"?pagina=$anterior\">Anterior</a> | ";
       
      //Exibe (expande) as páginas à esquerda
  
       for($i = $pagina-$exibir; $i <= $pagina-1; $i++){
           if($i > 0)
            echo '<a class="ajaxPagging" href="?pagina='.$i.'"> '.$i.' </a>';
       }
       //Pagina actual
   
       echo '<a class="ajaxPagging" href="?pagina='.$pagina.'"><strong><font color=#BC202C>'.$pagina.'</font></strong></a>';
       //Exibe (expande) as páginas à direita
       
       for($i = $pagina+1; $i < $pagina+$exibir; $i++){
           if($i <= $totalPagina)
            echo '<a class="ajaxPagging" href="?pagina='.$i.'"> '.$i.' </a>';
       }
      //Proxima e Ultima Pagina
      echo " | <a class='ajaxPagging' id='ajaxPaggingNext' href=\"?pagina=$posterior\">Seguinte</a> | ";
      echo "  <a class='ajaxPagging' id='ajaxPaggingLast' href=\"?pagina=$totalPagina\" >Última</a>";

?>

Devo estar a fazer algo mal...

Obrigado pela ajuda HappyHippyHippo.

AndreLC · April 4, 2012 at 10:40 AM

Que falta aqui?

Estou com a cabeça à roda com isto.

Obrigado pela ajuda.

HappyHippyHippo · April 4, 2012 at 11:37 AM

usar um attributo "não html" pagina para guardar a página a que os links ".ajaxPagging" deveram saltar

AndreLC · April 4, 2012 at 11:55 AM

Como assim?

Desculpa não estou a perceber. Podes exemplificar, por favor?

Obrigado.

HappyHippyHippo · April 4, 2012 at 01:43 PM

echo '<a class="ajaxPagging" href="?pagina=1" pagina="0">Primeira</a> | ';
echo "<a class='ajaxPagging' id='ajaxPaggingPrev' href=\"?pagina=$anterior\" pagina="$anterior">Anterior</a> | ";

AndreLC · April 4, 2012 at 01:54 PM

Ainda sem sucesso.

O anterior e o seguinte só andam uma vez, a partir daí param. E não "salta" de página em página nem marca mas penso que falta colocar algo no jQuery com css não é? E anteriormente se estivesse na página 5 ele abria o leque de páginas até 8 e agora não está a fazer isso, parece que está estático. Tenho assim:

<?php


      $sqlTotal   = "SELECT id FROM imoveis WHERE (estado=1 OR estado=3)";
      //Executa o SQL
      $qrTotal    = mysql_query($sqlTotal) or die(mysql_error());
      //Total de Registos na tabela
      $numTotal   = mysql_num_rows($qrTotal);
      //Calculo do Total de páginas a serem exibidas
      $totalPagina= ceil($numTotal/$quantidade);
      //Defini o valor máximo a ser exibido na página tanto para a direita como para a esquerda
      $exibir = 5;
      //Pagina Anterior - Caso o valor seja zero, por padrão ficará o valor 1
      $anterior  = (($pagina - 1) == 0) ? 1 : $pagina - 1;
      //Pagina Seguinte - Caso a pagina +1 for maior ou igual ao total, terá o valor do total
          //caso contrario fica com o valor da página + 1
          $posterior = (($pagina + 1) >= $totalPagina) ? $totalPagina : $pagina + 1;
      //Primeira Página e Anterior
   
      echo '<a class="ajaxPagging" href="?pagina=1" pagina="0">Primeira</a> | ';
  echo "<a class='ajaxPagging' id='ajaxPaggingPrev' href=\"?pagina=$anterior\" pagina='$anterior'>Anterior</a> | ";
       
      //Exibe (expande) as páginas à esquerda
         
       for($i = $pagina-$exibir; $i <= $pagina-1; $i++){
           if($i > 0)
            echo '<a class="ajaxPagging" href="?pagina='.$i.'" pagina="'.$i.'"> '.$i.' </a>';
       }
       //Pagina actual
           
       echo '<a class="ajaxPagging" href="?pagina='.$pagina.'" pagina="'.$pagina.'"><strong><font color=#BC202C>'.$pagina.'</font></strong></a>';
       //Exibe (expande) as páginas à direita
       
       for($i = $pagina+1; $i < $pagina+$exibir; $i++){
           if($i <= $totalPagina)
            echo '<a class="ajaxPagging" href="?pagina='.$i.'"> '.$i.' </a>';
       }
      //Proxima e Ultima Pagina
      echo " | <a class='ajaxPagging' id='ajaxPaggingNext' href=\"?pagina=$posterior\" pagina='$posterior'>Seguinte</a> | ";
      echo "  <a class='ajaxPagging' id='ajaxPaggingLast' href=\"?pagina=$totalPagina\" pagina='$totalPagina'>Última</a>";
               
?>

Obrigado pela ajuda HappyHippyHippo.

HappyHippyHippo · April 4, 2012 at 01:58 PM

epa .. asim é dificil e não tenho muito tempo para tratar disto ... tens isso em algum URL ??

AndreLC · April 4, 2012 at 02:46 PM

Não tinha, mas coloquei agora porque preciso mesmo de ajuda nisto. Tenho que ter isto pronto até amanhã, devido ao facto de na Sexta ser feriado.

Está aqui: http://andre-lc.webuda.com/

Quando tiveres tempo, peço que dês uma vista de olhos, por favor.

Muito obrigado pela ajuda.

HappyHippyHippo · April 4, 2012 at 03:00 PM

corrigi o código que fiz post ...

    $(document).ready(function(){        
        $("a.ajaxPagging").click(function( e ){ // assumindo a altração de id="ajax" para class="ajaxPagging"
            e.preventDefault();

           // supondo que atribuis o id="ajaxPaggingPrev" ao link anterior
           // supondo que atribuis o id="ajaxPaggingNext" ao link seguinte
           // supondo que atribuis o id="ajaxPaggingLast" ao link ultimo
           // usar um attributo "não html" page para guardar a página a que os links ".ajaxPagging" deveram saltar

           var link = $(this);
            var page = parseInt($(this).attr("pagina"));
            var href = link.attr('href')+"?pagina="+page;

            $("#ajaxContent").load( href +" #ajaxContent", function() {
                if (page > 1)
                    $("#ajaxPaggingPrev").attr("pagina") = page-1;
                else
                    $("#ajaxPaggingPrev").attr("pagina") = 0;

                if (page < parseInt($("#ajaxPaggingLast").attr("page")))
                    $("#ajaxPaggingNext").attr("pagina") = page+1;
                else
                    $("#ajaxPaggingNext").attr("pagina") = parseInt($("#ajaxPaggingLast").attr("page");
            });
        });  
    });

se lesses o código que fiz post verias que o atributo href dos tags a deveriam ser somente : "?"

se queres por a lista de números a alterar terás de tar código adicional ...

AndreLC · April 4, 2012 at 03:08 PM

Como assim?

Aqui não colocaste só o ? ou estou a ver mal?

echo '<a class="ajaxPagging" href="?pagina=1" pagina="0">Primeira</a> | ';
echo "<a class='ajaxPagging' id='ajaxPaggingPrev' href=\"?pagina=$anterior\" pagina="$anterior">Anterior</a> | ";

Não estou a perceber.

HappyHippyHippo · April 4, 2012 at 03:19 PM

problema de copy-paste

echo '<a class="ajaxPagging" href="?" pagina="0">Primeira</a> | ';
echo "<a class='ajaxPagging' id='ajaxPaggingPrev' href=\"?\" pagina="$anterior">Anterior</a> | ";

AndreLC · April 4, 2012 at 03:29 PM

Já coloquei para os restantes e agora perdeu o efeito, está a fazer refresh à página que é o que não pretendo.

Ali no jQuery há uns .attr("page"), não deveria ser "pagina"? No entanto alterei e está na mesma...

E também penso que faltava fechar um ) no final e coloquei assim:

 $("#ajaxPaggingNext").attr("pagina") = parseInt($("#ajaxPaggingLast").attr("pagina"));

E com o Web Console no FF diz: "invalid assignment left-hand side" na linha:

$("#ajaxPaggingPrev").attr("pagina") = page-1;

Que se passará, agora?

Obrigado.

HappyHippyHippo · April 4, 2012 at 03:57 PM

a culpa é minha ... trabalhar e responder a isto é como fazer malabarismo ...

    $(document).ready(function(){        
        $("a.ajaxPagging").click(function( e ){ // assumindo a altração de id="ajax" para class="ajaxPagging"
            e.preventDefault();

           // supondo que atribuis o id="ajaxPaggingPrev" ao link anterior
           // supondo que atribuis o id="ajaxPaggingNext" ao link seguinte
           // supondo que atribuis o id="ajaxPaggingLast" ao link ultimo
           // usar um attributo "não html" page para guardar a página a que os links ".ajaxPagging" deveram saltar

           var link = $(this);
            var page = parseInt($(this).attr("pagina"));
            var href = link.attr('href')+"?pagina="+page;

            $("#ajaxContent").load( href +" #ajaxContent", function() {
                if (page > 1)
                    $("#ajaxPaggingPrev").attr("pagina", page-1);
                else
                    $("#ajaxPaggingPrev").attr("pagina", 1);

                if (page < parseInt($("#ajaxPaggingLast").attr("page")))
                    $("#ajaxPaggingNext").attr("pagina", page+1);
                else
                    $("#ajaxPaggingNext").attr("pagina", $("#ajaxPaggingLast").attr("pagina"));
            });
        });  
    });

AndreLC · April 4, 2012 at 04:54 PM

E desde já agradeço a ajuda que estás a dar. É de valor. Há poucas pessoas assim.

Colocando

if (page < parseInt($("#ajaxPaggingLast").attr("page")))

Para:

if (page < parseInt($("#ajaxPaggingLast").attr("pagina")))

E:

	echo '<a class="ajaxPagging" href="" pagina="0">Primeira</a> | ';

Para:

	echo '<a class="ajaxPagging" href="" pagina="1">Primeira</a> | ';

Mas não estava a dar. Então vi com o Web Console do FF que estava a passar dois ?? nos links, pois estava a ir buscar o do href juntamente com o ?pagina, então retirei o ? aqui:

 var href = link.attr('href')+"?pagina="+page;

Ficando:

 var href = link.attr('href')+"pagina="+page;

e os links funcionam, mas agora quero dar feedback ao utilizador.

Só falta marcar a página onde o utilizador está situado, colocando a cor vermelha na página que cliquei e também que se expandisse as páginas (pois no php o $exibir = 5; é para isso mesmo). Eu antes de aplicar jQuery tinha isso. Por exemplo, se estiver na página 5, esta fica a vermelho e já mostra os resultados até à página 9, por exemplo. Como faço isso juntamente com este código em jQuery?

Muito obrigado pela ajuda.

HappyHippyHippo · April 4, 2012 at 05:33 PM

para tratar na númeração podes fazer:

1º : adicionar uma classe às tags a númericas do género "ajaxPaggingNumber"

2º : realizar algo do género após a actualização

  var number = pagina - 2; // numero a ser atribuido
  $(".ajaxPaggingNumber).each(function() {
    if (number >= 1 && number <= parseInt($("#ajaxPaggingLast").attr("pagina"))) // verificar se o numero fica entre 1 e o maximo
       $(this).html(number); // apresentar o numero
    else
       $(this).html(""); // esconder a opção não apresentando nada
    number++;
  });

para tratar da cor avermelhada tens de :

1º : retirar todos estes tags manhosos : ..

2º : adicionar uma classe à tag a do género "ajaxPaggingSelected"

3º : criar uma regra no css para dar o estilo correcto à tag a com a classe "ajaxPaggingSelected"

4º : realizar algo do género após a actualização

$(".ajaxPaggingSelected).removeClass("ajaxPaggingSelected"); // remover a classe ao numero selecionado
  $(".ajaxPaggingNumber).each(function() {
    if (parseInt($(this).html()) == pagina) // verificar se o numero apresentado é o numero selecionado
      $(this).addClass("ajaxPaggingSelected"); // adicionar a classe ao tag a com o html igual ao numero apresentado
  });

PS : isto são ideias ... deverão funcionar mas o resto terás de ser tu a implementar ...

AndreLC · April 4, 2012 at 09:43 PM

1º : adicionar uma classe às tags a númericas do género "ajaxPaggingNumber"

2º : adicionar uma classe à tag a do género "ajaxPaggingSelected"

Mas a tag a já possui a classe "ajaxPagging". Assim não vai ficar com duas classes? Aqui não percebi.

para tratar na númeração podes fazer:

1º : adicionar uma classe às tags a númericas do género "ajaxPaggingNumber"

2º : realizar algo do género após a actualização

  var number = pagina - 2; // numero a ser atribuido
  $(".ajaxPaggingNumber).each(function() {
    if (number >= 1 && number <= parseInt($("#ajaxPaggingLast").attr("pagina"))) // verificar se o numero fica entre 1 e o maximo
       $(this).html(number); // apresentar o numero
    else
       $(this).html(""); // esconder a opção não apresentando nada
    number++;
  });

Penso que ali na primeira linha seja "page" em vez de "pagina" e na segunda linha falta a aspa em ajaxPaggingNumber" .

Não sei se por não tem entendido aquilo de criar outra classe, pois assim fico com duas classes, mas o que está a fazer é a subtração das páginas e depois desaparece o restante das páginas. Se clicar na página 3 retorna-me simplesmente 1 e esconde o resto. Aqui não queria esconder. Quero é mostrar o resto da numeração tanto à esquerda ou à direita, por exemplo, se clicar na página 5 mostrar até à 9, se clicar na página 4 mostrar até à 8 e se depois clicar na página 1 só mostrar até à 5. Neste caso se clicar na primeira página não me aparece nada.

para tratar da cor avermelhada tens de :

1º : retirar todos estes tags manhosos : ..

2º : adicionar uma classe à tag a do género "ajaxPaggingSelected"

3º : criar uma regra no css para dar o estilo correcto à tag a com a classe "ajaxPaggingSelected"

4º : realizar algo do género após a actualização
$(".ajaxPaggingSelected).removeClass("ajaxPaggingSelected"); // remover a classe ao numero selecionado
  $(".ajaxPaggingNumber).each(function() {
    if (parseInt($(this).html()) == pagina) // verificar se o numero apresentado é o numero selecionado
      $(this).addClass("ajaxPaggingSelected"); // adicionar a classe ao tag a com o html igual ao numero apresentado
  });
PS : isto são ideias ... deverão funcionar mas o resto terás de ser tu a implementar ...

Ali no if também coloquei "page" em vez de "pagina". Na primeira e segunda linha falta a aspa em ajaxPaggingNumber".

Não percebi a primeira linha. Está a remover a mesma classe. E eu para testar removi a classe "ajaxPagging" de uma tag a e coloquei ajaxPaggingSelected e ele assume o que está no css sem termos clicado. Também não estou a perceber o que está a acontecer aqui.

Aqui é queria aplicar isso, porque só tenho aqui isso do font color, mas já removi:


//Pagina actual
echo '<a class="ajaxPagging" href="?" pagina="'.$pagina.'">'.$pagina.'</a>';

Agora como não percebi aquilo da outra classe não sei o que fazer...

Pois só que ainda estou muito verde em jQuery, estou agora a dar os primeiros toques e nisto preciso mesmo de ajuda.

Obrigado pela ajuda.

HappyHippyHippo · April 4, 2012 at 10:37 PM

se te estou a dizer que é para usar uma segunda classe é porque é para usar uma segunda classe ...

Sign In

Ajuda ao carregar na paginação a div actualiza sem fazer refresh

Recommended Posts

AndreLC

Top Posters In This Topic

Top Posters In This Topic

AndreLC

HappyHippyHippo

AndreLC

AndreLC

HappyHippyHippo

AndreLC

HappyHippyHippo

AndreLC

HappyHippyHippo

AndreLC

HappyHippyHippo

AndreLC

HappyHippyHippo

AndreLC

HappyHippyHippo

AndreLC

HappyHippyHippo

AndreLC

HappyHippyHippo

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information