Problema chiamata Ajax per vista Griglia o vista Lista

[mickey2011]

Ciao a tutti,

io sto facendo un blog, dove nella home ho sistemato tutte le anteprime dei vari articoli. Ora vorrei che queste anteprime, si potessero visualizzare in 2 modi, vista Griglia e vista Lista, ad esempio.

So che si fa con una chiamata Ajax, rispetto alla quale mi sono già un pò documentato, ma vorrei sapere come e dove devo impostare tutto l'HTML che voglio in ritorno per la mia visualizzazione.

Posto qui il codice che ho a disposizione:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">

    /* 
       la funzione ready è utile quando il nostro javascript viene inserito nel tag head,
       poiché ci garantirà l'esecuzione del codice appena il DOM sarà stato caricato
*/
jQuery(document).ready(function($){  
    $('input#ajax_button').on('click',function(){ 

        var inputValue = $('input#ajax_input').val(); //prendiamo il valore della nostro campo input
    
        //ecco la nostra richiesta ad un file al quale inviamo in POST il parametro value contenente il valore del nostro campo input
        var richiesta = $.ajax({
                            url: "ajax.php", // consigli di inserire l'indirizzo completo allo script es.  http://www.seocube.it/ajax.php
                            type: "POST",
                            data: {value : inputValue},
                            dataType: "html" 
                          });
    
        // Questa è la funzione che restituisce la risposta del nostro script se la nostra richiesta Ajax avrà esito positivo
        richiesta.done(function(data) {  
            alert(data); 
        });
        // Questa funzione invece (che sostituisce .error delle precedenti versioni di jQuery) restituisce, in caso di richiesta errata, il messaggio di errore riscontrato durante la richiesta ajax
        richiesta.fail(function(jqXHR, textStatus) {
            alert( "Request failed: " + textStatus );
        });
    });
});
</script>

spero che mi possiate aiutare! grazie.

[zacca94]

Mi sa che non ti sei documentato molto se chiedi come impostare il tutto visto che sulla doc. ufficiale spiega esattamente come fare per esempi.

[mickey2011]

si non ne so molto effettivamente.. mi puoi aiutare?

[tampertools]

Ajax non ti serve a niente, basta il CSS. Ecco un esempio: https://jsfiddle.net/hxy7tyee/1/embe...t,html,css,js/

[mickey2011]

ok provo.. grazie intanto

Ajax non ti serve a niente, basta il CSS. Ecco un esempio: https://jsfiddle.net/hxy7tyee/1/embe...t,html,css,js/

[mickey2011]

ma...non viene un casino così?

perchè devo stare a modificare tutto il css..e invece usando una chiamata Ajax, mi verrebbe una cosa più ordinata a livello di gestione dei vari codici.

non mi potresti mica postare uno script di chiamata ajax e spiegarmi il funzionamento partendo dai 2 links di visualizzazione Griglia e Lista?

Ajax non ti serve a niente, basta il CSS. Ecco un esempio: https://jsfiddle.net/hxy7tyee/1/embe...t,html,css,js/

[cavicchiandrea]

Ma se vuoi farlo con ajax crea due pagine una disposta a griglia una a lista poi le carichi con load

[tampertools]

Ma che senso ha ricaricare tutti gli articoli ogni volta? Con la chiamata ajax dovrai sempre aspettare qualche secondo, con i CSS (o comunque lavorando solo lato browser) sarà tutto immediato... Per usare ajax, tanto vale avere due pagine diverse

[mickey2011]

ok provo così allora. ma ad esempio, il javascript dove lo sistemo, sempre nella home?

Ma che senso ha ricaricare tutti gli articoli ogni volta? Con la chiamata ajax dovrai sempre aspettare qualche secondo, con i CSS (o comunque lavorando solo lato browser) sarà tutto immediato... Per usare ajax, tanto vale avere due pagine diverse

[cavicchiandrea]

Il js andrà dove vuoi cambiare il listato