Caricamento dati in secondo div senza ricaricare pagina

[aasmdaa]

Ho 2 div nella pagina. Quello a sx ha un menù che richiama in quello di destra una tabella con determinati dati in base alla selezione.

Al momento al click sul menù a sx ricarico la pagina con un dato in get che recupero e con il quale effettuo la lettura del database.

C'è la possibilità di ricaricare il contenuto del div di dx senza ricaricare l'intera pagina?

Una soluzione potrebbe essere un iframe, ma mi piacerebbe poter sfruttare un metodo lato client.

E' possibile fare ciò con ajax? O cosa consigliate?

[m4rko80]

Iframe ormao son piuttosto obsoleti ajax e' proprio quel che serve.

Se vuoi usare jquery jquey ajax sarebbe molto pratico e semplice.

Gli esempi sono anche nella pagina ma in breve:

$.ajax({
   type: "POST",
   url: "some.php", //script che chiami
   data: "name=John&location=Boston", // parametri da passare
   success: function(msg){ //se la richiesta va a buon fine...
     $('#id_contenitore').html( msg ); //msg e' quello che torna some.php, per esempio echo 'ciao';
   }
 });

[cavicchiandrea]

Originariamente inviato da aasmdaa
Ho 2 div nella pagina. Quello a sx ha un menù che richiama in quello di destra una tabella con determinati dati in base alla selezione.

Al momento al click sul menù a sx ricarico la pagina con un dato in get che recupero e con il quale effettuo la lettura del database.

C'è la possibilità di ricaricare il contenuto del div di dx senza ricaricare l'intera pagina?

si

Una soluzione potrebbe essere un iframe, ma mi piacerebbe poter sfruttare un metodo lato client.

E' possibile fare ciò con ajax?

http://javascript.html.it/guide/

O cosa consigliate?

con iframe soluzione più rapida, ajax un minimo di conoscenza js ci vuole altrimenti ti perdi nei vari passaggi, oppure jquery ti schivi di scrivere il codice ma va studiato e se non hai conoscenza minima di js secondo me si fa più fatica (ma non tutti sono dello stesso avviso)

[aasmdaa]

Infatti so che frame è già deprecato ed iframe ormai è obsoleto.

Uso già jQuery da tempo ma non ho mai utilizzato ajax, per cui ora mi cimento... preparatevi!!!
;-)

grazie

[aasmdaa]

Già fatto!

Di una semplicità disarmante...

Ora però iniziano le cose più serie:

Questa è la parte jQuery ajax (quella segnalata da m4rko80):

$.ajax({
    type: "POST",
    url: "guide_contenuto.php", //script che chiami
    data: "id_montaggio=7", // parametri da passare
    success: function(msg){ //se la richiesta va a buon fine...
        $('#contenuto').html( msg ); //msg e' quello che torna some.php, per esempio echo 'ciao';
    }
}); 

id_montaggio è un parametro che sfrutto nella query della pagina guide_contenuto.php per caricare i dati e creare la tabella.

Ora però devo fare in modo di passare id_montaggio in maniera dinamica alla pressione del link presente nel menù in un div differente rispetto al conenuto.

Devo quindi fare una chiamata jQuery onclick sul link che lancia $.ajax?

La parte finale del menù (quella che ora richiama le pagine) è questa:

[*][url="guide.php?id_montaggio=<?php echo $row['id_montaggio']; ?>"]<span><?php echo $row['montaggio']; ?></span>[/url]

che potrebbe innanzitutto diventare

[*][url="id_montaggio=<?php echo $row['id_montaggio']; ?>"]<span><?php echo $row['montaggio']; ?></span>[/url]

In modo da sfruttare la parte di href come data da passare nella chiamata ajax.

Sto andando ad intuizione per cui fermato quando dico castronate...

[aasmdaa]

E questa la parte javascript:

$('.vai').click(function(event) {    
    
    // previene l'apertura del link
    event.preventDefault();
    
    // recupera il valore dell'attributo href
    var id = this.attr('href');
    
    // lancia ajax
    $.ajax({
        type: "POST",
        url: "guide_contenuto.php", //script che chiami
        data: id, // parametri da passare
        success: function(msg){ //se la richiesta va a buon fine...
            $('#contenuto').html( msg ); //msg e' quello che torna some.php, per esempio echo 'ciao';
        }
    });
}); 

Peccato non funzioni...

[aasmdaa]

Penso di aver risolto:

quello di prima non funzionava perchè avevo sbagliato la sintassi sul recupero del valore con jQuery. Ho anche modificato in modo da prendere come riferimento l'id e non l'href nel menù così non viene visualizzato nella barra del browser.

Ecco il codice:

MENU:[*][url="javascript:void(0);"]" class="document vai"><span><?php echo $row['montaggio']; ?></span>[/url]

JQUERY:
$('.vai').click(function() {
    var id = $(this).attr("id");
    
    // lancia ajax
    $.ajax({
        type: "POST",
        url: "guide_contenuto.php", //script che chiami
        data: "id_montaggio="+id, // parametri da passare
        success: function(msg){ //se la richiesta va a buon fine...
            $('#contenuto').html( msg ); //msg e' quello che torna some.php, per esempio echo 'ciao';
        }
    });
});

Tutto questo funziona, però se ci sono suggerimenti ben vengano.
grazie.

[cavicchiandrea]

Se id="<?php echo $row['id_montaggio']; ?>" è un numero è sconsigliato antemponi un carattere gli id non devo essere numerici id="1" no id="_1" si

[aasmdaa]

E' proprio numerico. Perchè è sconsigliato?

[cavicchiandrea]

Originariamente inviato da aasmdaa
E' proprio numerico. Perchè è sconsigliato?

Alcuni browser non "riconoscono" i numeri nel tag id e restituiscono nullo meglio non rischiare