Mi spiego meglio
In una pagina php di un sito di ecommerce io devo mostrare gli ordini effettuati dal cliente. Vorrei creare una tabella con una lista dei suoi ordini e per ogni riga vorrei ci fosse un tasto che mi facesse comparire/scomparire, sotto alla riga , i dettagli dell’ordine.
La porzione di codice della pagina php che interessa è questo
<div class="row">
<div class="col-md-10 offset-1 corpoareaclienti" id="corpoareaclienti">
</div>
Che è semplicemente un div vuoto che verrà riempito da una funzione javascript nel momento in cui sulla stessa pagina viene premuto un button “mostra acquisti”.
var mostraacquisti = document.getElementById("mostraacquisti");
mostraacquisti.onclick = getOrders;
GetOrders fa una richiesta ajax alla pagina ordini.php che genera un file xml con i dati degli ordini. Dopodiché richiama la funzione showOrders che serve a stampare la tabella nella pagina php.
function getOrders() {
new Ajax.Request("ordini.php",
{ method: "GET",
onSuccess: showOrders,
onFailure: ajaxFailed,
onException: ajaxFailed }); }
function showOrders(ajax) {
//Crea la tabella degli ordini effettuati
$("#corpoareaclienti").html("<h3 class='text-center'> Elenco degli ordini effettuati</h3>");
var ordini = ajax.responseXML.getElementsByTagName("ordine");
if (ordini.length > 0) {
$("#corpoareaclienti").append("<table class='table text-center' id='ordini'> <thead id='intestazione'><tr id='riga'><th scope='col'>Numero ordine</th><th scope='col'>Data ordine</th><th scope='col'>Prezzo Totale</th><th scope='col'>Dettagli</th></tr></thead><tbody id='tbody'>");
for (var i = 0; i < ordini.length; i++) {
var idordine = ordini[i].getAttribute("idordine");
var data = ordini[i].getElementsByTagName("data")[0].firstChild.nodeValue;
var prezzoTotale = ordini[i].getElementsByTagName("prezzoTotale")[0].firstChild.nodeValue;
$("#tbody").append("<tr id='riga" + i + "'><th scope='row'>" + idordine + "</th><td>" + data + "</td><td>" + prezzoTotale + "€</td><td> <button class='togglebutton' id='button_" + i + "'>Dettagli</button></td>");
dettagliordine(idordine); *****questa funzione è il problema. È all’interno del ciclo perché per ogni ordine vorrei che mi stampasse i dettagli in una“riga nascosta”. Ma … **********
$("#tbody").append("</tbody></table>");
}
} else {
$("#corpoareaclienti").html("<h3 class='text-center'>Non sono presenti ordini </h3><hr class='dividing_element'>");
}
// handle toggle (funzinoe per far comparire/scomparire la riga sotto a quella di cui premiamo il tasto dettagli
$("button.togglebutton").click(function () {
$(this).closest("tr").next().toggle("slow");
});
}
********… il problema è che mi vengono stampate tutte le righe degli ordini e solo successivamente tutte le righe con i dettagli. Quindi mi viene stampato :
Ordine 1
Ordine 2
Ordine 3
dettagliOrdine 1
dettagliOrdine 2
dettagliOrdine 3
e non
Ordine1
dettagliOrdine 1
Ordine 2
dettagliOrdine 2
Ordine 3
dettagliOrdine 3
come vorrei.
La funzione dettagliordine(idordine) è semplicemente un’altra richiesta ajax ad un altro file (ordine.php) che genera l’xml con i dettagli dell’ordine. Quindi.
<ordine idordine="80027">
<prodotto codiceprodotto="1">
<nome> NomeOrologio1</nome>
<descrizione> Descrizione orologio 1</descrizione>
<prezzo> 34</prezzo>
<immagine> or1.jpg</immagine>
<categoria> orologeria</categoria>
</prodotto>
<prodotto codiceprodotto="5">
<nome> Nomeorologio5</nome>
<descrizione> Descrizione 5 orologio</descrizione>
<prezzo> 12</prezzo>
<immagine> or2.jpg</immagine>
<categoria> orologeria</categoria>
</prodotto>
</ordine>
In particolare
function dettagliordine(idordine) {
new Ajax.Request("ordine.php",
{ method: "GET",
parameters: {idordine: idordine},
onSuccess: stampadettagli,
onFailure: ajaxFailed,
onException: ajaxFailed}); }
function stampadettagli(ajax) {
var prodotti = ajax.responseXML.getElementsByTagName("prodotto");
if (prodotti.length > 0)
{
$("#tbody").append("<tr id='orderdetail' style='display:none;'><td colspan=4><h1>Dettagli dell'ordine</h1><hr/>");
for (var j = 0; j < prodotti.length; j++) {
var codiceprodotto = prodotti[j].getAttribute("codiceprodotto");
var nome = prodotti[j].getElementsByTagName("nome")[0].firstChild.nodeValue;
var descrizione = prodotti[j].getAttribute("descrizione");
var prezzo = prodotti[j].getAttribute("prezzo");
var immagine = prodotti[j].getAttribute("immagine");
var categoria = prodotti[j].getAttribute("categoria");
$("#orderdetail").append("<p>codice : " + codiceprodotto + " Nome: " + nome + "g:"+j+" </p> ");
}
$("#tbody").append("</td></tr>");}}
function showDettagliAccount(ajax) {
$("#corpoareaclienti").html("");
var cliente = ajax.responseXML.getElementsByTagName("cliente");
for (var i = 0; i < cliente.length; i++) {
var nome = (cliente[i].getElementsByTagName("nome")[0]).firstChild.nodeValue;
var cognome = (cliente[i].getElementsByTagName("cognome")[0]).firstChild.nodeValue;
var mail = (cliente[i].getElementsByTagName("mail")[0]).firstChild.nodeValue;
$("#corpoareaclienti").html("<h3 class='text-center'> Dettagli account</h3><hr class='dividing_element'>");
$("#corpoareaclienti").append("<h4> Cliente : </h4><p>" + nome + " " + cognome + "</p><h5> Mail : </h5><p>" + mail + "</p>");
$("#corpoareaclienti").append("<button id='eliminautente' class='btn btn-outline-danger' value='" + mail + "'>Elimina account</button>");
var deleteButton = $("#eliminautente");
deleteButton.onclick = eliminaUtente; }}
Non riesco a capire cosa sbaglio. Probailmente è tutto concettualmente sbagliato XD ma non riesco ad uscirne.