inserire dati in tabella con ajax (ciclo foreach)

salve a tutti!
il mio problema è questo: ho uno script che mi estrae (con ciclo foreach) una serie di foto profilo di utenti con affianco un form con dei campi nascosti che contengono come value gli id e i nomi di ciascun utente estratto. Al click in un bottone , tramite un codice ajax , dovrebbero salvarsi in una tabella tutti i campi nascosti (senza il bisogno di ricaricare la pagina ovviamente visto che c'è ajax).
Il problema è che nella tabella purtroppo si salva soltanto il primo dei risultati del ciclo e se clicco negli altri bottoni (affiancati ad altre immagini profilo) non succede niente. Mi sono fatto un'idea del motivo e credo che centri il fatto che il codice ajax preleva i dati dei campi che hanno un certo id ma quest'ultimo è sempre uguale , in ogni form affiancato ad ogni diverso risultato estratto dal ciclo ...
Mi spiego meglio postando il codice

Codice PHP:

---

foreach ($friends["data"] as $value) {

echo 'foto prof di'. $value["name"] .'<a href="http://www.facebook.com/' . $value["id"] . '"><img src="https://graph.facebook.com/' . $value["id"] . '/picture"/>g</a>
<form name="add_friend">
<input type="hidden" name="mio_id" id="mio_id" value="'. $userInfo["id"] .'">
<input type="hidden" name="id_friend" id="id_friend" value="'. $value["id"] .'">
<input type="hidden" name="name_friend" id="name_friend" value="'. $value["name"] .'">
<input type="button" id="submit" value="Invia i dati">
</form>

<div id="risultato"></div>';



}


---

questa è la parte php che contiene le istruzioni per estrarre le img profilo degli utenti e il form con i vari campi...come dovrei fare per ovviare il problema degli id sempre uguali?
Grazie in anticipo

Beh, in effetti quel ciclo crea #$friends['data'] tag con id uguali....

Per ovviare, potresti fare una cosa come:

Codice PHP:

---

$i=0;
foreach ($friends["data"] as $value) {
echo 'foto prof di'. $value["name"] .'<a href="http://www.facebook.com/' . $value["id"] . '"><img src="https://graph.facebook.com/' . $value["id"] . '/picture"/>g</a>
<form name="add_friend">
<input type="hidden" name="mio_id" id="mio_id'.$i.'" value="'. $userInfo["id"] .'">
<input type="hidden" name="id_friend" id="id_friend'.$i.'" value="'. $value["id"] .'">
<input type="hidden" name="name_friend" id="name_friend'.$i.'" value="'. $value["name"] .'">
<input type="button" id="submit'.$i++.'" value="Invia i dati">
</form>
<div id="risultato"></div>';
}


---

Ciao!

ok, avevo pensato a una cosa simile...ma andrà cambiato qualcossa anche nel codice javascript giusto?
questo:

Codice:

---

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

  //al click sul bottone del form
  $("#submit").click(function(){

    //associo variabili
    var mio_id = $("#mio_id").val();
    var id_friend = $("#id_friend").val();
    var name_friend = $("#name_friend").val();
  //chiamata ajax
    $.ajax({

    //imposto il tipo di invio dati (GET O POST)
      type: "POST",

      //Dove devo inviare i dati recuperati dal form?
      url: "risultato_aggiunta.php",

      //Quali dati devo inviare?
      data: "mio_id=" + mio_id + "&id_friend=" + id_friend + "&name_friend=" + name_friend,
      dataType: "html",

      //Inizio visualizzazione errori
      success: function(msg)
      {
        $("#risultato").html(msg); // messaggio di avvenuta aggiunta valori al db (preso dal file risultato_aggiunta.php) potete impostare anche un alert("Aggiunto, grazie!");
      },
      error: function()
      {
        alert("Chiamata fallita, si prega di riprovare..."); //sempre meglio impostare una callback in caso di fallimento
      }
    });
  });
});
</script>

---

Ovviamente....

Devi prelevare non solo il valore di un input, ma tutti gli input!
(qui prelevi i dati dagli input)

Codice:

---

//associo variabili
    var mio_id = $("#mio_id").val();
    var id_friend = $("#id_friend").val();
    var name_friend = $("#name_friend").val();

---

...E quindi, accodare a "data", non solo i valori di un input, ma di tutti quelli immessi. Ovviamente, lato PHP, la pagina "risultato_aggiunta.php" deve supportare più dati in ingresso... e i loro nomi...

Ciao!

ok ma quelle righe che mi hai postato sono già parte del mio codice ajax... forse non ho capito bene ma io intendevo chiedere se oltre alla parte php devo cambiare altro...siccome lo javascript non lo conosco vorrei chiedere qualche precisazione in più visto che non saprei orientarmi.
nello script che invece invia i dati al server (in php) mi posso arrangiare e comunque penso che non servano cambiamenti...il php era questo :

Codice PHP:

---

<?php
include "../include/dbconfig.php";
var_dump($userInfo["id"]);


$mio_id = $_POST['mio_id'];
$id_friend = $_POST['id_friend'];
$name_friend = $_POST['name_friend'];
$sql = "INSERT INTO my_friends_selected (mio_id,id_friend_selected,name_friend_selected) VALUES ('$mio_id','$id_friend','$name_friend')";

if (@mysql_query($sql,$conn))

{ echo 'ok'; }
else { echo 'no'; }
?>

---

credo appunto che servano cambiamenti solo nella parte in javascript (che io non conosco purtroppo..)

Citazione:

---

ma quelle righe che mi hai postato sono già parte del mio codice ajax

---

Sì appunto. Come ho scritto sopra, quelle prelevano i dati, ma non tutti!
Un modo intelligente per prelevar tutti i dati, visto che usi jquery, potrebbe essere:

Codice:

---

... data: $('form').serialize() ...

---

Lato PHP, con (faccio il discorso per $mio_id, ma vale anche per $id_friend, $name_friend):

Codice PHP:

---

$mio_id = $_POST['mio_id'];


---

Prelevi l'id, ma solo uno!. Dovresti far una cosa come:

Codice PHP:

---

$mio_id[$i] = $_POST['mio_id'.$i];


---

Dove $i va da 0 a N-1. Quindi rimane da sistemare la query, per far inserire più righe.

Ciao!

ciao...
grazie dell'aiuto e chiedo scusa se sembra che mi voglia far preparare la roba pronta.
Ma jquery sul serio non lo conosco...potresti spiegarmi meglio dove e come mettere quella funzione che mi hai scritto?
per il php e la query mi posso arrangiare, il problema è ajax...

Invece di

Codice:

---

data: "mio_id=" + mio_id + "&id_friend=" + id_friend + "&name_friend=" + name_friend,

---

Metti quello che ti ho scritto

Ciao!

ok, non riesco a farlo andare!
il codice ajax è diventato

Codice:

---

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

  //al click sul bottone del form
  $("#submit").click(function(){

    //associo variabili
    var mio_id = $("#mio_id").val();
    var id_friend = $("#id_friend").val();
    var name_friend = $("#name_friend").val();
  //chiamata ajax
    $.ajax({

    //imposto il tipo di invio dati (GET O POST)
      type: "POST",

      //Dove devo inviare i dati recuperati dal form?
      url: "risultato_aggiunta.php",

      //Quali dati devo inviare?
      data: $('form').serialize(),
      dataType: "html",

      //Inizio visualizzazione errori
      success: function(msg)
      {
        $("#risultato").html(msg); // messaggio di avvenuta aggiunta valori al db (preso dal file risultato_aggiunta.php) potete impostare anche un alert("Aggiunto, grazie!");
      },
      error: function()
      {
        alert("Chiamata fallita, si prega di riprovare..."); //sempre meglio impostare una callback in caso di fallimento
      }
    });
  });
});
</script>

---

il codice che inserisce (cioè risultato_aggiunta.php) è

Codice PHP:

---

<?php
include "../include/dbconfig.php";
var_dump($userInfo["id"]);


$mio_id[$i] = $_POST['mio_id'.$i];
$id_friend[$i] = $_POST['id_friend'.$i];
$name_friend[$i] = $_POST['name_friend'.$i];
$sql = "INSERT INTO my_friends_selected (mio_id,id_friend_selected,name_friend_selected) VALUES ('$mio_id[$i]','$id_friend[$i]','$name_friend[$i]')";

if (@mysql_query($sql,$conn))

{ echo 'ok'; }
else { echo 'no'; }
?>

---

e il ciclo foreach che estrae i dati

Codice PHP:

---

$i=0;
foreach ($friends["data"] as $value) {
include "ajax/script_asincrono.php";
echo 'foto prof di'. $value["name"] .'<a href="http://www.facebook.com/' . $value["id"] . '"><img src="https://graph.facebook.com/' . $value["id"] . '/picture"/>g</a>
<form id="add_friend" name="add_friend">
<input type="hidden" name="mio_id" id="mio_id'.$i.'" value="'. $userInfo["id"] .'">
<input type="hidden" name="id_friend" id="id_friend'.$i.'" value="'. $value["id"] .'">
<input type="hidden" name="name_friend" id="name_friend'.$i.'" value="'. $value["name"] .'">
<input type="button" id="submit'.$i++.'" value="Invia i dati">
</form>
<div id="risultato"></div>';
}


---

credo che il problema sia sempre nella parte javascript, visto che con il ciclo foreach non ci sono problemi (guardando il sorgente vedo che i vari input sono incrementati di 1 ), se non fosse questo rimane la query ma non mi sembrano esserci problemi

Aspetta....

Ho appena visto che ci sono più form (io pensavo fosse soltanto un form con più input hidden).
Quindi, alla pressione di invia dati, si deve aggiornare soltanto il (un) form, e non gli altri! (scusami, ma non mi ero accorto di questo).

Quindi, la parte PHP andava bene come era...

Leggendo meglio lo script, queste righe:

Codice PHP:

---

<form id="add_friend" name="add_friend">
<div id="risultato"></div>


---

Che viene replicata più volte... e anche qui l'id dovrebbe andar numerato (con $i).


Sicuro che

Codice PHP:

---

include "ajax/script_asincrono.php";


---

va dentro il foreach?

In definitiva, il tuo script lo farei:

Codice PHP:

---

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function invia(numero)
{
//chiamata ajax
$.ajax({

//imposto il tipo di invio dati (GET O POST)
type: "POST",

//Dove devo inviare i dati recuperati dal form?
url: "risultato_aggiunta.php",

//Quali dati devo inviare?
data: $('form [id="add_friend'+numero+'"]').serialize(),
dataType: "html",

//Inizio visualizzazione errori
success: function(msg)
{
$("#risultato"+numero).html(msg); // messaggio di avvenuta aggiunta valori al db (preso dal file risultato_aggiunta.php) potete impostare anche un alert("Aggiunto, grazie!");
},
error: function()
{
alert("Chiamata fallita, si prega di riprovare..."); //sempre meglio impostare una callback in caso di fallimento
}
});
return false; //questo serve per far in modo che il form non venga "inviato" nel modo tradizionale (aggiornando la pagina)
}
</script>

<?php
$i=0;
foreach ($friends["data"] as $value) {
include "ajax/script_asincrono.php";
echo 'foto prof di'. $value["name"] .'<a href="http://www.facebook.com/' . $value["id"] . '"><img src="https://graph.facebook.com/' . $value["id"] . '/picture"/>g</a>
<form id="add_friend'.$i.'" name="add_friend'.$i.'" onSubmit="return invia(\''.$i.'\')">
<input type="hidden" name="mio_id" id="mio_id'.$i.'" value="'. $userInfo["id"] .'">
<input type="hidden" name="id_friend" id="id_friend'.$i.'" value="'. $value["id"] .'">
<input type="hidden" name="name_friend" id="name_friend'.$i.'" value="'. $value["name"] .'">
<input type="button" id="submit'.$i.'" value="Invia i dati">
</form>
<div id="risultato'.$i++.'"></div>';
}
?>

---

Se non funziona (molto probabile), potresti indicarmi la pagina di prova? (se stai lavorando su altervista).
Anche perché è da tempo che non scrivio più js/php, quindi è molto probabile che ci siano errori.

Altra cosa (secondaria): ma per aggiugnere un amico, perché devi inviare 3 parametri? Non è sufficiente "id_friend"? "mio_id" lo ricavi da PHP, perché l'utente è loggato. "name_friend" si ricava comunque conoscendo "id_friend", e comunque non credo sia necessario per aggiungere l'amico... no?

Ciao!

come prevedevi non funziona...
per quanto riguarda il sito , quella pagina è visibile solo se ci si logga con l'account facebook...upster.it/vedi/amici.php (bisogna andare su profilo->amici)
Per quanto riguarda i campi "in più" è perchè mi trovo meglio ad estrarre tutto...non so spiegare il perchè, sarà abitudine :)
Grazie

Ok. Per vedere l'errore, se usi firefox, installa "firebug". Una volta installato, attiva la "console", e vedi dove da errori...

Se usi chrome, c'é la console javascript sotto "strumenti". (io mi trovo meglio con firebug).

Ciao!

ok ho installato firebug...nella pagina però non mi da errori quando clicco sull'apposito pulsante...
qualche idea?

Hai abilitato la console?

Se sì, prova ad abilitare la scheda "net", e vedi se viene inviata correttamente la richiesta ajax. Se sì, guarda anche con che parametri...

Ciao!

ho visto che non mi da errori...per i parametri non ho capito, dove devo guardare?

Il pannello NET. Come "Console" va attivato...

Ciao!

ah , sì sì l'ho attivato..mi dice che praticamente il ciclo freach è riuscito a estrarre tutte le foto profilo degli amici
Dovrebbe dirmi altro?

Se clicchi su invia dati dovrebbe partire la richiesta ajax.

Ciao!

l'ho fatto... Ma non vedo niente di strano... Comunque riguardando il codice sono sempre più convinto che l'errore sia in quella riga di javascript che passa i dati al php usando quel serialize()

Ho provato.

Io ho usato l'evento "onsubmit", ma mi son appena accorto che nel form non c'é il tasto "submit", ma "button".

Inoltre vero: l'errore è nel "recupero" dei dati.

Prova così:

Codice PHP:

---

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function invia(numero)
{
//chiamata ajax
$.ajax({

//imposto il tipo di invio dati (GET O POST)
type: "POST",

//Dove devo inviare i dati recuperati dal form?
url: "risultato_aggiunta.php",

//Quali dati devo inviare?
data: $('#add_friend'+numero).serialize(),
dataType: "html",

//Inizio visualizzazione errori
success: function(msg)
{
$("#risultato"+numero).html(msg); // messaggio di avvenuta aggiunta valori al db (preso dal file risultato_aggiunta.php) potete impostare anche un alert("Aggiunto, grazie!");
},
error: function()
{
alert("Chiamata fallita, si prega di riprovare..."); //sempre meglio impostare una callback in caso di fallimento
}
});
return false; //questo serve per far in modo che il form non venga "inviato" nel modo tradizionale (aggiornando la pagina)
}
</script>
<?php
$i=0;
foreach ($friends["data"] as $value) {
include "ajax/script_asincrono.php";
echo 'foto prof di'. $value["name"] .'<a href="http://www.facebook.com/' . $value["id"] . '"><img src="https://graph.facebook.com/' . $value["id"] . '/picture"/>g</a>
<form id="add_friend'.$i.'" name="add_friend'.$i.'" onSubmit="return invia(\''.$i.'\')">
<input type="hidden" name="mio_id" id="mio_id'.$i.'" value="'. $userInfo["id"] .'">
<input type="hidden" name="id_friend" id="id_friend'.$i.'" value="'. $value["id"] .'">
<input type="hidden" name="name_friend" id="name_friend'.$i.'" value="'. $value["name"] .'">
<input type="submit" id="submit'.$i.'" value="Invia i dati">
</form>
<div id="risultato'.$i++.'"></div>';
}
?>

---

Prova anche a guardare da firebug. Potrebbe aiutarti molto in futuro!

Ciao!

terrò sicuramente conto del consiglio, per ora non posso fare altro che ringraziare per il prezioso aiuto visto che il problema è risolto :)