Navigation without refresh! [duplicate]

Navigation
6

I'm developing a site that has div where I have a script that lists results of a SQL query. They are images, in this case. The site was developed in only one page, so when I click on portfolio, it only takes me to div #portifolio . The problem is that I would like to change the category to portfolio so that it does not refresh the page, only reload to div .

I've looked a lot on the net, until I found a script that was very similar to what I wanted, but it bugged the modal window and the grayscale effect as well.

The code is this: 

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

And this is 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>
    
asked by anonymous 05.02.2014 / 21:25

3 answers

1

Here's an example of using ajax with 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>

Now the test.php 

<?php
   echo "Hello world <b>".$_GET["nome"]."</b>";
?>
    
06.02.2014 / 12:44
2

Create another page with the content you want it to upload and then use it to upload the data.

It gets more organized and faster, since less data will be transferred. You can also simplify javascript a bit by using the .load function: 

content
.fadeOut('slow')
.load('ajax.php?href=' + href, function () {
  content.fadeIn();
});
    
05.02.2014 / 22:21
0

Instead of answering how to make a simple feature, if you really want to do this, it's better to invest soon in specialized libraries. It would indicate AngularJS , BackboneJS a , CanJS and Ember .

In a similar way as a CRUD could be done on the server side, these libraries are great because they help to do almost a client-side MVC .

Here is a working example of a TodoMVC in algular . The others also have something similar.

Important Note: When using Javascript to build your HTML, be careful not to make your page not accessible. Screen readers may not understand what is happening. It is possible to turn Ajax into accessible pages but it is more complicated. Read more about WAI ARIA .

    
06.02.2014 / 00:04
strongsReport in Delphi jQuery validate - rule skip_or_fill_minimum does not fire if used more than once