spiacevole effetto reload su chiamata Ajax

[Playmo]

Ciao a tutti
premetto che sono neofita di JS JQ ed Ajax
sto sperimentando un menù che al click su "Chi Siamo" fa partire una chiamata Ajax per la pagina HTML che poi inserisce nel DIV
all'inizio avevo messo un evento onClick su href="#" però avevo lo spiacevole effetto che la pagina veniva come ricaricata e la navigazione tornava al top della pagina, quindi l'utente avrebbe dovuto fare scrolling per tornare dove prima
ho inizialmente risolto questo problema cambiando il codice in

Chi Siamo

poi però mi son detto che aggiungere un effetto .fadeIn alla pagina che appariva era più carino e sono diventato un pò scemo cmq alla fine avrei risolto così:

function chisiamo(){ 
$('#oidocropdiv1').load('ajax/chi_siamo.html').hide().fadeIn('slow'); }

però sono ripiombato nell'effetto del page reload
ho provato a modificare la funzione con .get invece di .load ma non cambia
spero di essere stato chiaro
avete idea di come possa ovviare?
grazie mille in anticipo

[Playmo]

up

[mxa]

Sconsiglio di mettere quell'orrendo java-script nell'href. Fai così nel tuo javascript:

$(function(){
$('.button').on('click', function(){
//load, hide, fade
return false;
});

})

Potresti dover aggiungere una classe o id se il tuo chi siamo non è l'unico con classe button e fare il selector con quelli.

[Playmo]

grazie mille per la gentile risposta
ho messo il JS dentro l'href per far apparire la manina al passaggio del mouse sennò non sapevo come altro fare, ho chiamato la class button ma non si tratta del button html ma solo di un menù con dei bottoni stondati
poi si, "chi siamo" non è l'unica voce del menù, infatti adesso mi carica la pagina "chi siamo" su ogni pulsante ma quello lo posso forse risolvere, è che la classe .button mi da tutte le formattazioni CSS, cmq la posso copiare e fare diversi ID
per il codice, ho provato così, scusa ma sono veramente i primi JS che sperimento e non sono affatto bravo

$(function(){ 
$('.button').on('click', function  chisiamo(){
$('#oidocropdiv1').load('ajax/chi_siamo.html').hide().fadeIn('slow');
return false; 
}); 
})

però l'effetto reload non è scomparso, mi riporta sempre la pagina al top
dove sbaglio?
grazie mille

[Dascos]

Originariamente inviato da Playmo
Ciao a tutti
premetto che sono neofita di JS JQ ed Ajax
sto sperimentando un menù che al click su "Chi Siamo" fa partire una chiamata Ajax per la pagina HTML che poi inserisce nel DIV
all'inizio avevo messo un evento onClick su href="#"

Andava anche bene come soluzione, bastava mettere come href questo

javascript: void(0);

così evitavi di essere riportato al top della pagina...
Comunque, puoi ovviare con una chiamata vera e propria a una funzione php che poi restituisce l'html voluto.

// Funzione javascript
function mostra_pagina(pagina){
    $.ajax({
        type: "POST",
        url: "/file_php_che_gestisce_le_pagine.php",
        data: pagina,
        success: function(msg){
            $("#id_div_dove_mostrare_la_pagina").html(msg);
        },
        error: function(){
            
        }
    });
} 

Nella tua /file_php_che_gestisce_le_pagine.php avrai delle funzioni che recuperano l'html corretto e alla fine di tutto fanno un print di questo html, così che venga passato alla funzione ajax (sezione success), che non farà altro che inserire questo html nel id_div_dove_mostrare_la_pagina

[Playmo]

grazie mille
ho aggiornato così il codice href, va bene?

Chi Siamo

senza php non si risolve? perchè il php non l'ho ancora studiato e non saprei fare la pagina
di nuovo

[Dascos]

No è l'href che devi modificare, non il onClick...
Senza php dovresti potere lostesso, basta che come variabile url: ci metti la pagina che devi visualizzare. Dovrebbe, però, non sono sicuro

[Playmo]

oh si scusa, ecco corretto e funzionante

Chi Siamo

poi ho provato con la la chiamata:

function chisiamo(pagina)
{ $.ajax({ 
  type: "POST", 
  url: "ajax/chi_siamo.html", 
  data: pagina, 
  success:function(msg){ 
    $("#oidocropdiv1").html(msg); 
 }, 
  error: function(){ } }); }

e funziona correttamente però così non ho più l'effetto fadeIn e se lo aggiungo dopo .html il browser mi ritorna ad inizio pagina