[Résolu] .data problème avec les espaces ?

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)