Button ne lance pas l'appel Ajax

Version imprimable

Bonjour,

Je débute en AJAX et je cherche pour le moment à faire quelque chose de très simple :

Cliquer sur un bouton -> Fonction AJAX -> Script PHP -> Requête SQL

* index.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
28
29
30
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
</head>
 
<body>
 
 
<script>
 
 
$("#reserver").click(function(){
     
    $.ajax({
        
                url : 'reserver.php' // La ressource ciblée
           
    });
   
});
 
</script>
 
 
<button id="reserver">Click Me!</button>
 
</body>
</html>

* reserver.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
28
29
30
<?php
$servername = "localhost";
$username = "user";
$password = "pwd";
$dbname = "base";
 
try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    // set the PDO error mode to exception
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
    $sql = "UPDATE Objets SET objet_reserve='1' WHERE objet_nom='OBJET_TEST'";
	// echo $sql . "<br>" . "<br>";
    // Prepare statement
    $stmt = $conn->prepare($sql);
 
    // execute the query
    $stmt->execute();
 
    // echo a message to say the UPDATE succeeded
	// echo $stmt->rowCount() . " records UPDATED successfully";
    }
	catch(PDOException $e)
    {
 
    // echo $sql . "<br>" . $e->getMessage();
    }
 
$conn = null;
?>

Pour le moment je cherche juste à changer la valeur de la colonne "objet_reserve" de mon objet "OBJET_TEST" à "1" en cliquant sur un bouton.

Mais ça ne fonctionne pas, une idée ?

Merci :)

19/09/2017, 14h40
Doksuri

t'as une erreur ?
appelle directement ta page php dans ton navigateur
19/09/2017, 16h17
NoSmoking

Bonjour,
tu affectes la fonction sur le onclick du bouton avant que celui-ci n'appartienne au DOM, ne soit présent dans le document.
19/09/2017, 16h56
LuffyyffuL

Merci pour vos retours. Non pas d'erreur, quand je vais sur ma page "reserver.php", j'ai une page blanche. Désolé "NoSmoking" mais je ne comprends pas ce que tu veux dire.
19/09/2017, 17h27
Doksuri

=> essaye de mettre ton js a la toute fin de ton document (juste avant le </body>)
19/09/2017, 18h12
LuffyyffuL

J'ai déplacé mon js en dessous de mon button, mais ça ne marche toujours pas.

Sinon, quand j'appel directement mon fichier "reserver.php", la requête mysql est bien passée.
19/09/2017, 19h20
NoSmoking

1/ Je ne vois pas l'ombre d'un echo dans ton fichier reserver.php !
2/ Je ne vois pas l'ombre d'un traitement dans ton fichier index.php !

Peut être devrais tu jeter un coup d'oeil à la documentation et à ses exemples, jQuery.ajax().

Re, effectivement, merci.

J'ai donc réussi à lancer mon fichier "reserver.php" côté serveur à partir d'un bouton html.

Maintenant, au lieu de saisir l'id en dur de la ligne sur laquelle je souhaite interagir, je souhaite utiliser le retour de ma requête "select".

* select.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
28
29
30
31
32
33
34
35
36
 
 
<?php  
$connect = mysqli_connect("localhost", "user", "pwd", "DB");  
$output = '';
 
$sql_objets = "SELECT * FROM Objets ORDER BY id DESC";
$result_objets = mysqli_query($connect, $sql_objets);
 
 
//if( mysqli_num_row_objets($result_categories) > 0 ) {
 
	while ( $row_objets = mysqli_fetch_array($result_objets) ) {
 
					$output .= '
					
						<div>
						
							<form>

								<input type="hidden" value="'.$row_objets["id"].'" name="id" id="id" readonly>
								<button type="submit" id="submit" name="reserver" class="reserver" value="'.$row_objets["id"].'"> BOUTON '.$row_objets["id"].'</button>
								
							</form>
						
						</div>

					';
 
	}
 
//}
 
echo $output;
 
?>

Avec le résultat de cette requête, j'ai créé un bouton par ligne qui ont chacun leur ID.

J'ai donc initialisé la variable '.$row_objets["id"].', afin de la réutiliser pour chacun de mes boutons.

Bouton 1 = ID 1
Bouton 2 = ID 2
Etc.

* index.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
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
71
72
73
74
75
76
77
78
79
80
81
82
83
 
<!DOCTYPE html>
<html>
 
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 
</head>
 
 
<script>
 
 
// SELECT
// SELECT
 
$(document).ready(function(){
 
	function fetch_data()
	{
		$.ajax({
			url:"select.php",
			method:"POST",
			success:function(data){
				$('#live_data').html(data);
			}
		});
	}
 
 
	fetch_data();
 
 
// RESERVER
// RESERVER
 
	$(document).on('click', '.reserver', function(){
	// function reserver(id) {
 
		var id = $("#id").val();
 
		$.ajax({
			url:"reserver.php",
			method:"POST",
			data:{
			id:id	
			},
			dataType:"text",
			success:function(data){
				alert(data); 
				fetch_data();
			}
		})
	});
  //});
 
// FIN - RESERVER
// FIN - RESERVER
 
 
});
 
// FIN SELECT
// FIN SELECT
 
 
 
</script>
 
 
<body>
 
 
	<div id="live_data">
 
	</div>
 
 
</body>
</html>

* reserver.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
28
29
30
31
32
33
34
<?php
 
$servername = "localhost";
$username = "user";
$password = "pwd";
$dbname = "DB";
$id = $_POST["id"];
 
try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    // set the PDO error mode to exception
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
	$sql = "UPDATE Objets SET reservation_en_cours='1' WHERE id='$id'";
	// $sql = "UPDATE Objets SET reservation_en_cours='1' WHERE id='".$id."'";  
	echo $sql;
    // Prepare statement
    $stmt = $conn->prepare($sql);
 
    // execute the query
    $stmt->execute();
 
    // echo a message to say the UPDATE succeeded
   // echo $stmt->rowCount() . " records UPDATED successfully";
    }
	catch(PDOException $e)
    {
 
    echo $sql . "<br>" . $e->getMessage();
    }
 
$conn = null;
 
?>

Mon but étant pour chaque bouton, d’interagir sur la ligne correspondant à son ID.

Avec le bout de code ci-dessus, j'arrive à interagir mais pas comme je le veux, par exemple :

Quand je clic sur le bouton 5 (ID 5), et bien ça interagit sur la ligne avec l'ID 1, en fait on dirait qu'il reprend l'ordre des ID de la requête select.

Une idée ? Merci :)

Re,

J'ai trouvé la solution suivante pour mon problème :

* select.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
28
29
30
31
 
 
<?php  
$connect = mysqli_connect("localhost", "user", "pwd", "DB");  
$output = '';
 
$sql_objets = "SELECT * FROM Objets ORDER BY id DESC";
$result_objets = mysqli_query($connect, $sql_objets);
 
 
//if( mysqli_num_row_objets($result_categories) > 0 ) {
 
	while ( $row_objets = mysqli_fetch_array($result_objets) ) {
 
					$output .= '
					
						<div>
						
<button onclick="reserver('.$row_objets["id"].')">Réserver</button>	
													
						</div>

					';
 
	}
 
//}
 
echo $output;
 
?>

Du coup, j'ai fait sauté les balises "form", j'ai plus qu'une seule ligne pour mon bouton, tout est simplifié.

* index.php avec partie JS *

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
 
 
	function reserver(id) {
		if (confirm('Confirmer réservation ?')) {
			// initialisation
			var url = 'reserver.php';
			var method = 'POST';
			var params = 'id='+id;
			// call ajax function
			ajax (url, method, params) ;
		}
	}
 
	// ajax : basic function for using ajax easily
	function ajax (url, method, params) {
		try { // For: chrome, firefox, safari, opera, yandex, ...
			xhr = new XMLHttpRequest();
		} catch(e) {
			try{ // for: IE6+
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			} catch(e1) { // if not supported or disabled
				alert("Not supported!");
			}
		}
 
		xhr.open(method, url, true);
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xhr.send(params);
	}

Sinon, je n'ai pas touché à la partie SQL.