7

Estou desenvolvendo um site que tem uma div onde eu tenho um script que lista resultados de uma consulta SQL. São imagens, no caso. O site foi desenvolvido em apenas uma página, então ao clicar em portfólio, ele apenas me leva até á div #portifolio. O problema é que eu gostaria de ao trocar de categoria no portfolio que ele não desse refresh na página, apenas recarrega-se a div.

Já procurei bastante na net, até encontrei um script que era bem similar ao que eu queria, mas dava bug na janela modal e no efeito grayscale também.

O código é este:

<div id="portifolio" class="grid_24">
 <nav id="menu-portifolio" class="grid_24"> 
     <ul id='nav'>
                            <li><a href='#'>SERVIÇOS<img class='icon-menu' src='images/icon-menu.png' alt='Icone do menu'/></a>
                                <ul>
                                    <?php
                                        // Includa a conexão com o banco de dados sql
                                        include "conn.php";

                                    // Conecta a tabela categorias
                                        $result = mysql_query('SELECT * FROM categorias')or die(mysql_error());

                                        echo "<li><a href='?id_todos=todos#bloco03'> &nbsp Todos </a></li>";

                                        // Exibe o resultado da consulta
                                        while ($row = mysql_fetch_object($result)) {
                                            echo "<li>      
                                                    <a href='?id=$row->id#bloco03'> &nbsp $row->nome </a>
                                                  </li>
                                               ";
                                        }                           
                                    ?> 
                              </ul>
                            </li>                                
                         </ul>
                    </nav>  

                </nav>

                <!--  Primeira pagina portifólio -->
                <div id="modal" class="conteudo-portifolio grid_24">                     
                        <?php 

                        // Conecta a tabela portifolio                          
                        if (isset($_GET['id']) && is_numeric($_GET['id'])) {  
                            $id_categoria = $_GET['id']; 
                            $resultado = mysql_query("SELECT * FROM portifolio WHERE id_categoria = '$id_categoria' LIMIT 12"); 

                            // Exibe o resultado da consulta
                            $myModal = 1;
                            while ($row = mysql_fetch_object($resultado)){
                                    echo "
                                        <figure class='img-portifolio'> 
                                            <a href='#janela1".$myModal."' rel='modal'><img class='' src=". $row->imagem ." alt=". $row->titulo ."/></a>
                                        </figure>

                                        <div class='window' id='janela1".$myModal."'>
                                            <img class='img-thumb' src=". $row->imagem ." alt=". $row->titulo ."/>
                                        </div>                           

                                        <!-- mascara para cobrir o site -->  
                                        <div id='mascara'></div>                                        

                                         ";
                                $myModal++;
                                }                               
                            } else {
                                $resultado_todos = mysql_query("SELECT * FROM portifolio LIMIT 12");
                                // Exibe o resultado da consulta
                                $myModal = 1;
                                while ($row = mysql_fetch_object($resultado_todos)){
                                    echo "
                                        <figure class='img-portifolio'> 
                                            <a href='#janela1".$myModal."' rel='modal'><img class='' src=". $row->imagem ." alt=". $row->titulo ."/></a>
                                        </figure>

                                        <div class='window' id='janela1".$myModal."'>
                                            <img class='img-thumb' src=". $row->imagem ." alt=". $row->titulo ."/>
                                        </div>                           

                                        <!-- mascara para cobrir o site -->  
                                        <div id='mascara'></div>                                        

                                         ";
                                $myModal++;
                                }
                            }                                   

                        ?>
                    </div>

                </div>

                </div>

E este é o jQuery:

        <script type="text/javascript">
        $(document).ready(function(){
            var content = $('#portifolio');

            //pre carregando o gif
            loading = new Image(); loading.src = 'images/loading_ajax.gif';
            $('#portifolio a').live('click', function( e ){
                e.preventDefault();
                content.html( '<img src="images/loading_ajax.gif" />' );

                var href = $( this ).attr('href');
                $.ajax({
                    url: href,
                    success: function( response ){
                        //forçando o parser
                        var data = $( '<div>'+response+'</div>' ).find('#portifolio').html();

                        //apenas atrasando a troca, para mostrarmos o loading
                        window.setTimeout( function(){
                            content.fadeOut('slow', function(){
                                content.html( data ).fadeIn();
                            });
                        }, 500 );
                    }
                });

            });
        });
    </script>
5
  • 1
    Pode colocar um exemplo do seu código aqui? A parte da chamada ajax e o codigo do link que chama o ajax faz toda a diferença para poder responder.
    – Sergio
    Commented 5/02/2014 às 20:27
  • Coloquei o código! Commented 5/02/2014 às 20:35
  • O código PHP e o HTML/jQuery estão no mesmo ficheiro?
    – Sergio
    Commented 5/02/2014 às 20:38
  • Sim! Tudo na index. Commented 5/02/2014 às 20:39
  • 2
    Saudades MVC :) $id_categoria = $_GET['id']; - Off: Tenha cuidado com linhas onde você pega o que o usuário envia e manda diretamente para o banco de dados. Recomendo uma leitura deste artigo. Commented 5/02/2014 às 22:06

3 Respostas 3

2

Crie outra página com o conteúdo que você quer que seja carregado e então use-a para carregar os dados.

Assim fica mais organizado e mais rápido, uma vez que menos dados serão transferidos. Você também pode simplificar um pouco o javascript usando a função .load:

content
.fadeOut('slow')
.load('ajax.php?href=' + href, function () {
  content.fadeIn();
});
6
  • Bom, não entendi muito bem já que o site é de uma página só entende? Commented 5/02/2014 às 21:24
  • A parte que você vai atualizar deixe separado. Inclua ela na página principal. O usuário não vai saber que são duas páginas, mas, pela organização, é. Commented 5/02/2014 às 21:27
  • Hum.. ah entendi.. Vou testar aqui então e ai fale se funcionou. Commented 5/02/2014 às 21:30
  • Funcionou quase tudo companheiro. T arecarregando só a div como eu queria, mas não to conseguindo abrir o lightbox mais :s o que será que pode ser? Commented 5/02/2014 às 21:39
  • Quando você carrega algo via ajax você tem que alertar os plugins que há novos elementos, atualizar-os. Isso vai variar com o plugin você estiver usando. Commented 5/02/2014 às 21:42
1

Segue um exemplo de utilização de ajax com jquery.

<!-- Incluo o jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

<!-- Script para efetuar as requisições -->
<script>
$(document).ready(function(){
    $("a").click(function(){
        link = $(this).attr("href");
        $.ajax({
           url : link,
           dataType : "HTML", // Pode ser SCRIPT se o retorno for somente comandos JavaScript
           type : "GET", // Pode ser get ou post..
           success : function(conteudo){
                $("#CONTEUDO").html(conteudo);
           },
           error : function(a,b,c){
                 alert("Erro : "+a["status"]+" "+c);
           }
        });
    });
});
    </script>


<!-- Um link para testar a requisição -->
<a href="teste.php?nome=teste" />AJAX</a>
<!-- DIV que vai receber as informações -->
<div id="CONTEUDO"></div>

Agora o arquivo teste.php

<?php
   echo "Hello world <b>".$_GET["nome"]."</b>";
?>
0
0

Em vez de responder como fazer uma funcionalidade simples, se realmente quer fazer isso é melhor investir logo em bibliotecas especializadas. Indicaria AngularJS, BackboneJS, CanJS e Ember.

De modo parecido como um CRUD poderia ser feito do lado do servidor, essas bibliotecas são excelentes pois ajudam a fazer praticamente um MVC do lado do cliente.

Aqui tem um exemplo funcional de um TodoMVC em algular. Os demais também tem algo parecido.

Nota importante: ao usar Javascript para construir seu HTML, cuidado para não tornar sua página não acessível. Leitores de tela podem não entender o que está acontecendo. É possível transformar Ajax em páginas acessíveis mas é mais complicado. Leia mais sobre WAI ARIA.

3
  • Minha experiência com isso se resumiu a "muito limitado, muito pesado, meio desnecessário (ainda mais para uma só página)". Me interessei com isso depois que percebi que em projetos maiores comecei a reinventar a roda: há tutoriais ou artigos sobre MVC em português? Commented 5/02/2014 às 23:44
  • Bem, sobre o Angular tem pelo menos esse tableless.com.br/criando-uma-aplicacao-simples-com-angularjs, porém o Google tem mais. Quanto a ser muito pesado para uma página só, bem, isso depende se vai ser só para uma página. Se for, um código customizado simples já serve. Agora, qualquer coisa mais complexa vale a pena usar bibliotecas como as que indiquei. Commented 5/02/2014 às 23:59
  • Já tentei usar o Angular, desisti depois que vi que não é possível usar "sub-views", algo que eu precisava no projeto. O que me interessa mais no MVC no momento são os conceitos: a partir do momento que eu comecei a escrever funções que simulam "providers" vi que eu precisava de usar algo assim. As bibliotecas exigem um modelo de você, dificultar (um pouco) as "sub-views" em favor de outros modelos, por exemplo. Commented 6/02/2014 às 0:09

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