Partage
  • Partager sur Facebook
  • Partager sur Twitter

Manipulation du champ "select"de PHP avec Ajax

deux champ "select"

yves juniorakpale
    12 août 2018 à 21:43:11

    Bjr! J'ai besoin d'aide, j'ai deux champs "SELECT" avec pour id="parent" et id="enfant" qui sont alimentés par des requetes SQL,le champ SELECT de l'id "enfant" depend de la requetes de celui de l'id parent.je veux ce mecanismes soit géres avec AJAX mais je n'y arrive pas.la requete du champ SELECT de l'id "parent" se trouve dans la pages PHP nommée "produits.php" et celui de l'id "enfant" se trouve sur la page "enfantcartegories.php" et mon script ajax se trouve sur la page "pieddepage.php".les voici:

    produit.php

    <?php require_once $_SERVER['DOCUMENT_ROOT'].'/Vente en Ligne/coeur/initialiser.php';
      include'pages/entete.php'; 
      include'pages/navigation.php';
      $sql="SELECT * FROM produits WHERE supprimer=0";
      $presultat=$db->query($sql);

      if (isset($_GET['ajouter'])) {
      	$marqueQuery=$db->query("SELECT * FROM marque ORDER BY marque");
      	$parentQuery=$db->query("SELECT * FROM categories WHERE parent=0 ORDER BY categorie");
      ?>   
    <h2 class="text-center">Ajouter a un nouveau Produit</h2><hr>
    <form class="produits.php?ajouter=1" method="POST" enctype="multipart/form-data">
    <div class="form-group col-md-3">
      <label for="title">Titre*:</label>
      <input type="text" class="form-control" name="titre" id="titre" value="<?php echo ((isset($_POST['titre']))? $_POST['titre']:'') ;?>">
     </div>
      <div class="form-group col-md-3">
      	<label for="marque">Marque*:</label>
      	<select class="form-control" id="marque" name="marque">
      	  <option value=""> <?php echo((isset($_POST['marque']) && $_POST['marque']=='')?'selected':'');?></option>
      	   <?php while ($marque=mysqli_fetch_assoc($marqueQuery)):?>

                 <option value="<?php echo $marque['id'];?>"<?php echo((isset($_POST['marque']) && $_POST['marque']==$marque['id'])?'selected':'');?>><?php echo $marque['marque'];?></option>
           <?php endwhile;?>
      	</select>
     	
      </div>
      <div class="form-group col-md-3">
      	<label >Catégorie Parent*:</label>
      	<select class="form-control" id="parent" name="parent">
      	  <option value=""<?php echo((isset($_POST['parent']) && $_POST['parent']=='')?'select':'');?>></option>
      	   <?php while ($parent=mysqli_fetch_assoc($parentQuery)):?>
   
            <option value="<?php echo $parent['id'];?>"<?php echo((isset($_POST['parent']) && $_POST['parent']==$parent['id'])?'select':'');?>><?php echo $parent['categorie'];?></option>
           <?php endwhile;?>
      	</select>
      </div>

      <div class="form-group col-md-3">
      	<label for="enfant">Catégorie Enfant*:</label>
      	<select class="form-control" id="enfant" name="enfant">
      		<option value=""></option>
      	</select>
     </div>
     </form>
     <?php }else{
      if (isset($_GET['envedette'])) {
      	$id=(int)$_GET['id'];
      	$envedette=(int)$_GET['envedette'];
      	$envedettesql="UPDATE produits SET envedette='$envedette' WHERE id='$id'";
      	$db->query($envedettesql);
      	header('Location:produits.php');
      }
?>


<h2 class="text-center">Produits</h2>
<a href="produits.php?ajouter=1" class="btn btn-success pull-right" id="ajouter_btn">Ajouter Produit</a><div class="clearfix"></div><br>
<table class="table table-bordered table-condensed table-striped" id="table">
<thead><th></th><th>Produit</th><th>Prix</th><th>Catégorie</th><th>En Vedette</th><th>Solde</th></thead><tbody>
<?php while($produit=mysqli_fetch_assoc($presultat)): 

	$enfantid=$produit['categories'];
	$catsql="SELECT * FROM categories WHERE id='$enfantid'";
	$resultat=$db->query($catsql);
    $enfant=mysqli_fetch_assoc($resultat);
   
    $parentid=$enfant['parent'];
    $psql="SELECT * FROM categories WHERE id='$parentid'";
    $presult=$db->query($psql);
    $parent1=mysqli_fetch_assoc($presult);
    
    $categorie=$parent1['categorie'].'~'.$enfant['categorie'];
?>
<tr>
	<td>
	  <a href="produits.php?edit=<?php echo $produit;?>" class="btn btn-xls btn-default"><span class="glyphicon glyphicon-pencil"></span></a>
	  <a href="produits.php?delete=<?php echo $produit;?>" class="btn btn-xls btn-default"><span class="glyphicon glyphicon-remove"></span></a>	
	</td>
	<td><?php echo $produit['titre'];?></td>
	<td><?php echo monnaie($produit['prix']);?></td>
	<td><?php echo $categorie ;?></td>
	<td><a href="produits.php?envedette=<?php echo (($produit['envedette']==0)?'1':'0');?>&id=<?php echo $produit['id'];?>" class="btn btn-xs btn-default glyphicon glyphicon-<?php echo (($produit['envedette']==1)?'minus':'plus');?>"<span class="glyphicon glyphicon-<?php echo (($produit['envedette']==1)?'minus':'plus');?>"></span></a>&nbsp <?php echo (($produit['envedette']==1)?'produit en vedette':'');?></td>
	<td></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<?php } include'pages/pieddepage.php'; ?>

    pieddepage.php

    </div>
 <footer class="col-md-12 text-center" id="footer">&copy; Copyright 2018 Commande en Ligne</footer>


<script>
 $(document).ready(function(){
     
    function get_enfant_options() {
        var parentID=jQuery('#parent').val();

        alert(parentID);
        jQuery.ajax({
           url:'/Vente en Ligne/admin/parsers/enfantcategories.php',
           type:'POST',
           data:{parentID : parentID},
           success:function(data){
            jQuery('#enfant').html(data);
           },
           error:function(){alert("Quelque chose s'est mal passé avec les options enfants")},
        });
    }
    jQuery('select[name="parent"]').change(get_enfant_options);

  });
</script>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script  src="js/jquery.js"></script>
    <script  src="js/jquery.min.js"></script>
    <script  src="js/script.js"></script>
    <script  src="js/jquery-ui.js"></script>
    <script  src="js/jquery-3.3.1.js"></script>
    <script  src="bootstrap-3.2.0-dist/js/jquery-1.10.2.js"></script> 
    <script  src="bootstrap-3.2.0-dist/js/bootstrap.js"></script> 
    
  </body>
</html>

    enfantcategories.php

    <?php 
 require_once $_SERVER['DOCUMENT_ROOT'].'/Vente en Ligne/coeur/initialiser.php'; 
 $parentID=(int)$_POST['parentID'];
 $enfantQuery=$db->query("SELECT * FROM categories WHERE parent='$parentID' ORDER BY categorie");
 ob_start();?>
   <option value=""></option>
      	   <?php while ($enfant=mysqli_fetch_assoc($enfantQuery)):?>
   
                 <option value="<?php echo $enfant['id'];?>"><?php echo $enfant['categorie'];?></option>
           <?php endwhile;?>
<?php echo ob_get_clean();?>

    merci pour votre aide



    • Partager sur Facebook
    • Partager sur Twitter
    Genroa
    • Javascript
      13 août 2018 à 10:17:16

      Fournis nous la page finale générée. La source en PHP ne nous intéresse pas ici. :)
      • Partager sur Facebook
      • Partager sur Twitter
      /!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\
      yves juniorakpale
        13 août 2018 à 20:49:30

        voici la photo genéré

        produits

        -
        Edité par yves juniorakpale 13 août 2018 à 20:51:08

        • Partager sur Facebook
        • Partager sur Twitter
        Genroa
        • Javascript
          14 août 2018 à 1:45:10

          ...j'aurais dû mieux m'exprimer. Le code HTML+JS, s'il te plaît. ^^'

          -
          Edité par Genroa 14 août 2018 à 1:45:53

          • Partager sur Facebook
          • Partager sur Twitter
          /!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\
          yves juniorakpale
            14 août 2018 à 13:03:13

            Ok! le voici:

            le code HTML

            <div class="form-group col-md-3">
      	<label>Catégorie Parent*:</label>
      	<select class="form-control" id="parent" name="parent">
      	  <option value=""<?php echo((isset($_POST['parent']) && $_POST['parent']=='')?'select':'');?>></option>
      	   <?php while ($parent=mysqli_fetch_assoc($parentQuery)):?>
   
            <option value="<?php echo $parent['id'];?>"<?php echo((isset($_POST['parent']) && $_POST['parent']==$parent['id'])?'select':'');?>><?php echo $parent['categorie'];?></option>
           <?php endwhile;?>
      	</select>
      </div>

      <div class="form-group col-md-3">
      	<label for="enfant">Catégorie Enfant*:</label>
      	<select class="form-control" id="enfant" name="enfant">
      		<option value=""></option>
      	</select>
     </div>

            le code JS

            <script>
 $(document).ready(function(){
     
    function get_enfant_options() {
        var parentID=jQuery('#parent').val();

        alert(parentID);
        jQuery.ajax({
           url:'/Vente en Ligne/admin/parsers/enfantcategories.php',
           type:'POST',
           data:{parentID : parentID},
           success:function(data){
            jQuery('#enfant').html(data);
           },
           error:function(){alert("Quelque chose s'est mal passé avec les options enfants")},
        });
    }
    jQuery('select[name="parent"]').change(get_enfant_options);

  });
</script>




            • Partager sur Facebook
            • Partager sur Twitter
            Genroa
            • Javascript
              14 août 2018 à 13:24:40

              Ce code HTML contient encore du PHP. Publie le HTML final s'il te plait.
              • Partager sur Facebook
              • Partager sur Twitter
              /!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\
              echo AlexandreB
              • Javascript
                14 août 2018 à 14:16:48

                vu ta requet ajax tu met le retour json directement dans ton select avec .html(), peut être un petit problèmes de ce coter la.

                • Partager sur Facebook
                • Partager sur Twitter
                Genroa
                • Javascript
                  14 août 2018 à 14:25:45

                  C'est très probable aussi oui, il faut créer les balises option, c'est pas automatique dans le DOM
                  • Partager sur Facebook
                  • Partager sur Twitter
                  /!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\

                  Manipulation du champ "select"de PHP avec 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