Récuperer des données javascript en php

CWick
PHP

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je cherche à récuperer les données que je fais passer avec javascript en php pour pouvoir faire une requête sql

Voici mon modal : 

<!-- Modal -->
<div class="modal fade" id="addBookDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Action</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
        <button type="button" class="btn btn-primary">Enregistrer</button>
      </div>
    </div>
  </div>
</div>

Mon javascript : 

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     var myBookSalon = $(this).data('salon');
     $(".modal-body #bookId").val( myBookId );
     $(".modal-body #bookSalon").val( myBookSalon );
});

Ce que je veux

Je souhaite affiché le contenu de mon "data-id" et "data-salon" sur mon modal et pouvoir récuperer les données pour faire une requête sql.

Ce que j'obtiens

6 réponses

santo17
Réponse acceptée

Hello CWick.
Déjà, tu ne nous montres pas le code complet de ton modal comme le fait savoir Lartak, du coup c'est un peu compliqué de t'aider.
Mais bon, à mon avis comme le dis Lartak, tu sélectionnes et veux modifier des élements HTML qui n'existent pas dans le DOM.
Ce qu'il faut faire dans ton cas, c'est simple:

Modal

<!-- Modal -->
<div class="modal fade" id="addBookDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Action</h4>
      </div>
      <div class="modal-body">
        <p id="bookId"></p>
        <p id="bookSalon"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
        <button type="button" class="btn btn-primary">Enregistrer</button>
      </div>
    </div>
  </div>

Ou ceci (Autre modal)

<!-- Modal -->
<div class="modal fade" id="addBookDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Action</h4>
      </div>
      <div class="modal-body">
        <form>
            <div class="form-group">
                <input type="text" id="bookId" class="form-control">
                <input type="text" id="bookSalon" class="form-control">
            </div>
        </form>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
        <button type="button" class="btn btn-primary">Enregistrer</button>
      </div>
    </div>
  </div>

Javascript

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     var myBookSalon = $(this).data('salon');
     // Si tu utilises des input (Champs de texte)
     $(".modal-body #bookId").val( myBookId );
     $(".modal-body #bookSalon").val( myBookSalon ); 
      /* Si tu utilises autres choses que des input (p, span, div, etc), 
      utilises les methodes .text(), .html(), ou encore append. C'est selon ;) */
       $(".modal-body #bookId").text( myBookId ); 
       $(".modal-body #bookSalon").text( myBookSalon ); 
       $("#addBookDialog").modal('toggle'); //Permet d'afficher la boîte modal après avoir ajouté les informations
});

J'espère t'avoir aidé. ;)

santo17
Réponse acceptée

Tu passes par un formulaire et tu utilises la methode POST ou GET c'est selon.

Lartak

Bonsoir.
Il y a plusieurs problèmes avec le code que tu nous montre.

  • Tu veux sélectionner des éléments HTML qui n'existent pas dans ta page, tel que des éléments ayant la classe modal-body ayant comme valeur pour l'attribut id bookId ou bookSalon.
  • Tu utilises val qui n'est pas du tout approprié dans le cas présent.

Ces deux problèmes en sont bien sûr, à moins que tu ne nous donnes pas le code complet de ta modale.

CWick
Auteur

Hello Lartak,

merci de ta réponse, il y a effectivement tout le code de mon modal.

Je débute avec bootstrap et le js du coup, j'ai loupé des trucs

j'ai tenté de suivre ce tuto, sans succès :

http://www.alsacreations.com/article/lire/1397-html5-attribut-data-dataset.html

CWick
Auteur

Merci beaucoup :)

santo17

Je t'en prie! Tout le plaisir est pour moi ;) !