SVP comment corriger le bug qui empêche mon code AJAX de traiter et d'afficher dynamiquement la mise à jour du PHP ?

par **Ryle** » 27 janv. 2021, 20:24

En fait, de ce que tu dis, j'ai l'impression que ton script fonctionne bien mais que lorsque tu recharges le tableau en ajax, ton navigateur utilise les informations qu'il a en cache plutôt que de réinterroger le serveur qui lui enverrait alors un résultat différent.

Si après avoir fait un delete, tu actualises la page pour tout recharger, est-ce que ton statut apparait bien à jour dans le tableau ? Si c'est le cas, il s'agit sans doute d'un problème de rafraichissement ou de cache de jquery. Si ton information est bonne en base mais pas à l'écran, alors c'est probablement ton script php qui vient la lire qui est erroné.

Si c'est un problème de cache, dans la déclaration de ton dataTable, essaies d'ajouter l'option 'cache' : false (ça ne devrait pas avoir d'impact en POST, mais sait-on jamais, ça coute pas grand chose). Tu peux aussi voir ce que ça donne en ajoutant des headers pour gérer les informations de cache (expires, last modified, cache-control) dans le script order_fetch.php qui génère le contenu du tableau et qui est appelé en ajax... cela devrait dire au navigateur de toujours recharger les données depuis le serveur.
Si le tableau n'est jamais à jour par rapport au contenu de ta base en revanche, il faut regarder ce qui cloche dans order_fetch.php

par **chegmarco** » 27 janv. 2021, 16:25

Bonjour et grand merci pour votre réponse. La variable orderdataTable est définie comme suit:

Code : Tout sélectionner

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 : Tout sélectionner

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

AIDEZ-MOI S'IL VOUS PLAÎT A ME RETROUVER AFIN DE CORRIGER CE BUG. S'IL VOUS PLAÎT.

par **Ryle** » 27 janv. 2021, 12:07

Salutations !

Si la mise à jour se fait bien en base et que tu obtiens bien le message "'Order status change to XXX" dans ton bloc "#alert_action", c'est que tout le code que tu nous présentes est bon. Si ton tableau ne s'actualise pas correctement et ne récupère pas les nouvelles valeurs présentes en base c'est que le problème est au niveau de l'appel orderdataTable.ajax.reload();

Comment ton tableau est il configuré ? Est-ce que la variable orderdataTable est bien accessible (n'a pas par exemple été défini dans une fonction avec une portée locale) ?
Est-ce qu'il appel bien un script php qui liste les éléments du tableau ? est-ce qu'il n'y aurait pas juste un problème de cache du navigateur (auquel cas les header() de ton script php qui retourne le tableau pourraient imposer au navigateur de toujours recharger la page) ?

par **chegmarco** » 26 janv. 2021, 22:46

Bonjour.

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

Code : Tout sélectionner

<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 : Tout sélectionner

$(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 : Tout sélectionner

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.

SVP comment corriger le bug qui empêche mon code AJAX de traiter et d'afficher dynamiquement la mise à jour du PHP ?

Répondre

Étendre la vue Revue du sujet : SVP comment corriger le bug qui empêche mon code AJAX de traiter et d'afficher dynamiquement la mise à jour du PHP ?

Re: SVP comment corriger le bug qui empêche mon code AJAX de traiter et d'afficher dynamiquement la mise à jour du PHP ?

Re: SVP comment corriger le bug qui empêche mon code AJAX de traiter et d'afficher dynamiquement la mise à jour du PHP ?

Re: SVP comment corriger le bug qui empêche mon code AJAX de traiter et d'afficher dynamiquement la mise à jour du PHP ?

SVP comment corriger le bug qui empêche mon code AJAX de traiter et d'afficher dynamiquement la mise à jour du PHP ?