jquery click su selettori uguali

[torrone]

ho una lista di stanze, e per ognuna effettua una chiamata ajax.
il problema è che per ogni stanza ho questo codice html

<form name="testAjax" action="">
<input type="hidden" value="1121" name="id_elemento" id="id_elemento" />


<input type="text" value="1121" name="prova" id="prova" /></p>


<input type="button" value="Invia" id="test" /></p>
</form>
<div id="risultato_"></div>

e codice javascript

jQuery(document).ready(function() {
  jQuery("#test").click(function(){
    var prova = jQuery("#prova").val();
    var id_elemento = jQuery("#id_elemento").val();
    jQuery.ajax({
      type: "POST",
      url: "http://localhost/HotelSite/provaAjax.php",
      data: "prova=" + prova,
      dataType: "html",
      success: function(msg)
      {
        jQuery("#risultato_"+id_elemento).html(msg);
      },
      error: function()
      {
        alert("Errore Ajax");
      }
    });
  });
}); 

jquery così funziona solo con la prima stanza e non con quelle successive, molto probabilmente perchè tutte le stanze hanno lo stesso

<input type="button" value="Invia" id="test" />

direte, qual'è il problema? basterebbe far così

<input type="button" value="Invia" id="test_" />

il mio problema è, come recupero poi test_ nel codice javascript?

[corrado22]

forse il jQuery(document).ready(function() {
non va al caso tuo perchè lavora su un unico id "test"

jQuery("#test").click(function()

oppure invece di ricercare l'elemento tramite id lo puoi ricercare tramite classe
dove puo' essere anche non univoca

[torrone]

ma metti caso che ho nella pagina html tre form così

<form name="testAjax" action="">
<input type="hidden" value="1" name="id_elemento" id="id_elemento_1" />


<input type="text" value="" name="prova" id="prova_1" /></p>


<input type="button" value="Invia" id="test_1" /></p>
</form>
<div id="risultato_1"></div>



<form name="testAjax" action="">
<input type="hidden" value="2" name="id_elemento" id="id_elemento_2" />


<input type="text" value="" name="prova" id="prova_2" /></p>


<input type="button" value="Invia" id="test_2" /></p>
</form>
<div id="risultato_2"></div>



<form name="testAjax" action="">
<input type="hidden" value="3" name="id_elemento" id="id_elemento_3" />


<input type="text" value="" name="prova" id="prova_3" /></p>


<input type="button" value="Invia" id="test_3" /></p>
</form>
<div id="risultato_3"></div>

come potrei sistemare il codice javascript?

[cavicchiandrea]

Originariamente inviato da torrone
ho una lista di stanze, e per ognuna effettua una chiamata ajax.
il problema è che per ogni stanza ho questo codice html

Premesso che se hai massimo una decina di stanze fare x chiamate ajax è anche ammissibile se sono di più e il sito è frequentato potresti avere problemi lato server, visto che generi i form e gli elementi lato server associa il click direttamente nel pulsante <input type="button" value="Invia" id="test_1" onclick="AzioneAjax(idelemento)" /> e crei una funzione ajax generica volerlo associare al caricamento è molto più complesso oppure devi creare la funzione ajax come gli altri elementi lato server

P.S. volendo potresti togliere i form e fare tutto con i href passando l'id

[torrone]

è giusto così ? sembrerebbe funzionare

ho elimitato

jQuery(document).ready(function() {
jQuery(".ricalcoloTariffe").click(function(){ 

e ho aggiunto onclick al form

<input type=\"button\" class=\"test_\" onclick=\"funzioneTest();\" value=\"Calcola tariffe\" />

e al posto delle righe elimate ho aggiunto la funzione funzioneTest con risultato finale

function funzioneTest(id)
    var prova = jQuery("#prova"+id).val();
    var id_elemento = jQuery("#id_elemento"+id).val();
    jQuery.ajax({
      type: "POST",
      url: "provaAjax.php",
      data: "prova=" + prova,
      dataType: "html",
      success: function(msg)
      {
        jQuery("#risultato_"+id_elemento).html(msg);
      },
      error: function()
      {
        alert("Errore Ajax");
      }
    });
} 

[torrone]

Originariamente inviato da cavicchiandrea
Premesso che se hai massimo una decina di stanze fare x chiamate ajax è anche ammissibile se sono di più e il sito è frequentato potresti avere problemi lato server, visto che generi i form e gli elementi lato server associa il click direttamente nel pulsante <input type="button" value="Invia" id="test_1" onclick="AzioneAjax(idelemento)" /> e crei una funzione ajax generica volerlo associare al caricamento è molto più complesso oppure devi creare la funzione ajax come gli altri elementi lato server

P.S. volendo potresti togliere i form e fare tutto con i href passando l'id

mentre hai postato te, stavo scrivendo la soluzione che avevo trovato...

[darkonme]

Una cosa di questo tipo potrebbe andare?

jQuery(document).ready(function() {
                jQuery('form[name="testAjax"]').each(function(){
                    jQuery(this).children("#test").click(function(){
                        var prova = jQuery(this).children("#prova").val();
                        var id_elemento = jQuery(this).children("#id_elemento").val();
                        jQuery.ajax({
                            type: "POST",
                            url: "http://localhost/HotelSite/provaAjax.php",
                            data: "prova=" + prova,
                            dataType: "html",
                            success: function(msg)
                            {
                                jQuery("#risultato_"+id_elemento).html(msg);
                            },
                            error: function()
                            {
                                alert("Errore Ajax");
                            }
                        });
                    });
                });
            }); 

In origine il problema penso fosse dovuto alla chiamata click(), che veniva eseguita solo sul primo elemento trovato. In questo modo la funzione lavora su ogni form con nome testAjax che trova, e di conseguenza, usando children, lavora sui nodi figlio.

[torrone]

questo problema era un pò collegato all'altra discussione

per cui ho adottato l'ultima soluzione che ho posta in quanto dopo che ho effettuato il calcolo e non riscontro errori (vedi altra discussione) eseguo anche questo javascript

in poche parole

// codice relativo all'altra discussione
var defaultBoxValues = new Array();

function calcolo(select, idclasse, max_persone){

     var selName = jQuery(select).attr('name');

     var val1 = parseInt(jQuery('#max_adults_'+idclasse).val());
     var val2 = parseInt(jQuery('#max_children_'+idclasse).val());

     var tot = val1 + val2;

     if (tot > max_persone) {
            
          if (defaultBoxValues[selName]!=undefined){

               jQuery(select).val(defaultBoxValues[selName]);

          } else {

               if (selName == 'A') {

                    jQuery(select).val(1);

               } else if(selName == 'B') {

                    jQuery(select).val(0);

               } 

     }

} else {

     // codice relativo a questa discussione

     defaultBoxValues[selName] = parseInt(jQuery(select).val());

     var prova = jQuery("#prova_"+idclasse).val();

     var id_elemento = jQuery("#id_elemento_"+idclasse).val();
     jQuery.ajax({
        type: "POST",
          url: "provaAjax.php",
          data: "prova=" + prova + "&id_elemento=" + id_elemento,
          dataType: "html",
          success: function(msg)
          {
            jQuery("#risultato_"+id_elemento).html(msg);
          },
          error: function()
          {
            alert("Errore Ajax");
          }
        });

    }

    } 

spero di non aver fatto errori mentre lo modificavo qui