Click sur bouton ne marche pas

**sky88** · 03/10/2018, 23h52

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 :

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
 
<?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 php :

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
 
 
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

**Toufik83** · 04/10/2018, 16h21

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 :

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
 
$(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.
	});
});

**sky88** · 04/10/2018, 20h19

voici mon code
mais ça ne marche pas

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
 
 
 
<?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>

**Toufik83** · 04/10/2018, 20h28

Tu n'as pas mis le code dans $(function{}) comme je t'ai montré.

Code :

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

1
2
3
4
 
$(function(){
//ton code doit être ici
});

Puis remplace les alertes par console.log.

**sky88** · 04/10/2018, 20h34

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

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
 
 
<?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>

**Toufik83** · 04/10/2018, 20h38

Tu n'as pas des erreurs dans la console du navigateur?

**sky88** · 04/10/2018, 20h44

non aucune erreur

**Toufik83** · 04/10/2018, 20h47

Tu as sûrement zapé quelque chose, je viens de tester l'exemple, ça fonctionne comme il le faut.

**sky88** · 04/10/2018, 20h53

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

**Toufik83** · 04/10/2018, 21h21

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 :

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
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>

**psychadelic** · 04/10/2018, 21h28

Code JavaScript :

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
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 PHP :

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
<?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);
?>

**sky88** · 04/10/2018, 23h32

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 :

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
 
 
<?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>

**Toufik83** · 04/10/2018, 23h54

Code :

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

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.
    });

**sky88** · 05/10/2018, 00h43

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 :

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
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 :

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
 
<?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> ';
 
 
?>

**Toufik83** · 05/10/2018, 01h15

ç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 :

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

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.

**sky88** · 06/10/2018, 21h33

merci beaucoup pour ceux qui m'ont aidé

Click sur bouton ne marche pas [AJAX]

jQuery

Discussions similaires

Partager

Partager