Button ne lance pas l'appel Ajax

**LuffyyffuL** · 19/09/2017, 13h27

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

**Doksuri** · 19/09/2017, 14h40

t'as une erreur ?
appelle directement ta page php dans ton navigateur

**NoSmoking** · 19/09/2017, 16h17

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.

**LuffyyffuL** · 19/09/2017, 16h56

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.

**Doksuri** · 19/09/2017, 17h27

=> essaye de mettre ton js a la toute fin de ton document (juste avant le </body>)

**LuffyyffuL** · 19/09/2017, 18h12

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.

**NoSmoking** · 19/09/2017, 19h20

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().

**LuffyyffuL** · 20/09/2017, 20h56

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

**LuffyyffuL** · 21/09/2017, 11h41

Re,

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

* select.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
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 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
 
 
	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.

Button ne lance pas l'appel Ajax [AJAX]

jQuery

Discussions similaires

Partager

Partager