Associare una stessa funzione get a due eventi a.click con classi differenti

Discussione in 'Ajax' iniziata da Domenico_Falco1, 9 Giugno 2019.

Status Discussione:
Chiusa ad ulteriori risposte.
  1. Domenico_Falco1

    Domenico_Falco1 Nuovo Utente

    Registrato:
    27 Maggio 2019
    Messaggi:
    26
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Buona sera :)

    Vado subito al dunque, ho dei link che sono dentro ad una pagina dinamica che richiamo con una funzione get di ajax, un link è dentro ad un div ed ha class = "pulsanti" e l'altro è associato ad una immagine ed ha class = " pulsanti2". cioè così :

    HTML:
    <div class="pulsante1g"><a class="pulsanti" href="PRESENTAZIONE.php">Chi Siamo</a></div>
    e l'altro :

    Codice:
    <div class ="scheda1ig"><a class="pulsanti2" href="PRESENTAZIONE.php"><img src="CHISIAMO.gif" alt="azienda" title="Titolo della foto"></a></div>
    e funzionano con le rispettive funzioni evento :

    Codice:
    $('a.pulsanti').click(function(event) {
            
                if (history && history.pushState) {     
                    //Inserisce la nuova pagina nella history del browser
                    history.pushState(null, document.title, $(this).attr('href'));
                        
                        //Richiama la nuova pagina attraverso una chiamata ajax
                        $.get($(this).attr('href'), {ajax:'1'}, function(data, text, xhr) {
                            $('#container').html(xhr.responseText);
                        });
                    
                    event.preventDefault();   
                
             }
         });
    
       $('a.pulsanti2').click(function(event) {
      
                if (history && history.pushState) {     
                    //Inserisce la nuova pagina nella history del browser
                    history.pushState(null, document.title, $(this).attr('href'));
                        
                        //Richiama la nuova pagina attraverso una chiamata ajax
                        $.get($(this).attr('href'), {ajax:'1'}, function(data, text, xhr) {
                            $('#container').html(xhr.responseText);
                        });
                    
                    event.preventDefault();   
                
             }
         });
    che tengo scritti nella stessa pagina chiaramente, ed hanno un markup differente, mi chiedevo se c'è un modo di scrivere la stessa funzione per entrambi e non per ognuno di essi.
     
  2. Domenico_Falco1

    Domenico_Falco1 Nuovo Utente

    Registrato:
    27 Maggio 2019
    Messaggi:
    26
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Domanda sbagliata ? non dovevo farla ? :)
     
  3. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.768
    Mi Piace Ricevuti:
    283
    Punteggio:
    83
    Sesso:
    Maschio
    Qui nessuno è obbligato a rispondere e tantomeno in fretta! Pertanto abbi paziemza e aspetta che qualcuno abbia voglia o sappia risponderti!
    Grazie
     
  4. marino51

    marino51 Utente Attivo

    Registrato:
    28 Febbraio 2013
    Messaggi:
    2.518
    Mi Piace Ricevuti:
    123
    Punteggio:
    63
    Occupazione:
    free lance
    Località:
    Lombardia
    hai provato ad aggiungere una doppia classe uguale per entrambi ?
    tipo
    class="pulsanti pulsante1"
    class="pulsanti pulsante2"
    il nome uguale lo usi x javascript,
    il nome diverso per il markup

    fai sapere
     
  5. Domenico_Falco1

    Domenico_Falco1 Nuovo Utente

    Registrato:
    27 Maggio 2019
    Messaggi:
    26
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Buon giorno Marino, grazie della risposta e chiaramente collaudata e funziona benissimo.

    Riporto il codice per una maggiore comprensione di tutti, quindi ammettiamo che abbiamo due button, si avrà :

    HTML:
    <div class="container-pulsantig">   
    
    <div class="pulsante1g"><a class="pulsantig pulsar" href="INDEX.php">Home</a></div>
    </div>
    
    <div class="container-pulsanti">
    <div class="pulsante1"><a class="pulsanti pulsar" href="INDEX.php">Home</a></div>
    </div>
    
    <script>
    
     $('a.pulsar').click(function(event) {
                    
                if (history && history.pushState) {     
                    //Inserisce la nuova pagina nella history del browser
                    history.pushState(null, document.title, $(this).attr('href'));
                        
                        //Richiama la nuova pagina attraverso una chiamata ajax
                        $.get($(this).attr('href'), {ajax:'1'}, function(data, text, xhr) {
                            $('#container').html(xhr.responseText);
                        });
                    
                    event.preventDefault();   
                
             }
         });
    
    </script>
    Praticamente due classi per una gestione responsive del sito e quindi con markup diverso, ma con la stessa classe per l'attivazione dello script ajax.
    Ancora grazie e saluti.

    P.s. : La gentilezza apre tutte le porte.
     
  6. WmbertSea

    WmbertSea Utente Attivo

    Registrato:
    28 Novembre 2014
    Messaggi:
    146
    Mi Piace Ricevuti:
    20
    Punteggio:
    28
    Salve, condivido pienamente il consiglio di marino51 nell'uso di una classe che accomuni gli elementi da gestire via script, soprattutto come buona pratica per avere una migliore gestibilità del codice. In alternativa si può comunque impostare opportunamente il selettore jquery in modo da selezionare elementi con diverse classi.

    In tal senso è possibile usare la virgola in modo da ottenere dei gruppi di selettori, proprio come si fa con i css.

    Riportandolo al tuo esempio:
    Codice:
    <a class="pulsantig">Home</a>
    <a class="pulsanti">Home</a>
    
    <script>
         $('a.pulsantig,a.pulsanti').click(...);
    </script>
    Il selettore 'a.pulsantig,a.pulsanti' quindi pesca contemporaneamente tutti gli elementi <a> con classe pulsantig e tutti gli elementi <a> con classe pulsanti.
     
  7. Domenico_Falco1

    Domenico_Falco1 Nuovo Utente

    Registrato:
    27 Maggio 2019
    Messaggi:
    26
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Buona sera WmbertSea e grazie davvero, oggi ho imparato due cose che mi saranno sicuramente utili in futuro :)

    Ancora grazie di cuore ed ottima serata.

    Saluti
     
Sto caricando...
Status Discussione:
Chiusa ad ulteriori risposte.

Condividi questa Pagina