jQuery Girl
  1. jQuery Girl
  3. Charger des données JSON dans un modal Bootstrap
Intereting Posts
Superposition du bouton de fermeture sur le bouton Facebook, tout en conservant les fonctionnalités Réédition des événements dans fullCalendar après la mise à jour de la firebase database Ajax Déclenchement de la fonction javascript en fonction de la condition PHP jquery pour récupérer le contenu d’une rangée sélectionnée dans php django-autocomplete-light – Comment retourner un champ différent de la clé primaire d’un modèle? Enveloppez tous les 2 divs dans un nouveau div Obtenir la largeur de la bordure dans jQuery Faire pivoter le sprite javascript Boutons de défilement – avec jQuery rails 3 – formulaire ajax ajax: événement de réussite non appelé Afficher une div et masquer les autres en cliquant sur un lien Problème d’appel de la bibliothèque de services WCF à partir de jQuery Dans une instruction if / else, e.preventDefault () n’effectue pas 100% des conditions. Ajouter une fonction de téléchargement d’image dans ce code ajax existant API Google Maps v3 Chargement uniquement après l’actualisation de la page

Charger des données JSON dans un modal Bootstrap

Je veux charger un fichier JSON qui crée une liste dans un Bootal Modal. Je l’ai défini où si vous cliquez sur la photo d’une personne, le modal apparaît. 

  •   Kenneth Atkins 
    Kenneth Atkins
     
    [Description here]
          
    •

    Voici un exemple de données JSON: 

      var florida_exoneration = [ { "last_name":"Atkins", "first_name":"Kenneth", "age":16, "race":"Caucasian", "state":"FL", "crime":"Sexual Assault", "sentence":"10 years", "conviction":2004, "exonerated":2008, "dna":"", "mistaken witness identification":"", "false confession":"", "perjury/false accusation":"Y", "false evidence":"", "official misconduct":"", "inadequate legal defense":"", "compensation":"" } ]

    J’aimerais que le modal affiche quelque chose comme ceci dans la boîte: 

     Title = "first_name + last_name" Age = "age" Race = "race" State = "state" "" ""

    Je veux aussi m’assurer que les données sont liées à l’image afin que le modal ne soit pas confondu. Je suis désolé si c’est un peu déroutant. Je vais essayer de clarifier si quelqu’un a des questions.

    Méthode 1: en utilisant Ajax

    Chaque fois qu’un utilisateur clique sur une image, vous obtenez l’ID de l’image cliquée, puis vous envoyez une demande Ajax au serveur afin d’obtenir l’object JSON.

    HTML

    JavaScript 

     (function($) { var infoModal = $('#myModal'); $('.thumbnail').on('click', function(){ $.ajax({ type: "GET", url: 'getJson.php?id='+$(this).data('id'), dataType: 'json', success: function(data){ htmlData = '
    • title: '+data.first_name+'
    • age: '+data.age+'
    '; infoModal.find('.modal-body').html(htmlData); infoModal.modal('show'); } }); return false; }); })(jQuery);

    Méthode 2: en utilisant div div

    Aucune requête Ajax n’est nécessaire, mais vous devez créer un div masqué contenant toutes les informations que vous souhaitez afficher dans le modal.

    HTML

    JavaScript 

     (function($) { var infoModal = $('#myModal'); $('.thumbnail').on('click', function(){ htmlData = $(this).find('.profile').html(); infoModal.find('.modal-body').html(htmlData); infoModal.modal('show'); return false; }); })(jQuery);