Partage
  • Partager sur Facebook
  • Partager sur Twitter

boostrap et ajax

    9 décembre 2017 à 14:16:02

    Bonjour,

    Sur certaines pages de mon appli web, j'utilise de l'Ajax.

    Je m'aperçois que lorsque je recharge la page via l'Ajax, le bootstrap n'est pas prit en compte.

    Savez vous d'où cela peut venir ?

    Note, le code de la page ajax est identique a celui de la page initiale qui, elle fonctionne tres bien.

    merci de votre aide.

    David

    • Partager sur Facebook
    • Partager sur Twitter
      9 décembre 2017 à 15:31:08

      Bonjour,

      L'intérêt d'utiliser Ajax est justement de ne pas recharger la page...

      • Partager sur Facebook
      • Partager sur Twitter
      Anonyme
        9 décembre 2017 à 22:35:40

        Le code a beau être identique, vu que les boules de cristal n'ont jamais sû démontrer leur efficacité, il est dur pour nous de deviner de quel code tu parles.

        S'il est en effet problématique, la seule façon pour nous de le voir et de voir ledit code.

        Pour insérer du code proprement:

        https://openclassrooms.com/forum/sujet/regles-de-ce-forum-a-lire-avant-de-poster-1

        • Partager sur Facebook
        • Partager sur Twitter
          10 décembre 2017 à 11:15:52

          Bonjour,

          je n'ai pas posté de code parce que je pensais que la solution etait générique et non liée au code.
          mais bon, je vous mets ce que j'ai ecris.

          voici le premier fichier: managers.php

          <?php
          $menu_sup= "<li><span class=\"papyrus\">SuDoQ: Surveillance des D&eacute;l&eacute;gations des Op&eacute;rations Qualit&eacute;</span></li>";
          if (!isset($mainfile)) {include ("mainfile.php");}
          global $liste_operators, $tbl_managers;
          
          
          include("template/header.html");
          
          //securisation de la page pour l'accès direct
          if (!isset($_SESSION['nom_prenom'])){
          	@header("location: login.php");
          }
          
          echo "<main>
          <table width=\"100%\" border=\"0\">
          	<tr>
          		<td valign=\"top\" width=\"90%\">
          		<div id=\"couleur\" style=\"background:#800080;color:#fff;\"><center><h1><strong>".Translate("Hi&eacute;rarchies")."</strong></h1></center></div>";
          		
          // début de la plage d'édition ----   /!\ NE PAS EDITER LES LIGNES AU DESSUS
          
          if (isset($_SESSION["level_user"]) && $_SESSION["level_user"] > 2){ //si l'utilisateur est connu dans la base de données et est admin
           //création de la liste des opérateurs eligible au management
           $result = mysqli_query($ret_p, "SELECT sudoq_employes.idsudoq_employes, sudoq_employes.matricule, sudoq_employes.nom, sudoq_employes.prenom, sudoq_employes.niveau, sudoq_sigle.sudoq_sigle FROM sudoq_employes, sudoq_sigle WHERE sudoq_employes.is_actif='1' AND sudoq_employes.type_contrat='1' AND sudoq_sigle.idsudoq_sigle=sudoq_employes.sigle ORDER BY sudoq_employes.nom, sudoq_employes.prenom ASC");
          
           while($req = mysqli_fetch_array($result)){
          	//création des 2 listes: manager si niveau != 0
          	If($req['niveau'] == 0){	//insertion dans la liste déroulante
          		$liste_operators .= "<option value=\"".$req['idsudoq_employes']."\">".htmlentities($req['nom']." ".$req['prenom'])." (".$req['matricule'].")</option>\n";
          	}else{	//création du tableau des managers
          		$tbl_managers .= "<tr>
          			<td width=\"24px\"><span class=\"icon icon-edit bouton_appair\"title=\"".translate("Editer")."\" onclick=\"mod_manager(".$req['idsudoq_employes'].");\"></span></td>
          			<td width=\"24px\"><span class=\"icon icon-delete bouton_appair\" title=\"".translate("Supprimer")."\"onclick=\"del_manager(".$req['idsudoq_employes'].");\"></span></td>
          			<td>".htmlentities($req["nom"])."</td>
          			<td>".htmlentities($req["prenom"])."</td>
          			<td>".$req["sudoq_sigle"]."</td>
          			<td>".$array_manager[$req["niveau"]]."</td>
          		</tr>";
          	}
          	
          	 
           }
          
          echo "<div class=\"row\">
          		<div class=\"col-md-12\"><span class=\"icon icon-information-commercial icon-x4\"></span></div>
          		</div>
          		<div class=\"well well-form col-md-10 col-md-offset-1\" id=\"affiche_managers\">
          			<div class=\"row\">
          				<label for=\"select_ope\" class=\"control-label col-md-2 col-md-offset-1\">".translate("Op&eacute;rateurs")."</label>
          				<div class=\"col-md-7\">
          					<select id=\"select_ope\" name=\"select_ope\" class=\"form-control\">
          						$liste_operators
          					</select>
          				</div>
          				<div class=\"col-md-1\">
          					<span class=\"icon icon-assign icon-x2\" style=\"cursor:pointer;\" id=\"add_manager\" title=\"".translate("Ajouter")."\" onclick=\"add_manager();\"></span>
          				</div>
          			</div>
          			<br />
          			<div class=\"col-md-10 col-md-offset-1\">
          				<div class=\"panel panel-default \">
          					<!-- Default panel contents -->
          					<div class=\"panel-heading\">".translate("Managers enregistr&eacute;s")."</div>
          					<!-- Table -->
          					<table class=\"display\" id=\"data-table-example\" width=\"100%\">
          						<thead>
          							<tr align=\"center\">
          								<th width=\"24px\"></th>
          								<th width=\"24px\"></th>
          								<th>".translate("Nom")."</th>
          								<th>".translate("Pr&eacute;nom")."</th>
          								<th>".translate("Sigle")."</th>
          								<th>".translate("Niveau")."</th>
          							</tr>
          						</thead>
          						<tbody>
          							$tbl_managers
          						</tbody>
          					</table>
          				</div>
          			</div>
          		</div>
          		
          		
          		";
          
          }else{
          	echo message_erreur(translate("Gestion des hi&eacute;rarchies"));
          }
          
          // fin de la plage d'édition ----   /!\ NE PAS EDITER LES LIGNES EN DESSOUS
          
          echo "</td>
          		<td valign=\"top\" align=\"right\" class=\"marge_left\">";
          include("stat.php");
          echo "		</td>
          	</tr>
          	</table>
          	</main> ";
          include("template/footer.html");
          ?>
          

          Pour la gestion de l'Ajax, j'utilise une classe appelée dans le footer.
          le code javascript est lui stocké dans un fichier .js appelé aussi dans le footer.

          function add_manager(){
          		var select_ope = document.getElementById('select_ope').value;
          		var url = 'ajax_managers.php';
          		var param = 'select_ope='+select_ope+'&what_manage=add';
          		var fct_after = '';
          		var div = 'affiche_managers';
          		GAG(url, param, "POST", true, fct_after, "html", false, div);
          }
          

          ce qui me fait dire que ca ne vient pas de la methode mais de la forme, c'est que j'ai essayé de passer l'Ajax en jQuery, le resultat est le meme.

          voici le fichier ajax_managers.php:

          <?php
          if (!isset($mainfile)) {include ("mainfile.php");}
          global $sel_niveau, $liste_operators, $tbl_managers;
          
          if ($select_ope != ""){
          	if($what_manage == "add"){
          		//enregistrement de l'opérateur dans les managers + niveau 1 d'office
          		$result = mysqli_query($ret_p, "UPDATE sudoq_employes SET niveau='1' WHERE idsudoq_employes='$select_ope'");
          	}
          	
          	if($what_manage == "sup"){		//suppression de la liste des managers
          		$result = mysqli_query($ret_p, "UPDATE sudoq_employes SET niveau='0' WHERE idsudoq_employes='$select_ope'");
          	}
          	
          	if($what_manage == "valid"){	//validation de l'edition
          		//enregistrement du nouveau niveau du manager
          		$result = mysqli_query($ret_p, "UPDATE sudoq_employes SET niveau='$niveau' WHERE idsudoq_employes='$select_ope'");
          	}
          	
          	//on a fini de traiter les modif, on passe a l'affichage
          	 $result = mysqli_query($ret_p, "SELECT sudoq_employes.idsudoq_employes, sudoq_employes.matricule, sudoq_employes.nom, sudoq_employes.prenom, sudoq_employes.niveau, sudoq_sigle.sudoq_sigle FROM sudoq_employes, sudoq_sigle WHERE sudoq_employes.is_actif='1' AND sudoq_employes.type_contrat='1' AND sudoq_sigle.idsudoq_sigle=sudoq_employes.sigle ORDER BY sudoq_employes.nom, sudoq_employes.prenom ASC");
          
          	while($req = mysqli_fetch_array($result)){
          		
          		//création des 2 listes: manager si niveau != 0
          		If($req['niveau'] == 0){	//insertion dans la liste déroulante
          			$liste_operators .= "<option value=\"".$req['idsudoq_employes']."\">".htmlentities($req['nom']." ".$req['prenom'])." (".$req['matricule'].")</option>\n";
          			
          		}else{	//création du tableau des managers
          		
          			if($what_manage == "mod" && $req['idsudoq_employes'] == $select_ope){		//demande d'edition d'un manager
          				//creation de la liste des managers avec seulement la ligne demandée en edition
          
          				for($i=1; $i<3; $i++){
          					$i == $req["niveau"] ? $sel_niveau .= "<option value=\"$i\" selected>".$array_manager[$i]."</option>" : $sel_niveau .= "<option value=\"$i\">".$array_manager[$i]."</option>";
          				}
          				$tbl_managers .= "<tr>
          					<td width=\"24px\"><span class=\"icon icon-validate bouton_appair\"title=\"".translate("Editer")."\" onclick=\"valid_manager(".$req['idsudoq_employes'].");\"></span></td>
          					<td width=\"24px\"></td>
          					<td><b>".htmlentities($req["nom"])."</b></td>
          					<td><b>".htmlentities($req["prenom"])."</b></td>
          					<td><b>".$req["sudoq_sigle"]."</b></td>
          					<td><select name=\"niveau\" id=\"niveau\" class=\"form-control\">$sel_niveau</select></td>
          				</tr>";
          				
          			}else{
          				$tbl_managers .= "<tr>
          					<td width=\"24px\"><span class=\"icon icon-edit bouton_appair\"title=\"".translate("Editer")."\" onclick=\"mod_manager(".$req['idsudoq_employes'].");\"></span></td>
          					<td width=\"24px\"><span class=\"icon icon-delete bouton_appair\" title=\"".translate("Supprimer")."\"onclick=\"del_manager(".$req['idsudoq_employes'].");\"></span></td>
          					<td>".htmlentities($req["nom"])."</td>
          					<td>".htmlentities($req["prenom"])."</td>
          					<td>".$req["sudoq_sigle"]."</td>
          					<td>".$array_manager[$req["niveau"]]."</td>
          				</tr>";
          			}
          		}
          	}
          
          	echo "			<div class=\"row\">
          				<label for=\"select_ope\" class=\"control-label col-md-2 col-md-offset-1\">".translate("Op&eacute;rateurs")."</label>
          				<div class=\"col-md-7\">
          					<select id=\"select_ope\" name=\"select_ope\" class=\"form-control\">
          						$liste_operators
          					</select>
          				</div>
          				<div class=\"col-md-1\">
          					<span class=\"icon icon-assign icon-x2\" style=\"cursor:pointer;\" id=\"add_manager\" title=\"".translate("Ajouter")."\" onclick=\"add_manager();\"></span>
          				</div>
          			</div>
          			<br />
          			<div class=\"col-md-10 col-md-offset-1\">
          				<div class=\"panel panel-default \">
          					<!-- Default panel contents -->
          					<div class=\"panel-heading\">".translate("Managers enregistr&eacute;s")."</div>
          					<!-- Table -->
          					<table class=\"display\" id=\"data-table-ajax\" width=\"100%\">
          						<thead>
          							<tr align=\"center\">
          								<th width=\"24px\"></th>
          								<th width=\"24px\"></th>
          								<th>".translate("Nom")."</th>
          								<th>".translate("Pr&eacute;nom")."</th>
          								<th>".translate("Sigle")."</th>
          								<th>".translate("Niveau")."</th>
          							</tr>
          						</thead>
          						<tbody>
          							$tbl_managers
          						</tbody>
          					</table>
          				</div>
          			</div>
          
          ";
          	 
           }
          	
          else{ die();}
          
          ?>


           bon, voila, c'est un peu brouillon dans le code, je suis pas un pro, je vous prit de ne pas m'en tenir rigueur.

          le probleme que je rencontre c'est que la mise en forme bootstrap du tableau est active quand on lance le fichier managers.php mais lorsqu'on recherge en ajax, la partie du tableau appelée par ajax_managers.php, il n'y a plus de mise en forme bootstrap.

          j'espere que vous pourrez m'aider

          • Partager sur Facebook
          • Partager sur Twitter

          boostrap et ajax

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur
          • Markdown