Remplacer le contenu d'une div avec ajax

Résolu/Fermé

rolly41 Messages postés 242 Date d'inscription dimanche 16 novembre 2008 Statut Membre Dernière intervention 18 septembre 2023 - Modifié le 14 avril 2022 à 01:22
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 14 avril 2022 à 08:53

Bonjour,

J'ai actuellement un inpute au quel nous mettons un n° de serie. Une fois que l'on valide le bouton du formulaire, AJAX affiche une ligne avec le résultat de notre recherche.

Résultat :

J'ai bien le résultat qui s'affiche comme prévu.

Mon problème :

Quand je rentre un autre numéro de serie, une nouvelle ligne vient s'ajouter avec le résultat de la recherche.

Que devrait-il se passer ?

Je souhaite afficher le résultat de la recherche si aucune ligne n'est déjà affiché. Si une ligne est déjà affiché, supprimer cette ligne et ajouter une nouvelle ligne avec les résultat de la nouvelle recherche.

En attendant de corriger ce problème, j'ai mis en place un bouton qui supprime la ligne manuellement. Mais j'aimerais que cela se face automatiquement quand une nouvelle recherche est faite.

Voici la page index.php (Permet de mettre le numéro de serie)

<?php
    $cas="acceuil" ;
    include('../commun/connect_db.php') ;
    include('../commun/commun.html') ;
    include('../fonction/fonctions.php') ;
    if (!isset($_GET['cas']))
    {
        $cas="accueil" ;
    }
?>
<body>
   <div class="card" >
       <div class="card-header bg-transparent sticky-top border border-0 mt-0">
            <nav class="navbar sticky-top navbar-light bg-light">
                <ul class="nav nav-tabs  h-25" id="myTab" role="tablist" >
                    <li class="nav-item waves-effect waves-light active">
                        <div class="dropdown">
                              <button class="btn btn-outline-secondary dropdown-toggle rounded-0" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Ajouter
                              </button>
                              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item" href="pages/divers.php">Divers</a>
                                    <a class="dropdown-item" href="pages/ecran.php">Ecran</a>
                                    <a class="dropdown-item" href="pages/imprimante.php">Imprimante</a>
                                    <a class="dropdown-item" href="pages/unite.php">Pc Fixe</a>
                                    <a class="dropdown-item" href="pages/portable.php">Pc Portrable</a>
                              </div>
                        </div>
                    </li>
                </ul>
            </nav>          
        </div> <!-- FIN CARD HEADER-->
    </div>
<!--- Autocomplete Bootstrap --->
<div class="container w-10 mx-auto mt-3" id="list">
        <div class="row">
              <div class="col">
              <div class="input-group mt-1 mb-3">
                      <div class="input-group-prepend">
                          <b><h5>Recherche avec le N° de serie</h5></b>
                      </div>
                  </div>
                  <div class="input-group mt-1 mb-3">
                      <div class="input-group-prepend">
                          <input type="text" name="oxfam" id="oxfam" placeholder="N° Oxfam">
                      </div>
                      <input class="btn btn-outline-secondary rounded-0" type="button"  name="button" 
                          id="button" value="Oxfam" style="font-size:15px;">
                  </div>
              </div>
        </div>
        <div class="row">
            <div class="col">
                <span><h6 class="txt_oxfam_vert1"><b><u>Descriptif:</u></b></h6></span>
                <table border="1" align="left"><tr valign="top"><td width="82" align="center">N° Oxfam</td><td width="297" align="center">Description</td><td width="78" align="center">Prix unité</td></tr></table>
            </div>
        </div>
        <div id="description" ></div>
        <div class="row"  >
            <div class="col">
                <input type="hidden" class="form-control" name="ligne" id="ligne" style="border:0;width:0px;" >
            </div>
        </div>
       </div>
       <div id="stock-ap"></div>
       <div>
            <div class="col">

                <center><table width="800px" border="1">
                    <tr style="text-align:center;">
                        <td colspan="2"><b>Aperçu du stock</b></td>
                    </tr>
                    <tr style="text-align:center;">
                        <td>
                            <?php
                                echo 'Il y a <a href="ecran.php">xx ecrans</a> "en stock"';
                            ?>
                        </td>
                        <td>
                            <?php
                                echo 'Il y a <a href="imprimante.php">xx imprimantes</a> "en stock"';
                            ?>
                        </td>
                    </tr>
                </table></center>
            </div>
        </div>
    <script>
     $( "#oxfam" ).focus();
        </script>
            <script>
            $(document).ready( function(){
            $('#button').click( function()
                { 
                $.ajax({
                    type : 'GET', // envoi des données en GET ou POST
                    url : '../recherche_stock.php' , // url du fichier de traitement
                    data : 'oxfam='+$(oxfam).val() , 
                    success : function(data){ 
                      $('#description').append(data); // affichage des résultats dans le blo
                    }
                })
            $(oxfam).val();
                });
            });
    </script>
</body>
</html>

Voici la page recherche_stock.php (Page qui fait la recherche avec le N° de serie encodé)

<?php
$oxfam=$_GET['oxfam'];
include('commun/commun.html');
include('commun/connect_db.php');
$unique= uniqid();
if ($oxfam=='0')
{
    $oxfam="";
}
else 
{
    $requete="SELECT * FROM unite WHERE nox='$oxfam'" ; 
    $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
    $nb_unite = $resultat->rowCount();
    
    if ($nb_unite=='0')
    {
        $requete="SELECT * FROM portable WHERE nox='$oxfam'" ; 
        $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
        $nb_portable = $resultat->rowCount();
        
        if ($nb_portable=='0')
        {
            $requete="SELECT * FROM ecran WHERE nox='$oxfam'" ; 
            $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
            $nb_ecran = $resultat->rowCount();

            if ($nb_ecran=='0')
            {
                $requete="SELECT * FROM imprimante WHERE nox='$oxfam'" ; 
                $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
                $nb_print = $resultat->rowCount();

                if ($nb_print=='0')
                {
                    $requete="SELECT * FROM prix WHERE nox='$oxfam'" ; 
                    $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
                    $nb_print = $resultat->rowCount();
                }
            }
        }        
    }
    while($donnees = $resultat->fetch()) 
    {
        echo ' 
            <div id="ox_'.$unique.'" class="ok_form">
                <div class="row">
                    <div class="col">
                        <div class="input-group">
                           <input class="rounded-0 text-center" 
                                type="text" 
                                name="oxfam_item[]" 
                                id="oxfam_item_'.$unique.'" 
                                style="width:85px;" 
                                value="'.$oxfam.'"/>
                            <input class="rounded-0"  
                                type="text" 
                                name="description_item[]" 
                                style="width:300px;" 
                                value="'.$donnees['marque'].' - '.$donnees['model'].'"/>
                           <input class="rounded-0 text-center" 
                                type="text" 
                                name="prix_int_item[]"
                                id="prix_init_'.$unique.'"
                                style="width: 80px;" 
                                value="'.$donnees['prix'].'"/>
                            <a class="btn btn-danger bg_oxfam_danger text-light rounded-0" href="#" id="ret_'.$unique.'"" >
                                <span class="material-icons">
                                    clear
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>';
        }
echo "
<script>
    var nb_element_de_class=0;
    nb_element_de_class=$('.ok_form').length;
    $('#ligne').val(nb_element_de_class);
    $(document).ready( function(){
    $('#ret_".$unique."').click( function()
    {
    $('#ox_".$unique."' ).remove(); 
 var nb_element_de_class=0;
 nb_element_de_class=$('.ok_form').length;
 $('#ligne').val(nb_element_de_class);
 })
 });
</script>
<script>
    var nb_element_de_class=0;
    nb_element_de_class=$('.ok_form').length;
    $('#ligne').val(nb_element_de_class);
    $(document).ready( function(){
    $('#modif_".$unique."').click( function()
    {
    $('#ox_".$unique."' ).remove(); 
 var nb_element_de_class=0;
 nb_element_de_class=$('.ok_form').length;
 $('#ligne').val(nb_element_de_class);
 })
 });
</script>";   
}
?>

Pourriez-vous me dire pour quel raison une nouvelle ligne vient s'afficher au lieu de supprimer la 1ere ligne et afficher une nouvelle ligne avec la nouvelle recherche?

Merci d'avance.

A voir également:

Remplacer le contenu d'une div avec ajax
Remplacer disque dur par ssd - Guide
Remplacer word - Guide
Word a trouvé du contenu illisible - Guide
Div c++ - Télécharger - Langages
Remplacer un visage sur une photo - Guide

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
14 avril 2022 à 08:53

Bonjour,

La nouvelle ligne s'affiche à la suite des autres puisque tu utilises la fonction jquery append() : https://api.jquery.com/append/

Tu peux utiliser la fonction empty avant append pour vider le contenu de la balise :

$('#description').empty().append(data); // affichage des résultats

Remplacer le contenu d'une div avec ajax

1 réponse

Discussions similaires

Newsletters