Click sur bouton ne marche pas

Version imprimable

Bonsoir
j'ai une boucle qui me crée des boutons, je veux quand je clique sur un bouton j'ajoute une ligne dans mon tableau,
chaque bouton ajout des informations précises

Code:

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
 
<?php
include ("dossier_id.php");
?>	
<script>
function get_parametre(id)
{
alert(id);
	$.ajax({ 
		type : 'POST', 
		url : 'get_parametre.php', 
		data: 'id='+id, 
		success : function(data){
		alert(data);
		}, error : function(XMLHttpRequest, textStatus, errorThrown) { alert(55);  }
	}); 
}
 
</script>
 
 
<section class="container-table">
	<caption class="entete-table">Liste des Paramètres Analyse</caption>
 
	<form id="frm" method="POST" class="formusimple">
	<button type="button"  onclick="foo()">Click Me</button>
		<?php
                $req="SELECT * FROM parametre_analyse  WHERE existe='1' ";
                $res=mysql_query($req);
                while($row=mysql_fetch_array($res))
                { ?>
 
			<input type="submit" value="<?php echo $row['label'];?>" id="<?php echo $row['id_parametre'];?>"   onclick="get_parametre(this.id)" name="enregistrer" 
				class="btn">
		<?php
                } ?>
 
	</form>
</section>	
 
 
<section class="container-table">
 
<table  name="tab"  id="tab" width="100%" cellspacing="1" class="tableau">
	<tbody>
 
 
	</tbody>
</table>
</section>

get_parametre.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 
session_start();
include("connexion.php");
 
$id=$_REQUEST['id'];
 
 
$req="SELECT * FROM parametre_analyse  WHERE existe='1'  AND id_parametre='$id' ";
$res=mysql_query($req);
$row=mysql_fetch_array($res);
 
 
echo 
	'<tr>
		<td height="40" align="center" bgcolor="#FFFFFF">'.$row['label'].'</td>
		<td height="40" align="center" bgcolor="#FFFFFF">'.$row['label'].'</td>
		<td height="40" align="center" bgcolor="#FFFFFF">'.$row['designation'].'</td>
		<td height="40" align="center" bgcolor="#FFFFFF">'.$row['prix'].'</td>
    </tr> ';

mon problème c'est que en cliquant sur le bouton la fonction AJAX ne marche pas

si tu veux utiliser jQuery proprement, il faut d'abord enlever l'attribut onclick sur les input de type submit et écrire le code suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
$(function(){//quand le document est prêt 
	var id;
	function get_parametre(id){
                 console.log('le id est :'+id);//console.log() au lieu de l'alerte.
		$.ajax({ 
			type : 'POST', 
			url : 'get_parametre.php', 
			data: 'id='+id,	
			success : function(data){
				$('#result').remove();//supprime #result s'il existe...
				$('#frm').after('<table id="result">'+data+'</table>');}
			,error : function(XMLHttpRequest, textStatus, errorThrown) { console.log('erreur');  }
		});	
	}
 
	$('#frm .btn').click(function(e){
		id=$(this).attr('id');
		console.log('ID :'+id);
		get_parametre(id);
		e.preventDefault();//empêcher le navigateur de suivre le lien.
	});
});

voici mon code
mais ça ne marche pas

Code:

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
 
 
 
<?php
include ("dossier_id.php");
?>	
<script>
function get_parametre(id){
                 console.log('le id est :'+id);//console.log() au lieu de l'alerte.
		$.ajax({ 
			type : 'POST', 
			url : 'get_parametre.php', 
			data: 'id='+id,	
			success : function(data){
			alert(data);
			//	$('#result').remove();//supprime #result s'il existe...
			//	$('#frm').after('<table id="result">'+data+'</table>');}
			,error : function(XMLHttpRequest, textStatus, errorThrown) { console.log('erreur');  }
		});	
	}
	}
 
	$('#frm .btn').click(function(e){
 
		id=$(this).attr('id');
		alert(id);
		get_parametre(id);
		e.preventDefault();//empêcher le navigateur de suivre le lien.
	});
 
 
</script>
 
 
<section class="container-table">
	<caption class="entete-table">Liste des Paramètres Analyse</caption>
 
	<form id="frm" method="POST" class="formusimple">
		<?php
                $req="SELECT * FROM parametre_analyse  WHERE existe='1' ";
                $res=mysql_query($req);
                while($row=mysql_fetch_array($res))
                { ?>
 
			<input type="submit" value="<?php echo $row['label'];?>" id="<?php echo $row['id_parametre'];?>"    name="enregistrer"  class="btn"/>
		<?php
                } ?>
 
	</form>
</section>	
 
 
<section class="container-table">
 
<table  name="tab"  id="tab" width="100%" cellspacing="1" class="tableau">
	<tbody>
 
 
	</tbody>
</table>
</section>

04/10/2018, 20h28
Toufik83
Tu n'as pas mis le code dans $(function{}) comme je t'ai montré.
Code:

1 2 3 4 $(function(){ //ton code doit être ici });
Puis remplace les alertes par console.log.

merci, voici le code après changement
même les alert n'affichent rien

Code:

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
 
 
<?php
include ("dossier_id.php");
?>	
<script>
$(function(){//quand le document est prêt 
	var id;
	function get_parametre(id){
                 console.log('le id est :'+id);//console.log() au lieu de l'alerte.
		$.ajax({ 
			type : 'POST', 
			url : 'a1.php', 
			data: 'id='+id,	
			success : function(data){
				//$('#result').remove();//supprime #result s'il existe...
				//$('#frm').after('<table id="result">'+data+'</table>');}
				alert(data);
			,error : function(XMLHttpRequest, textStatus, errorThrown) { console.log('erreur');  }
		});	
	}
 
	$('#frm .btn').click(function(e){
	alert(5);
		id=$(this).attr('id');
		console.log('ID :'+id);
		get_parametre(id);
		e.preventDefault();//empêcher le navigateur de suivre le lien.
	});
});
 
</script>
 
 
<section class="container-table">
	<caption class="entete-table">Liste des Paramètres Analyse</caption>
 
	<form id="frm" method="POST" class="formusimple">
		<?php
                $req="SELECT * FROM parametre_analyse  WHERE existe='1' ";
                $res=mysql_query($req);
                while($row=mysql_fetch_array($res))
                { ?>
 
			<input type="submit" value="<?php echo $row['label'];?>" id="<?php echo $row['id_parametre'];?>"    name="enregistrer" 
				class="btn">
		<?php
                } ?>
 
	</form>
</section>	
 
 
<section class="container-table">
 
<table  name="tab"  id="tab" width="100%" cellspacing="1" class="tableau">
	<tbody>
 
 
	</tbody>
</table>
</section>

04/10/2018, 20h38
Toufik83

Tu n'as pas des erreurs dans la console du navigateur?
04/10/2018, 20h44
sky88

non aucune erreur
04/10/2018, 20h47
Toufik83

Tu as sûrement zapé quelque chose, je viens de tester l'exemple, ça fonctionne comme il le faut.
04/10/2018, 20h53
sky88

SVP, vous pouvez me zipper l'exemple et le mettre en pièce jointe dans le topic

SVP quelle version de easy php vous utilisre

ce n'est pas question de version ou de easyphp, es-tu sûr d'avoir charger la bibliothèque jQuery?
j'ai remarqué qu'il n y aucune importation de la bibliothèque jQuery dans ton poste 5, c'est pour cela que ça ne fonctionne pas chez toi.

Code:

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
69
 
 
 
<?php
include ("dossier_id.php");
?>
<!-- ici on importe jQuery !-->
<script src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous">
</script>	
<script>
$(function(){//quand le document est prêt 
	var id;
	function get_parametre(id){
                 console.log('le id est :'+id);//console.log() au lieu de l'alerte.
		$.ajax({ 
			type : 'POST', 
			url : 'a1.php', 
			data: 'id='+id,	
			success : function(data){
				$('#tab tbody tr').remove();//supprime les lignes de #tab
				$('#tab tbody').append(data);}
				console.log('success :'+data);
			,error : function(XMLHttpRequest, textStatus, errorThrown) { console.log('erreur');  }
		});	
	}
 
	$('#frm .btn').click(function(e){
	alert(5);
		id=$(this).attr('id');
		console.log('ID :'+id);
		get_parametre(id);
		e.preventDefault();//empêcher le navigateur de suivre le lien.
	});
});
 
</script>
 
 
<section class="container-table">
	<caption class="entete-table">Liste des Paramètres Analyse</caption>
 
	<form id="frm" method="POST" class="formusimple">
		<?php
                $req="SELECT * FROM parametre_analyse  WHERE existe='1' ";
                $res=mysql_query($req);
                while($row=mysql_fetch_array($res))
                { ?>
 
			<input type="submit" value="<?php echo $row['label'];?>" id="<?php echo $row['id_parametre'];?>"    name="enregistrer" 
				class="btn">
		<?php
                } ?>
 
	</form>
</section>	
 
 
<section class="container-table">
 
<table  name="tab"  id="tab" width="100%" cellspacing="1" class="tableau">
	<tbody>
         <th>Colonne1</th><th>Colonne2</th><th>Colonne3</th>
 
 
	</tbody>
</table>
</section>

Code:

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
var
Call_Args = {
	what: $('#ctx_sujet').val(),
	why: $('#ctx_message').val(),
	id: 'une idée'
};
 
$.ajax({
	url: 'assets/php/code.php',
	type: 'POST',
	data: Call_Args,
	cache: false,
	dataType: 'json',
	error: function (request, error) {
		alert("Erreur : responseText: " + request.responseText);
	},
	success: function (data) {
		if (data['errCod'] != 0) { // cas d'erreur => réponse simple
			var
				info_Pommes = data['pommes'],
				info_Poires = data['poires'],
				info_Oranges = data['oranges']
			;
 
			// ce qui ce doit d'être fait ici...
 
		}
	} // success
}); // ajax appel fct

Code:

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
<?php
mb_internal_encoding("UTF-8");  // parce que tous les serveurs ne sont pas toujours en utf8 par défaut !
 
	$ref_what	= (isSet($_POST['what']))		? $_POST['what']	: '';
	$ref_why	= (isSet($_POST['why']))		? $_POST['why']		: '';
	$ref_id		= (isSet($_POST['id']))			? $_POST['id']		: '';
 
	$errCod = 0;
 
	if ($ref_what == '') $errCod = 1;
	if ($ref_why == '')  $errCod = $errCod + 2;  // opération booléenne... le 2 eme bit est a 1.
 
	if ($errCod == 0) {
 
 
		// traitement ...
 
 
	}
 
 
 
	$T_Repons['errCod']			= $errCod;
 
	$T_Repons['pommes']  = ' il y a des pommes';
	$T_Repons['poires']  = ' ou des poires';
	$T_Repons['oranges']	= 25;
 
 
 
// par Zebrou (02 Sep 2013 - 07:51)
 
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 2000 05:00:00 GMT"); 
 
header('Content-type: application/json');
echo json_encode($T_Repons);
exit(0);
?>

C'est réglé
pour l'appel de la fonction ajax
mais quand j'ajoute une ligne dans mon tableau elle apparaît et disparaît

Code:

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
 
 
<?php
include ("dossier_id.php");
?>	
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{   
 
	function get_parametre(id)
            {
				$.ajax({ 
                type : 'POST', 
                url : 'get_parametre.php', 
                data: 'id='+id,
                success : function(data)
				{ 
					$('#myTable > tbody:first').append('<tr><td>hh</td></tr>'); 
				}, 
                error : function(XMLHttpRequest, textStatus, errorThrown) {   }
            });
            }
 
    $("#frm .btn").click(function()
    {
		$("#frm").submit();//form submission
		id=$(this).attr('id');
		get_parametre(id);
 
 
    });
 
});
 
 
 
 
 
</script>
<section class="container-table">
	<caption class="entete-table">Liste des Paramètres Analyse</caption>
 
	<form id="frm" method="POST" class="formusimple">
		<?php
                echo $req="SELECT * FROM parametre_analyse  WHERE existe='1' ";
                $res=mysql_query($req);
                while($row=mysql_fetch_array($res))
                { ?>
 
			<input type="submit" value="<?php echo $row['label'];?>" id="<?php echo $row['id_parametre'];?>"    name="enregistrer" 
				class="btn">
		<?php
                } ?>
 
	</form>
</section>	
 
 
<section class="container-table">
 
<table   id="myTable" width="100%" cellspacing="1" class="tableau">
	<tbody>
 
 
	</tbody>
</table>
</section>

Code:

1
2
3
4
5
6
7
 
$("#frm .btn").click(function(e)
    {
		id=$(this).attr('id');
		get_parametre(id);
                e.preventDefault();//empêcher le rechargement de la page.
    });

merci à vous mais il y a des boutons qui ne fonctionnent pas
l'ajout de ligne marche très bien mais la suppression ne fonctionne pas

voici mon code

Code:

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
69
70
 
<?php
include ("dossier_id.php");
?>	
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{   
	function get_parametre(id)
	{
		$.ajax({ 
            type : 'POST', 
			url : 'get_parametre.php', 
			data: 'id='+id,
			success : function(data) { $('#myTable > tbody:first').append(data);  }, 
			error : function(XMLHttpRequest, textStatus, errorThrown) {   }
		});
	}
 
 
 
    $("#frm .btn").click(function(e)
    {
		id=$(this).attr('id');
		get_parametre(id);
		e.preventDefault();//empêcher le rechargement de la page.
    });
 
	$("#frm1 .supp").click(function(e)
    {
 
		id=$(this).attr('id');
		alert(id);
 
		e.preventDefault();//empêcher le rechargement de la page.
    });
 
});
 
 
 
 
 
</script>
<section class="container-table">
	<caption class="entete-table">Liste des Paramètres Analyse</caption>
	<form id="frm" method="POST" class="formusimple">
		<?php
                $req="SELECT * FROM parametre_analyse  WHERE existe='1' ";
                $res=mysql_query($req);
                while($row=mysql_fetch_array($res))
                { ?>
			<input type="submit" value="<?php echo $row['label'];?>" id="<?php echo $row['id_parametre'];?>"    name="enregistrer"  class="btn">
		<?php
                } ?>
 
	</form>
</section>	
 
 
<section class="container-table">
	<form id="frm1" method="POST" class="formusimple">
<table   id="myTable" width="100%" cellspacing="1" class="tableau">
	<tbody id="donnee">
 
 
	</tbody>
</table>
</form>
</section>

fichier get_parametre.php

Code:

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
 
<?php
session_start();
include("connexion.php");
 
$id=$_REQUEST['id'];
$s=array();
 
$req="SELECT * FROM parametre_analyse  WHERE existe='1'  AND id_parametre='$id' ";
$res=mysql_query($req);
$row=mysql_fetch_array($res);
 
//$s[0]="{'id':'".$row['id_parametre']."','label':'".utf8_encode($row['label'])."','design':'".utf8_encode($row['designation'])."','prix':'".utf8_encode($row['prix'])."' }";
 
echo 
        '<tr id="'.$row['id_parametre'].'" class="sup">
                <td height="40" align="center" bgcolor="#FFFFFF"><a href="">
                <input type="submit"  id="'.$row['id_parametre'].'"    value="Supprimer"  ></td>'.
                
                
                '<td height="40" align="center" bgcolor="#FFFFFF">'.$row['label'].'</td>
                <td height="40" align="center" bgcolor="#FFFFFF">'.$row['designation'].'</td>
                <td height="40" align="center" bgcolor="#FFFFFF">'.$row['prix'].'</td>
    </tr> ';
 
 
?>

ça ne fonctionne pas par-ce que tu te trompe du nom de la classe 'sup' et d'après ton code, tu met un bouton de suppression dans chaque ligne, c'est bien mais le clique doit être déclenché sur le bouton et pas sur le tr, donc :
Code:

1 2 3 4 5 6 7 8 9 $("#myTable").on("click","tr td [type='submit']",function(e)//clique sur le bouton submit de chaque tr. { id=$(this).closest('tr').attr('id'); $(this).closest('tr').remove(); alert(id); //lancer ajax pour supprimer la ligne depuis la base. e.preventDefault();//empêcher le rechargement de la page. });
la suppression doit être au niveau client et au niveau serveur, donc tu tu seras obliger de lancer une requête ajax pour la suppression au niveau de la base de donnée.

Important: la version de jQuery (1.11) que tu as utilisé est trop ancienne, on est maintenant a 3.3.1.

06/10/2018, 21h33
sky88

merci beaucoup pour ceux qui m'ont aidé