Barre de recherche avec ajax

**LeSerrurier** · 16/12/2019, 13h55

Bonjour (^-^)/,

Pour commencer un peu de contexte :
Pour un projet scolaire je dois réaliser une application de QCM en ligne, ou aussi appelé "une application web riche (RIA)". Il y a un côté étudiant où on peut répondre à des QCM, et un côté enseignant où on peut créer des questions ainsi que des QCM. Les QCM sont crées à partir d'une sélection de question (c'est le sujet qui le veut). Nous devons utiliser JQuery, j'ai déjà reçu comme conseils d'éviter d'utiliser ce langage, mais c'est comme ça je dois l'utiliser. Donc, s'il vous plaît, je ne souhaite pas de commentaire sur ça, il y a des endroits plus appropriés si vous voulez débattre de ça ^^.

Ma page :
Pour l'instant, le jeu de question est assez trivial, le menu n'est pas terminé, veuillez ne pas en tenir rigueur

(voir l'image)

Il y a 3 sections dont la 1ere, "Informations QCM", qui est en cours de construction et qui ne fait rien pour l'instant à part un simple affichage.
Le "concept" étant de pouvoir sélectionner des questions dans le tableau "Questions Disponible" et de les ajouter dans le tableau "Question sélectionnés". Quand on clic sur un des boutons "Ajouter", cela grise le bouton et ajoute la question dans le 1er tableau.
Pour faciliter la recherche de question, il y a une barre de recherche qui permet de rechercher des titres de questions.

Mon problème :
Quand je clic sur le bouton de la barre de recherche, cela scroll/refresh la page et positionne la fenêtre tout en haut de la page. Je n'ai pas réussis à bien déterminer si c'était vraiment qu'un simple scroll ou un refresh car par moment j'ai l'impression que ça refresh. Avec des console.log, j'ai pu constater que la page ne se refresh pas, mais en discutant de ce problème avec une autre personne, il m'a mit le doute donc je ne suis pas sûr à 100%.
Le bug se produit avec n'importe quoi dans la barre de recherche tant qu'elle affiche un minimum de ligne pour avoir la barre de scroll. Effectivement, si le tableau est vide, ou qu'elle contient qu'une ligne, on ne peut pas scroll vers le bas et donc, cela est normal de se retrouver en haut de la page.
Donc, en laissant la barre de recherche vide ou en écrivant la lettre "q", si on clic sur le bouton de recherche, cela scroll/refresh en haut de la page.

Mon traitement :
J'ai ma barre de recherche que je construis grâce à une class car comme j'ai plusieurs barre de recherche sur mon site, il m'a semblé préférable de "centraliser" sa construction pour que si je dois la changer, je ne dois pas aller dans touteees mes pages mais juste effectuer un changement à un seul endroit :

Code php :

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

1
2
3
4
<?php 
	$barreDeRecherche = new barre_de_recherche("Question");
	echo $barreDeRecherche->toString();
?>

Ma class :

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
<?php
 
	class barre_de_recherche {
 
		private $placeholder;
 
		function __construct($placeholder){
			$this->placeholder = $placeholder;
		}
 
		function toString(){
			return "<div class='input-group row' style='padding-bottom:15px; padding-left:15px'>
					<input id='titreRechercher' class='form-control col-sm-3' type='search' placeholder='".$this->placeholder."'>
					<div class='input-group-append'>
						<div id='boutonRecherche' class='btn btn-info curseur'><i class='fa fa-search'></i></div>
					</div>
				</div>";
		}
	}
 
?>

Cela me permet aussi de changer le placeholder selon la barre de recherche.

Quand on clic sur le bouton de recherche, cela effectue une requête Ajax en Jquery, qui permet d'aller effectuer une requête à ma base de données pour récupérer les informations dont j'ai besoin :

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
$(document).on("click", "#boutonRecherche", function(){
         //TableauVide c'est une ligne de tableau qui permet d'afficher "Aucune question trouvé" que j'affiche et cache en fonction du résultat de la recherche
	$("#tableauQuestion tbody row").not(".tableauVide").remove();
		$.ajax({
			method: "POST",
			url: "requete/creer_qcm_tableau_question_recherche.php",
			data: {titreRechercher: $("#titreRechercher").val()},
			success: function (tableauRechercher) { 
				if(tableauRechercher != -1){
					$("#tableauQuestion .tableauVide").hide();
					$("#tableauQuestion tbody").append(tableauRechercher);
					$("#tableauQuestion td").addClass("verticalAlign");
 
					//Grise les questions ajoutées si elles sont présentes dans le tableau des questions sélectionnés
					$("#tableauQuestion tbody tr").not(".tableauVide, .aSupprimer").each(function(){
						$idSelectionQuestion = "#" + $(this).attr("id").replace("creerQcmTabDispo_question","creerQcmTabSelect_question");
						if($("#tableauSelectionQuestion").find($idSelectionQuestion).length){
							griserBtnAjouter($(this).attr("id"));
						}
					});
				} else {
					$("#tableauQuestion .tableauVide").show()
				}
			},
		});
	});

Et voici ma requête SQL :

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
<?php
 
	include("../../include_commun/bdd_connexion.php");
 
	$titreRechercher = $_POST["titreRechercher"];
 
	$reqRechercheQuestion = $linkpdo->query("	SELECT * 
										FROM question, personne
										WHERE question.idPersonne_enseignant = personne.idPersonne
										AND question.texte LIKE '%".$titreRechercher."%'
										ORDER BY texte");
	$rechercheQuestion = $reqRechercheQuestion -> fetch();
 
	if($rechercheQuestion != null) {
 
		$tableau = "";
		while($rechercheQuestion != null){
			$tableau .= "<tr id='creerQcmTabDispo_question".$rechercheQuestion["idQuestion"]."'>";
			$tableau .= "<td>".$rechercheQuestion["texte"]."</td>";
			$tableau .= "<td>".$rechercheQuestion["theme"]."</td>";
			$tableau .= "<td class='btn-sm btn-success curseur boutonAjout'> Ajouter </td>";
			$tableau .= "</tr>";
			$rechercheQuestion = $reqRechercheQuestion -> fetch();
		}
		echo $tableau;
 
	} else {
 
		echo -1;
 
	}
 
?>

J'ai émis plusieurs hypothèses et je vais vous partager celle qui me paraît la plus pertinente :
- Quand le tableau est vide, cela positionne la fenêtre en haut de la page
- Avant de faire ma requête, je supprime toutes les lignes du tableau et ensuite j'ajoute les nouvelles lignes
Conclusion => Quand je supprime les lignes cela scroll en haut de la page puis ajoute les nouvelles lignes

J'ai fait des tests à la main dans la console en mode développeur. J'ai d'abord ajouté des nouvelles lignes... bien aucun scroll ou refresh.. j'ai ensuite supprimé les vieilles lignes... bien aucun scroll ou refresh.
Conclusion => Il faut que j'ajoute d'abord les lignes et que je supprime les vieilles ensuite. Je peux ajouter des class "aSupprimer" qui me permettront avec Jquery de les supprimer très facilement, et de supprimer leurs id uniques qui se construit en fonction de la question, donc si l'utilisateur cherche une question qui est déjà affiché, cela peut poser soucis donc je supprime cet attribut.

Le problème, c'est que même en faisant ça, je retombais sur le même bug TuT... Du coup, j'ai testé de mettre un timer.. ça marche si on fait un temps assez conséquent, genre 1000ms, mais on voit des lignes apparaître puis les anciennes disparaître. Soit si on met un temps plus petit, il ne faut pas cliquer trop de fois d'affilée sur le bouton. Je me retrouve avec ça maintenant :

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
$(document).on("click", "#boutonRecherche", function(){
	$("#tableauQuestion tbody tr").not(".tableauVide").addClass("aSupprimer").removeAttr("id");
		$.ajax({
			method: "POST",
			url: "requete/creer_qcm_tableau_question_recherche.php",
			data: {titreRechercher: $("#titreRechercher").val()},
			success: function (tableauRechercher) { 
				if(tableauRechercher != -1){
					$("#tableauQuestion .tableauVide").hide();
					$("#tableauQuestion tbody").append(tableauRechercher);
					$("#tableauQuestion td").addClass("verticalAlign");
 
					//Grise les questions ajoutées si elles sont présentes dans le tableau des questions sélectionnés
					$("#tableauQuestion tbody tr").not(".tableauVide, .aSupprimer").each(function(){
						$idSelectionQuestion = "#" + $(this).attr("id").replace("creerQcmTabDispo_question","creerQcmTabSelect_question");
						if($("#tableauSelectionQuestion").find($idSelectionQuestion).length){
							griserBtnAjouter($(this).attr("id"));
						}
					});
				} else {
					$("#tableauQuestion .tableauVide").show()
				}
			},
		});
		setTimeout( function() {
			$("#tableauQuestion .aSupprimer").remove();		
		}, 20);				
	});

C'est fonctionnel mais malgash un peu je trouve. Surtout que ce n'est pas tout ! Je suis assez perdu car il y a des choses que je n’explique pas du tout.

Les trucs chelous :
Si je suis en mode développeur, le bug ne se réalise pas.
Si je zoom sur la page, il y a un moment où le bug ne se réalise plus.
J'en oublie mais ces deux là sont les principaux trucs chelous que j'ai retrouvé ><

Précisions :
J'utilise Wamp, cela fonctionne trèèèès bien pour tout le reste du site. Je peux effectuer des requêtes à ma base de données sans soucis, que ce soit pour la connexion des utilisateurs, demander les questions existantes, les qcm etc. J'ai pas de problème avec PHP aussi, ça fonctionne très bien. J'utilise PhpMyAdmin. J'utilise Bootstrap.

Voilà, j'ai essayé de donner le maximum d'informations que je pouvais, j'espère n'avoir rien oublié. J'espère que quelqu'un pourra m'aider ^_^
Désolé si mon intitulé n'ai pas parlant, ou si je me suis trompé de Forum, j'ai fait au mieux

Merci de m'avoir lu en tout cas !

**NoSmoking** · 18/12/2019, 08h54

Bonjour,
pas sûr d'avoir tout bien compris mais as tu essayé de vider ton tableau, non pas avant la requête mais dans success de la requête juste avant de mettre le nouveau contenu, cela ne devrait pas laisser le temps au moteur de rendu d'afficher les deux étapes.

**LeSerrurier** · 18/12/2019, 14h38

OOOH, mais oui bien sûr ! J'étais trop focus sur les "bugs" que je trouvais que j'avais pas du tout pensé à tester ça ^^'''. J'avais fait comme ça pour les deux autres pages et j'ai pas remis en question ce point ^^'.
Merciiii de ta solution ça marche super !!

Barre de recherche avec ajax [AJAX]

jQuery

Discussions similaires

Partager

Partager