Discussion :

[cheboy]

Bonjour.

J'utilise des Jquery DataTables pour afficher dynamiquement les données dans mon tbody. Voici le code HTML de la Table:

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
<table id="order_data" class="table table-bordered table-striped">
                		<thead>
							<tr>
								<th>Order ID</th>
								<th>Customer Name</th>
								<th>Total Amount</th>
								<th>Payment Status</th>
								<th>Order Status</th>
								<th>Order Date</th>
								<?php
                                                                if($_SESSION['type'] == 'master')
                                                                {
                                                                        echo '<th>Created By</th>';
                                                                }
                                                                ?>
								<th></th>
								<th></th>
								<th></th>
							</tr>
						</thead>
                	</table>

Et maintenant, voici le Code Ajax qui est censé appelé le Code PHP qui traite les données:

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
$(document).on('click', '.delete', function(){
			var inventory_order_id = $(this).attr("id");
			var status = $(this).data("status");
			var btn_action = "delete";
			if(confirm("Are you sure you want to change status?"))
			{
				$.ajax({
					url:"order_action.php",
					method:"POST",
					data:{inventory_order_id:inventory_order_id, status:status, btn_action:btn_action},
					success:function(data)
					{
						$('#alert_action').fadeIn().html('<div class="alert alert-info">'+data+'</div>');
						orderdataTable.ajax.reload();
					}
				})
			}
			else
			{
				return false;
			}
		});

Et enfin, le Code PHP du Fichier order_action.php qui traite l'affichage de la table:

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
if($_POST['btn_action'] == 'delete')
	{
		$status = 'Pending...';
		if($_POST['status'] == 'Pending...')
		{
			$status = 'Order is ready';
 
        } else if ($_POST['status'] == 'Order is ready'){
 
			$status = 'Retired';
		}
 
		$query = "
		UPDATE inventory_order 
		SET inventory_order_status = :inventory_order_status 
		WHERE inventory_order_id = :inventory_order_id
		";
		$statement = $connect->prepare($query);
		$statement->execute(
			array(
				':inventory_order_status'	=>	$status,
				':inventory_order_id'		=>	$_POST["inventory_order_id"]
			)
		);
		$result = $statement->fetchAll();
		if(isset($result))
		{
			echo 'Order status change to ' . $status;
		}
	}

Le problème est que qu'au lieu que la ligne tbody de la colonne s'affiche avec le status correspondant (Pending..., Order is ready, Retired) qui change normalement et correctement dans la base de données, elle n'affiche que le mot "Inactive" qui ne change pas du tout sur la page HTML mais change très bien à chaque clique sur le bouton Delete dans la Base de Données.

Où se trouve donc le bug qui empêche la modification du Status à chaque fois qu'on clique sur le bouton delete pour effectuer la mise à jour dans la BDD, et dont l'affichage reste malgré tout (inchangeable) sur Inactive au lieu de Pending... ou de Order is ready ou encore de Retired ?


Je précise que la mise à jour s'opère bien dans la base de données. Mais côté client, c'est complètement impossible. Et c'est bien là mon souci.

Merci d'avance.

[Toufik83]

Bonjour,

D'après ce que je vois, il faut redessiner le tableau avec la méthode draw().

Essaies d'ajouter orderdataTable.draw(); juste après orderdataTable.ajax.reload();.

[cheboy]

Bonjour et grand merci pour la réponse.

En fait, La variable orderdataTable est définie ou initialisée comme suit:

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
var orderdataTable = $('#order_data').DataTable({
			"processing":true,
			"serverSide":true,
			"order":[],
			"ajax":{
				url:"order_fetch.php",
				type:"POST"
			},
			<?php
                        if($_SESSION["type"] == 'master')
                        {
                        ?>
			"columnDefs":[
				{
					"targets":[4, 5, 6, 7, 8, 9],
					"orderable":false,
				},
			],
			<?php
                        }
                        else
                        {
                        ?>
			"columnDefs":[
				{
					"targets":[4, 5, 6, 7, 8],
					"orderable":false,
				},
			],
			<?php
                        }
                        ?>
			"pageLength": 10
		});

Et le header de mon code PHP est le 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
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
//order.php
 
include('database_connection.php');
 
include('function.php');
 
if(!isset($_SESSION['type']))
{
        header('location:login.php');
}
?>
 
<!DOCTYPE html>
<html>
	<head>
		<title>Customers Management</title>
		<script src="js/jquery-1.10.2.min.js"></script>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script src="js/jquery.dataTables.min.js"></script>
		<script src="js/dataTables.bootstrap.min.js"></script>		
		<link rel="stylesheet" href="css/dataTables.bootstrap.min.css" />
		<script src="js/bootstrap.min.js"></script>
	</head>
	<body>
		<br />
		<div class="container">
			<h2 align="center">Customers Management</h2>
 
			<nav class="navbar navbar-inverse">
				<div class="container-fluid">
					<div class="navbar-header">
						<a href="index.php" class="navbar-brand">Home</a>
					</div>
					<ul class="nav navbar-nav">
					<?php
                                        if($_SESSION['type'] == 'master')
                                        {
                                        ?>
						<li><a href="user.php">User</a></li>
						<li><a href="category.php">Product</a></li>
						<li><a href="brand.php">Manufacturer</a></li>
						<li><a href="seller.php">Seller</a></li>
						<li><a href="product.php">Add Product</a></li>
					<?php
                                        }
                                        ?>
						<li><a href="order.php">Order</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="label label-pill label-danger count"></span> <?php echo $_SESSION["user_name"]; ?></a>
							<ul class="dropdown-menu">
								<li><a href="profile.php">Profile</a></li>
								<li><a href="logout.php">Logout</a></li>
							</ul>
						</li>
					</ul>
 
				</div>
			</nav>

Où serait donc le Bug qui empêche la redirection en Ajax avec mise à jour côté client car je le rappelle, la mise à jour est bel et bien effectué côté Serveur via mon Code PHP du fichier order_fetch.php. Et c'est seulement au niveau du client que ce changement ne s'opèrent pas du tout et reste static ???

SINON, comment redessiner le tableau avec draw() ???

[Toufik83]

Bonjour,

Tout d'abord, est-ce que tu es sûr que le retour d'ajax s'exécute bien dans success ? parce que là $result = $statement->fetchAll(); tu essaies de récupérer les données d'une requête update.

Il faut utiliser rowCount() et pas fetchAll :

Code :

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

1
2
3
4
5
 
$result = $statement->rowCount();
if($result>0){
    echo 'Order status change to ' . $status;
}

Ensuite n'oublis jamais d'utiliser l'option error d'ajax afin de voir les erreurs :

Code :

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

1
2
3
4
5
6
 
$.ajax({
    ....,
    success:function(data){/*code succès*/},
    error:function(err){alert("Erreur ajax :"+err);}
});

Concernant draw(), lorsqu'on effectue une insertion ou modification dans la table mysql, le plugin doit redessiner la tableau (envoyer une nouvelle requête vers ajax.url qui correspond à order_fetch.php) afin qu'il affiche les nouvelles valeurs de la table, donc c'est comme je t'avais dit :

Code :

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

1
2
3
4
5
6
7
 
success:function(data)
{
	$('#alert_action').fadeIn().html('<div class="alert alert-info">'+data+'</div>');
	orderdataTable.ajax.reload();
        orderdataTable.draw();// là on demande au plugin de redessiner le tableau
}

[cheboy]

J'essaierai une fois à la maison. Merci beaucoup. Très belle soirée à vous