[risolto] Script ajax per form e mappe

[marcoint]

Salve ragazzi ho un problema con forme mappe cliccabili. Allora un pò di tempo fa mi aiutaste a trovare una chiamata ajax che aprisse tutti i link nella div main. Questa funziona benissimo:
Codice HTML:
<script type="text/javascript">
$(document).ready(function() {
// assegno un evento sulla pressione di uno qualsiasi dei link del menù
$('a').click(function(e) {
// evito che apra nel div anche la home
if ($(this).attr('href') == "index.html")
{
return;
}
// prevengo il funzionamento normale del browser che mi rimanderebbe all'url del link
e.preventDefault();
// effettuo invece una richiesta in ajax grazie a quella url
$.get($(this).attr('href')).done(function(data) {
// in caso di riuscita scrivo il responso nel div main
$('.main').html(data);
});
});
});

</script>
Ora però sul mio sito ho la necessità di usare mappe cliccabili, e form che in particolare indirizzano ad un altra pagina .PHP e che ovviamente ora come ora si aprono su altre schede. C'è una possibilità di modificare questo script per adattarlo e per farlo funzionare oltre che per i link anche per le immagini cliccabili e per l'invia dei form? Altrimenti bisognerebbe fare un altro script apposito? In entrambi i casi non saprei come fare quindi aspetto il vostro aiuto. Grazie milleee.

 

[flameseeker]

Per quanto riguarda le mappe cliccabili, assunto che tu le abbia create con i tag <map> e <area>, dovresti poter risolvere modificando solo il selettore dello script, in questo modo:

$('a,area').click(function(e) {

Per quanto riguarda i form è un peletto più complesso, serve che ne posti uno di esempio per poter riadeguare il codice.

 

[marcoint]

Il form è semplicemente un form che passa due date ad una pagina .php. E io voglio che quella pagina si apra nel div main della mia pagina. Come posso fare?

 

[flameseeker]

Il form ha qualcosa per poterlo identificare, ad esempio un name o un id ?

 

[marcoint]

Guarda il form che devo utilizzare è proprio quello che mi hai creato tu :

<form name="dateEventi" method="GET" action="prova.php" target="_self"> 
<!--A PARTIRE DA--> 
DA 
<select name="giornoDA"> 
<?php for ($i = 1; $i <= 31; ++$i):  
            $giorno = str_pad($i, 2, '0'); 
?> 
   <option value="<?php echo $giorno; ?>"<?php echo !empty($_GET['giornoDA'])&&$giorno==$_GET['giornoDA']? ' selected':''; ?>><?php echo $giorno; ?></option> 
<?php endfor; ?> 
   </select> 
   
  <select name="meseDA"> 
<?php for ($i = 1; $i <= 12; ++$i):  
            $mese = str_pad($i, 2, '0'); 
?> 
   <option value="<?php echo $mese; ?>"<?php echo !empty($_GET['meseDA'])&&$mese==$_GET['meseDA']? ' selected':''; ?>><?php echo $mese; ?></option> 
<?php endfor; ?> 
  </select> 
    
   <select name="annoDA"> 
<?php for ($i = date('Y', strtotime('2013-01-01')); $i <= date('Y'); ++$i): ?> 
   <option value="<?php echo $i; ?>"<?php echo !empty($_GET['annoDA'])&&$i==$_GET['annoDA']? ' selected':''; ?>><?php echo $i; ?></option> 
<?php endfor; ?> 
  </select> 
  <br> 
  <!--FINO A--> 
  A 
  <select name="giornoFINO"> 
<?php for ($i = 1; $i <= 31; ++$i):  
            $giorno = str_pad($i, 2, '0'); 
?> 
   <option value="<?php echo $giorno; ?>"<?php echo !empty($_GET['giornoFINO'])&&$giorno==$_GET['giornoFINO']? ' selected':''; ?>><?php echo $giorno; ?></option> 
<?php endfor; ?> 
   </select> 
  <select name="meseFINO"> 
<?php for ($i = 1; $i <= 12; ++$i):  
            $mese = str_pad($i, 2, '0'); 
?> 
   <option value="<?php echo $mese; ?>"<?php echo !empty($_GET['meseFINO'])&&$mese==$_GET['meseFINO']? ' selected':''; ?>><?php echo $mese; ?></option> 
<?php endfor; ?> 
  </select> 
  
    <select name="annoFINO"> 
<?php for ($i = date('Y', strtotime('2013-01-01')); $i <= date('Y'); ++$i): ?> 
   <option value="<?php echo $i; ?>"<?php echo !empty($_GET['annoFINO'])&&$i==$_GET['annoFINO']? ' selected':''; ?>><?php echo $i; ?></option> 
<?php endfor; ?> 
  </select> 
<input type=submit value=Invia> 
</form> 
</body> 
</html>

Per quanto riguarda le mappe cliccabili ha funzionato come hai detto tu. Speriamo che riesci a risolvermi anche questo grazie mille

 

[flameseeker]

Perfetto, allora questo dovrebbe fare al caso tuo:

// Rintracciamo l'evento submit del form
$('form[name="dateEventi"]').submit(function(){

    // Quando inviato, creiamo invece una richiesta asincrona
    // inviando in get i dati valorizzati nel form
    $.get($(this).attr('action'), $(this).serialize())
        .done(function(data){
            // al completamento della richiesta scriviamo il responso nel div main
            $('.main').html(data);
        });

    // ritornando false interrompiamo lo svolgimento normale del submit
    // che altrimenti ci manderebbe alla pagina specificata nell'action
    return false;
});

Ti ho spiegato il funzionamento del codice tramite i commenti, fammi sapere se è tutto ok

 

[marcoint]

Sei un genio, grazie mille funziona tutto. Possiamo chiudere