+ Rispondi alla Discussione
Risultati da 1 a 3 di 3

Problemi con ajax - input multipli

Ultimo Messaggio di Ultima il:
  1. #1
    User
    Data Registrazione
    Oct 2011
    Località
    Moncalieri
    Messaggi
    49

    Problemi con ajax - input multipli

    Ciao,
    Da qualche settimana (purtroppo non riesco mai a trovare più di mezz'ora consecutiva per lavorarci su) sbatto la testa con ajax, sono relativamente neofita, anche se da autodidatta ho acquisito una certa dimestichezza con PHP e jquery (html e css sono invece il mio regno). I miei dubbi/problemi sono:
    - Per quale motivo se nel file html che effettua la chiamata ajax i dati vengono inseriti all'interno dei tag <form></form> la pagina effettua inevitabilmente il reload che non voglio? Cosa sbaglio?
    - Come faccio ad inviare il mio "value=pincopallo" se ho più di un input? Per come è strutturata la mia funzione ora (seguono i codici) qualunque tasto io pigi, viene riconosciuto sempre è solo il value del primo input.

    Ho provato anche a restituire una risposta semplicissima del tipo "echo $_REQUEST['value']" e il browser mi restituisce come risposta "Array".

    (seguono codici per maggior chiarezza)

    pagina html (head della pagina con script che effettua la chiamata)
    Codice:
    <script type="text/javascript">
    "use strict";
    jQuery(document).ready(function($){
    $('#indiceRaccolte li').click(function(){
    //prendiamo il valore del nostro campo input
    var inputValue = $('.indiceR').val();
    //Richiesta ad un file al quale inviamo in POST il parametro value contenente il valore del nostro campo input
    $.ajax({
    url: "php/indice_raccolte.php",
    type: "POST",
    data: {value : inputValue},
    dataType: "html",
    });
    // Funzione che restituisce la risposta del nostro script se la nostra richiesta Ajax avrà esito positivo
    success: function(msg){
    $("#indicePoesie").html(msg);
    });
    });
    });
    </script>


    pagina html (body lista di input che dovrebbero inviare il value + ul dedicato alla stampa del risultato)

    Codice:
    
    <ul id="indiceRaccolte">
         <li class="TindiceR"><strong>INDICE DELLE RACCOLTE</strong></li><br />
    <li><input type="submit" class="indiceR 01" name="raccolta" value="LUCI E OMBRE" /></li>
    <li><input type="submit" class="indiceR 02" name="raccolta" value="DUE DI NOI "/></li>
    <li><input type="submit" class="indiceR 03" name="raccolta" value="ECCOTI" /></li>
    <li><input type="submit" class="indiceR 04" name="raccolta" value="UNA NUOVA DIMENSIONE" /></li>
    <li><input type="submit" class="indiceR 05" name="raccolta" value="PARIDE³" /></li>
    <li><input type="submit" class="indiceR 06" name="raccolta" value="E POI ARRIVI TU" /></li>
    <li><input type="submit" class="indiceR 07" name="raccolta" value="UN SENSO DI ME" /></li>
    <li><input type="submit" class="indiceR 08" name="raccolta" value="PER UN RAGGIO DI SOLE" /></li>
    <li><input type="submit" class="indiceR 09" name="raccolta" value="NUOVE EMOZIONI" /></li>
    <li><input type="submit" class="indiceR 10" name="raccolta" value="TERRIBIE IL SILENZIO" /></li>
    <li><input type="submit" class="indiceR 11" name="raccolta" value="IN TUTTO IL MONDO TU" /></li>
    </ul>
    <ul id="indicePoesie">
    </ul>
    


    pagina php (per ora è solo una sperimentazione, in seguito ad ogni value corrisponderà una chiamata php/MySql per estrarre dati da un db)
    Codice:
    <?php
    include 'connect.php';
    if(isset($_REQUEST['value']))// Se si clicca sui link degli appartamenti{
    if ($_REQUEST['value'] == 'LUCI E OMBRE') 
    {
    echo "Luci e ombre";
    }
    elseif($_REQUEST['value'] == 'DUE DI NOI')
    {
    echo "Due di noi";
    }
    elseif($_REQUEST['value'] == 'ECCOTI')
    {
    echo "eccoti";
    }
    }
    else {
    echo "Non ha funzionato l'invio del POST, ma almeno so che sta scrivendo qualcosa"; 
    }
    ?>
    

  2. #2
    User
    Data Registrazione
    Oct 2011
    Località
    Moncalieri
    Messaggi
    49
    Soluzione trovata da solo, siccome può interessare ad altri posto la soluzione.

    L'errore era nella "click function" che selezionava solo il primo degli elementi. La soluzione è stata aggiungere alla select jQuery la specifica "children". Di seguito posto nuovamente il codice jQuery che effettua la chiamata. Lo posto integralmente per aiutare eventuali neofiti.

    Codice:
    <script type="text/javascript">
    jQuery(document).ready(function() {
    	$('#indiceRaccolte > li').click(function(){
    		//prendiamo il valore del nostro campo input utilizzando la funzione child (perché ci sono più input)
    		var inputValue = $(this).children().val();
    		//Richiesta ad un file al quale inviamo in POST il parametro value contenente il valore del nostro campo input
    		var richiesta = $.ajax({
    			url: "php/indice_raccolte.php",
    			type: "POST",
    			data: {value : inputValue},
    			dataType: "html",
    			});
    		// Funzione che restituisce la risposta del nostro script se la nostra richiesta Ajax avrà esito positivo
    		richiesta.done(function(data) {
    			$("#indicePoesie").html(data);
    		});
    	});
    });
    </script>

  3. #3
    Moderatore L'avatar di Ultima
    Data Registrazione
    Jan 2013
    Località
    Senigallia
    Messaggi
    772
    Aggiungi Ultima su Facebook
    La soluzione è stata utilizzare $(this) non children.
    E poi non utilizzate un input type submit, che non serve a nulla. Potevi utilizzare tranquillamente un <a> con un data-value="valore" e recuperare tale valore:

    $('li a').click(function(event) {
    var value = $(this).attr('data-value');
    // continuo dello script
    event.preventDefault();
    });

    era di gran lunga più semplice
    MODWordpress
    Senior Web Developer to http://www.canenero.com - https://www.stefanopascazi.com
    Magento Specialist - WP Addicted (e Netflix dipendente XD )

+ Rispondi alla Discussione

Tag per Questa Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.