Discussion :

[sebastien4444]

Bonjour,

Voilà je cherche à faire quelque chose qui me parait simple mais je me prends vraiment le chou dessus
Je tiens à préciser que mon exemple va paraître absurde question fonctionnalité, mais c'est juste pour simplifier ma question.

J'ai une page web avec une liste de checkbox. Au clic sur un élément de la page, je voudrai afficher la liste des checkbox cochées dans une <div>, tout cela en ajax.
Je fais donc comme cela :

Code html :

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
<div id="clique"><h1>CLIQUE</h1></div>
<form>
<input type=checkbox" name="filtre" value="a">
<input type=checkbox" name="filtre" value="b">
<input type=checkbox" name="filtre" value="c">
<input type=checkbox" name="filtre" value="d">
</form>
<div id="affiche"></div>
 
<script>
 
$(#clique").click(function(event) {
var valeurs = [];
$('input:checked[name=filtre]').each(function() {
valeurs.push($(this).val());
});
afficheCheckbox(valeurs);
});
 
function afficheCheckbox(v){
var jqxhr = $.ajax({
type: 'post',
url: 'charge_checkbox.php',
dataType: 'json',
contentType: 'application/json',
data: v
})
.done(function(response, textStatus, jqxhr) {
$("#affiche").html(response);
})
}

En gros, je veux passer un tableau non-associatif à un fichier php via ajax, afin d'effectuer des traitements dans celui-ci et de renvoyer du html que j'afficherai dans ma page.
Le problème c'est que je ne sais pas comment exploiter côté php ce que j'envois côté JS (un tableau non-associatif).
Je me doute que je dois utiliser $_POST, mais $_POST de quoi ?
Avec la methode GET, j'avais des noms de variables à récupérer du genre :

Code :

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

1
2
3
4
5
6
 
...
type: 'get',
url: 'charge_checkbox.php',
dataType: 'html',
data: 'v='+v

Et je récupérai un $_GET['v']. Mais là...

Merci de votre aide !!!

[NoSmoking]

Bonjour,
en regardant rapidement il y a au moins 2 choses qui interpellent

Code HTML-JS mal formé, manque des ".

Code html :

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

<input type=checkbox" name="filtre" value="a">

ou là encore

Code :

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

$(#clique ").click(function(event) {

Code JS tu récupères la variable v où dans ton bout de code, re indenté et corrigé pour plus de lisibilité

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
$("#clique ").click(function(event) {
var valeurs = []; $('input:checked[name=filtre]').each(function() {
  valeurs.push($(this).val());
}); afficheCheckbox(valeurs);
});
 
function afficheCheckbox(v) {
  var jqxhr = $.ajax({
    type: 'post',
    url: 'charge_checkbox.php',
    dataType: 'json',
    contentType: 'application/json',
    data: v
  }).done(function(response, textStatus, jqxhr) {
    $("#affiche").html(response);
  })
}

Tout ceci est donc à corriger avant de continuer quoique ce soit !

[sebastien4444]

Merci de ta réponse.

Oui désolé pour les fautes de syntaxe, mon pc de dev n'accède pas à internet et j'ai un peu recopié à la va-vite pour l'exemple, mais je te confirme qu'il n'y a pas d'erreur de ce type dans mon code.

En fait ce que je cherche, c'est ce que je dois mettre dans mon code php pour récupérer mon tableau contenant mes checkbox sélectionnées (que j'envois via ajax), afin de les afficher dans ma page.

Fichier "charge_checkbox.php"

Code php :

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

1
2
3
4
5
6
7
8
9
10
<?php
$myTab = ???
$myTabSize = sizeof($myTab);
$retourHtml = "<p>";
for($i=0 ; $i<$myTabSize ; $i++){
    $retourHtml .= $myTab[$i]."<br>";
}
$retourHtml .= "</p>";
echo $retourHtml;
?>

[Toufik83]

Salut,
si vous me permettez d'intervenir, dans Ajax si tu modifies

Code :

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

 data:v

en

Code :

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

data:{donnee:v}

puis en php tu mets

Code php :

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

$myTab = $_POST["donnee"]

normalement ça devrait fonctionner.

Ajoute aussi .fail() dans ajax pour voir si y a des erreurs dans le fichier php

Code :

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

1
2
3
4
5
6
7
8
9
10
 
function afficheCheckbox(v) {
  var jqxhr = $.ajax({
    ....,
    data:{donnee: v}
  }).done(function(response, textStatus, jqxhr) {
    $("#affiche").html(response);
  }).fail(function(err){
    alert("Erreur ajax :"+err.responseText);
  });

[sebastien4444]

Bonjour Toufik83,

J'ai essayé mais ça ne fonctionne pas. J'obtiens "500 - Erreur interne au serveur - La ressource que vous recherchez présente un problème, elle ne peut donc être affichée".
J'ai donc :
index.php

Code HTML :

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
<div id="clique"><h1>CLIQUE</h1></div>
<form>
<input type="checkbox" name="filtre" value="a">
<input type="checkbox" name="filtre" value="b">
<input type="checkbox" name="filtre" value="c">
<input type="checkbox" name="filtre" value="d">
</form>
<div id="affiche"></div>
 
<script>
$("#clique ").click(function(event) {
    var valeurs = []; $('input:checked[name=filtre]').each(function() {
        valeurs.push($(this).val());
    }); 
    afficheCheckbox(valeurs);
});
 
function afficheCheckbox(tab) {
    var jqxhr = $.ajax({
        type: 'post',
        url: 'charge_checkbox.php',
        dataType: 'json',
        contentType: 'application/json',
        data:{donnees:tab}
    })
    .done(function(response, textStatus, jqxhr) {
        $("#affiche").html(response);
    })
    .fail(function(err){
        alert("Erreur ajax :"+err.responseText);
    });
}

et,
charge_checkbox.php

Code PHP :

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

1
2
3
4
5
6
7
8
9
10
 
<?php
$myTab = $_POST['donnees'];
$myTabSize = sizeof($myTab);
$retourHtml = "<p>";
for($i=0 ; $i<$myTabSize ; $i++){
    $retourHtml .= $myTab[$i]."<br>";
}
echo $retourHtml."</p>";
?>

A noter que même en ne faisant qu'un "echo $_POST['donnees'][0]" dans mon fichier php, j'ai la même erreur.

[Toufik83]

le problème est dans dataType:"json" et contentType: 'application/json', enlève ces deux lignes d'ajax et tout fonctionnera comme il le faut.

Si tu veux le faire en "json", dans ce cas la fonction jQuery et le fichier php doivent être ainsi

Code jQuery :

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
 
function afficheCheckbox(tab) {
    var jqxhr = $.ajax({
        type: 'post',
        url: 'charge_checkbox.php',
	dataType: 'json',
        data:{donnees:tab}
    })
    .done(function(response, textStatus, jqxhr) {
		$('#affiche').html('');
		$(response).each(function(k,v){
			$('#affiche').append("<p>"+v+"</p>");
		});
    })
    .fail(function(err){
        alert("Erreur ajax :"+err.responseText);
    });
}

et le fichier php

Code php :

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

1
2
3
4
5
6
7
8
9
10
 
<?php
$retour=[];
$myTab = $_POST['donnees'];
$myTabSize = sizeof($myTab);
for($i=0 ; $i<$myTabSize ; $i++){
    $retour[] = $myTab[$i];
}
echo json_encode($retour);
?>

j'ai testé le code.

[sebastien4444]

Super, merci beaucoup !

En fait je pensais que l'on ne pouvais passer un tableau qu'en utilisant le format json et n'étant pas familier avec ça, j'ai fait un peu n'importe quoi en regardant à droite à gauche sur internet

[Toufik83]

Si le souci est résolu , je t'invite d'appuyer sur le bouton en bas de la page.