[AJAX] Ajax et plusieurs radios générés par MySQL

**Ryu007** · 24/03/2007, 13h17

Bonjour à tous,

Je m'amuse depuis ce matin à faire un peu de AJAX.
Outre le fait que j'amuse plutot pas mal (toujours étonnant de voir le résultat), je bute un peu sur un problème.

j'ai écrit ça actuellement (dans <head>) :
Modifié.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<script type="text/javascript">
// <![CDATA[
function getXhr(){
  var xhr = null; 
 
  if (window.XMLHttpRequest) { // Firefox et autres
    xhr = new XMLHttpRequest(); 
  } else if (window.ActiveXObject) { // Internet Explorer 
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
  } else { // XMLHttpRequest non supporté par le navigateur 
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest !"); 
    xhr = false; 
  } 
 
  return xhr;
}
 
function add2cart(products_id) {
  var xhr = getXhr();
  var option = '';
  var ajax_cart = document.getElementById('ajax_cart');
  var quantity = document.getElementById('quantity').value;
  quantity = (parseInt(quantity) == quantity) ? quantity : 1;
 
  ajax_cart.style.display = 'block';
  ajax_cart.style.position = 'absolute';
  ajax_cart.style.background = 'white';
  ajax_cart.style.padding = '1em';
  ajax_cart.style.width = '400px';
  ajax_cart.style.height = '60px';
  ajax_cart.style.border = '1px solid #ccc';
  ajax_cart.innerHTML = '<p class="center"><?php echo tep_image(DIR_WS_ICONS . 'loading.gif', 'Chargement', '', '', 'class="noBorder"') . ' Chargement ...'; ?></p>';
 
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
	  ajax_cart.innerHTML = xhr.responseText;
	}
  }
 
  xhr.open("POST", "action.php", true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 
  for (var i = 0; i < document.getElementById('add2cart').elements.length; i++) {
    if(document.getElementById('add2cart').elements[i].type == 'radio' && document.getElementById('add2cart').elements[i].checked) {
	  option += "&id["+document.getElementById('add2cart').elements[i].name+"]=" + document.getElementById('add2cart').elements[i].value;
	}
  }
 
  xhr.send("products_id="+products_id+"&quantity="+quantity+option);
 
  // Fermeture du layer automatique (10000 = 10 sec)
  setTimeout("ajaxCartClose()", 10000);
 
  return false;
}
 
function ajaxCartClose() {
  if (document.getElementById('ajax_cart')) {
    document.getElementById('ajax_cart').style.display = 'none';
  }
}
// ]]>
</script>

Seulement voilà, j'arrive bien à ajouter à mon panier les produits (grace au onsubmit de mon formulaire) mais je tiens pas compte des options.
Je fais passer les options via $_POST : id[5]=152&id[4]=123
je génére mes radios via un while depuis la base de donnée ce qui donne ceci dans le code source :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<fieldset id="options">
  <legend>Options disponibles</legend>
  <p><strong>Option :</strong></p>
<p><input type="radio" name="id[5]" value="152" checked="checked" id="LJHwpg" /> <label for="LJHwpg">Offre compl&egrave;te</label> </p>
<p><input type="radio" name="id[5]" value="54" id="yVZbfy" /> <label for="yVZbfy">Chevet seul</label> <span class="price_attribute">(148.00<abbr title="Euros">EUR</abbr>)</span></p>
 
<p><input type="radio" name="id[5]" value="153" id="ktgTsc" /> <label for="ktgTsc">Colonne / &eacute;tag&egrave;re</label> <span class="price_attribute">(370.00<abbr title="Euros">EUR</abbr>)</span></p>
<p><input type="radio" name="id[5]" value="154" id="jpqvDb" /> <label for="jpqvDb">Armoire / Penderie</label> <span class="price_attribute">(750.00<abbr title="Euros">EUR</abbr>)</span></p>
<p><input type="radio" name="id[5]" value="155" id="AupnrO" /> <label for="AupnrO">Paravent</label> <span class="price_attribute">(298.00<abbr title="Euros">EUR</abbr>)</span></p>
 
<p><input type="radio" name="id[5]" value="156" id="IVSVhv" /> <label for="IVSVhv">Lit seul (L140 x P190)</label> <span class="price_attribute">(598.00<abbr title="Euros">EUR</abbr>)</span></p>
<p><input type="radio" name="id[5]" value="157" id="ZYiJgv" /> <label for="ZYiJgv">Lit seul (L160 x P200)</label> <span class="price_attribute">(660.00<abbr title="Euros">EUR</abbr>)</span></p>
  <div class="clear noHeight">&nbsp;</div>
  <p><strong>Teinte :</strong></p>
 
<p><input type="radio" name="id[7]" value="142" checked="checked" id="LLqPJq" /> <label for="LLqPJq">Naturelle</label> </p>
<p><input type="radio" name="id[7]" value="4" id="VTqMJW" /> <label for="VTqMJW">Marron fonc&eacute;</label> </p>
  <div class="clear noHeight">&nbsp;</div>
 
</fieldset>

je dois récupérer dans le head les champs radio checked,
Avec name et value pour faire ensuite passer le paramètre dans xhr.send()
Mais je sais pas comment faire.
Impossible de faire une boucle là ?

c'est là que ça commence à devenir compliqué pour moi ...
Quelqu'un aurait la délicatesse de m'aider, ça serait sympa

P.S : Je refais une recherche on sait jamais.

**Ryu007** · 24/03/2007, 13h40

J'ai ça qui répond parfaitement à ma question, mais ça marche pas ...
C'est lourd à la fin !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
  for (var i = 0; i < document.forms[1].elements.length; i++) {
    if(document.forms[1].elements[i].type == 'radio' && document.forms[1].elements[i].checked) {
	  option += "&id["+document.forms[1].elements[i].name+"]=" + document.forms[1].elements[i].value;
	}
  }

[Edition] voici ce qui passe en post dans mon url :
products_id=1096&submit=Ajouter+au+panier&quantity=1&id%5B5%5D=152&id%5B7%5D=142

pourtant quand je fais mon var_dump($_POST) du fichier action.php j'ai bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

array(3) { ["products_id"]=>  string(4) "1096" ["quantity"]=>  string(1) "1" ["id"]=>  array(2) { ["id[5"]=>  string(3) "152" ["id[7"]=>  string(3) "142" } }

**Ryu007** · 24/03/2007, 14h07

Ok, j'ai résolu mon histoire.
C'est au niveau de ma boucle.
ça faisait id[id[5]] = 6 au lieu de id[5] = 6
j'avais [ et ] en trop.

Je reste ouvert pour des améliorations.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
  for (var i = 0; i < document.getElementById('add2cart').elements.length; i++) {
    if(document.getElementById('add2cart').elements[i].type == 'radio' && document.getElementById('add2cart').elements[i].checked) {
	  option += "&"+document.getElementById('add2cart').elements[i].name+"=" + document.getElementById('add2cart').elements[i].value;
	}
  }

**Ryu007** · 24/03/2007, 16h50

Rien ne va plus !

Sous IE7 et Firefox 2.0, tout fonctionne.
Mais sous IE6 et en-dessous, j'ai bien mon script qui se met à jour normalement mais ma requete n'est pas "retenue".

C'est-à-dire que l'ajout au panier se fait bien, mais quand je retourne sur mon panier ou que je rajoute un produit, c'est vide ?

Que se passe-t-il ?
C'est vraiment pas simple, finalement ...
ça fait plus de 6 heures que je suis dessus, j'en ai marre !

Merci d'avance,
Cordialement

**Ryu007** · 24/03/2007, 18h57

Ok, apparamment ça ne fonctionne pas avec mes standalones d'IE.
Je travaille actuellement sous vista, ce qui ne m'a pas aidé à arranger les choses.
Aussi, après demande à un ami, ça fonctionne nickel chez lui ?
Je reste septique quand même, c'est farfelue et non logique.
Quelqu'un a-t-il rencontré ces difficultés pour les tests ?

Autre chose, pour egayer ma curiosité, faites-vous passer le paramêtre de session au fichier de traitement ?

[AJAX] Ajax et plusieurs radios générés par MySQL

JavaScript

Discussions similaires

Partager

Partager