11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Je suis nouveau sur le forum et actuellement en stage de développement Web et Web Mobile.
J'aurai une question pour un exercice que j'ai à faire, en gros je fais un gestionnaire pour réserver des salles.
Donc dans la partie admin j'ai une modal qui s'ouvre au clique sur un bouton (le bouton lui même en fin de chaque ligne d'un tableau contenant toute les demande de réservation).
J'ai créer la modale et à l'ouverture dans plusieurs input je remet les informations de la réservation.
Le problème étant que ça récupère bien mes données, pas de soucis, mais ça se bloque dès qu'il y a un espace, enfin je suppose. (c'est à dire que pour une donnée "La salle des fêtes" seulement "la" vas s'afficher, peut être est-ce juste logique avec le .data je ne trouve pas les informations sur le net...).
Je suis en formation donc forcément débutant, désolée d'avance des erreur peut être idiote que je peux faire !

voici le jquery :

$(document).ready(function (){
 $('#modal_editer').on('show.bs.modal', function(e){
        var button = $(e.relatedTarget);
        var id = button.data('id');
        var nom = button.data('nom'); 
        var deb = button.data('date_deb');
        var fin = button.data('date_fin');
        var prenom = button.data('prenom');
        var org = button.data('organisme');
             var statut = button.data('statut');
        var salle = button.data('salle');
        var statut2 = button.data('statut2');
	      var detail = button.data('detail');
        var validation = button.data('validation');

console.log(salle);
              var modal = $(this)
		     modal.find('.id2').val(id);
             modal.find('.nom2').val(nom);
             modal.find('.prenom2').val(prenom);
	         modal.find('.deb2').val(deb);
             modal.find('.fin2').val(fin);
             modal.find('.org2').val(org);
             modal.find('.statut2').val(statut);
             modal.find('.statut23').val(statut2);
             modal.find('.salle2').val(salle);
             modal.find('.detail2').val(detail);
             modal.find('.validation2').val(validation);
    

             if(validation== 1){
                $('#validation2').prop('checked', true);
             }else{
                $('#validation2').prop('checked', false);
             }
      })





Le bouton qui lance la modale :

<td><button type="button" data-date_deb='.$result["Date_deb"].' data-date_fin='.$result["Date_fin"].' data-nom='.$result["Nom"].' data-prenom='.$result["Prenom"].' data-organisme='.$result["Organisme"].' data-statut='.$result["Statut"].' data-salle='.$result["Salle"].' data-statut2='.$result["Statut2"].' data-detail='.$result["Detail"].' data-validation='.$result["Validation"].' data-id='.$result["Id_reservation"].' name="btn_editer" data-toggle="modal" data-target="#modal_editer" class="bg-success btn btn-success mr-auto btn_editer">Valider</button></td>






Et la modale en elle même :

<!------------------Modal editer ----------------------------->
<div class="modal" id="modal_editer" class="modal fade" name="modal_editer" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header bg-info">
                  <h5 class="modal-title">EDITER</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">

           
                  <form id="form_editer" action="form_editer.php" method="POST">

                  <input type="text" id="id2" name="id2" class=" id2" hidden>
                    <label>Nom :</label>
                    <br/>
                    <input type="text" id="nom2" name="nom2" class="form-control nom2" disabled>
                     <br/>
                   
                   <label>Prénom :</label>
                    <br/>
                    <input type="text" id="prenom2" name="prenom2" class="form-control prenom2" disabled>
					<br/>
                                    <label>Organisme :</label>
                    <br/>
                    <input type="text" id="org2" name="org2" class="form-control org2" disabled>
					<br/>
					                   <label>Date début :</label>
                    <br/>
                    <input type="text" id="deb2" name="deb2" class="form-control deb2" disabled>
					<br/>
					                   <label>Date fin :</label>
                    <br/>
                    <input type="text" id="fin2" name="fin2" class="form-control fin2" disabled>
					    <br/>
					
					                   <label>Statut :</label>
                    <br/>
                    <input type="text" id="statut2" name="statut2" class="form-control statut2" disabled>
					    <br/>
					                   <label>Salle :</label>
                    <br/>
                    <input type="text" id="salle2" name="salle2" class="form-control salle2" disabled>
					    <br/>
					                   <label>Statut précision :</label>
                    <br/>
                    <input type="text" id="statut23" name="statut23" class="form-control statut23" disabled>
					    <br/>
					                   <label>Détails :</label>
                    <br/>
                    <input type="text" id="detail2" name="detail2" class="form-control detail2" disabled>
			
                    
<br/>

              
                <hr>
				  <label>Valider la réservation :</label>
                    <label class="switch">
  <input id="validation2" name="validation2"  class="validation2" type="checkbox">
  <span class="slider round"></span>
</label>
            
        
<br/>
<br/>
<div id="retour_editer">

</div>
<br/>
<div class="mx-auto text-center">
<button type="submit" id="btn_valide" name="btn_valide" class="bg-info btn btn-primary m-2 mr-auto">Valider</button>
<button type="button" id="btn_annule" name="btn_annule" class="bg-info btn btn-primary m-2 mr-auto">Annuler</button>
</div>

                
                  </form>
                </div>
              </div>
            </div>
          </div>
          <!---------------- fin modal editer --------------------------->



Bon pour ma part je pense que le problème viens du jquery.. mais je ne sais pas comment résoudre le problème, si je pourrais avoir quelques piste...

Merci d'avance!
Modifié par Hanneton (19 Mar 2019 - 15:02)
Sur ton bouton qui lance la modale, vérifie les data en faisant un inspecteur sur le bouton.
Cela provient sans doute d'un conflit de guillemets simples/doubles.


le code de ton bouton se trouve dans un fichier php je suppose ?

<td><button type="button" data-date_deb='.$result["Date_deb"].' data-date_fin='.$result["Date_fin"].' data-nom='.$result["Nom"].' data-prenom='.$result["Prenom"].' data-organisme='.$result["Organisme"].' data-statut='.$result["Statut"].' data-salle='.$result["Salle"].' data-statut2='.$result["Statut2"].' data-detail='.$result["Detail"].' data-validation='.$result["Validation"].' data-id='.$result["Id_reservation"].' name="btn_editer" data-toggle="modal" data-target="#modal_editer" class="bg-success btn btn-success mr-auto btn_editer">Valider</button></td>
Merci de la réponse tout d'abord !
Oui mon bouton proviens d'un fichier PHP

	$retour .= '<td>'.$result["Validation"].'</td>';
				 if ($result["Validation"] == 1 ) {          
 $retour .= '<td><button type="button" data-date_deb='.$result["Date_deb"].' data-date_fin='.$result["Date_fin"].' data-nom='.$result["Nom"].' data-prenom='.$result["Prenom"].' data-organisme='.$result["Organisme"].' data-statut='.$result["Statut"].' data-salle='.$result["Salle"].' data-statut2='.$result["Statut2"].' data-detail='.$result["Detail"].' data-validation='.$result["Validation"].' data-id='.$result["Id_reservation"].' name="btn_editer" data-toggle="modal" data-target="#modal_editer" class="bg-success btn btn-success mr-auto btn_editer">Valider</button></td>';
                }elseif($result["Validation"] == 0){

bon je ne met pas tout le code mais pour voir un peu l'ensemble...
il est en fin de tableau générer en PHP (le bouton), effectivement je vois le soucis qui peux se poser avec les guillemets mais aucun soucis apparent avec ça (même si j'ai tenter de nombreuse modification au cas où!).
Enfin bon je ne vois pas d'où viens le problème je vais virer fou Smiley sweatdrop .
$retour .= '<td><button type="button" data-date_deb="'.$result["Date_deb"].'" data-date_fin="'.$result["Date_fin"].'" .......

dans ton php, il manque les guillemets doubles pour tes datas.
Modifié par yiujia (20 Mar 2019 - 13:54)
Meilleure solution
Ah oui d'accord j’étais à coter de la plaque, c'était vraiment tout bête...
Merci vraiment pour cette aide ! Tout fonctionne plus de soucis Smiley smile
Bonjour Hanneton,

Fait attention, si tes valeurs php contiennent une double cote cela risque aussi de faire bug tes attributs, il faut je pense :
- soit mettre devant un \,
- soit les transformer en HTMLentitie