将JSON数据加载到引导模式中

I want to load a JSON file that creates a list inside a Bootstrap Modal. I have it set where if you click on a person's picture, the modal pops up.

我想加载一个JSON文件，它在引导模式中创建一个列表。我设置了如果你点击一个人的照片，模式就会弹出。

<li class="project span3" data-type="pfa">
    <a data-toggle="modal" data-target="#myModal" class="thumbnail">
        <img src="img/anon.jpg" alt="Kenneth Atkins" />
        <h1>Kenneth Atkins</h1>
        <p>[Description here]</p>
    </a>     
</li>

Here's an example of the JSON data:

下面是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":""
  }  
]

I'd like the modal to display something like this inside the box:

我想让模态在盒子里显示这样的东西:

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

I also want to make sure the data is tied to the picture so the modal doesn't get confused. I'm sorry if this is a bit confusing. I'll try and clarify if anyone has any questions.

我还想确保数据与图片绑定，这样模态就不会混淆。如果这有点混乱的话，我很抱歉。如果有人有任何问题，我将尽力澄清。

1 个解决方案

#1

Method 1: using Ajax

方法1:使用Ajax

Every time a user clicks an image, you get the id from the clicked image and then you send an Ajax request to server in order to get the JSON object.

每次用户单击一个图像时，您从单击的图像中获取id，然后向服务器发送Ajax请求以获取JSON对象。

HTML

HTML

<ul>
    <li class="project span3" data-type="pfa">
    <a href="#" data-id="2" class="thumbnail">
        <img src="img/anon.jpg" alt="Kenneth Atkins" />
        <h1>Kenneth Atkins</h1>
        <p>[Description here]</p>
    </a>     
    </li>
</ul>

JavaScript

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 = '<ul><li>title: '+data.first_name+'</li><li>age: '+data.age+'</li></ul>';
            infoModal.find('.modal-body').html(htmlData);
            infoModal.modal('show');
          }
        });

        return false;
    });
})(jQuery);

Method 2: using hidden div

方法二:使用隐藏div

No need to any Ajax request, but you need to create a hidden div that contain all the information you want to display in the modal

不需要任何Ajax请求，但是您需要创建一个隐藏的div，其中包含您想要在模式中显示的所有信息。

HTML

HTML

<ul>
    <li class="project span3" data-type="pfa">
    <a href="#" class="thumbnail">
        <img src="img/anon.jpg" alt="Kenneth Atkins" />
        <h1>Kenneth Atkins</h1>
        <p>[Description here]</p>
        <div class="profile hide">
            <ul>
                <li>title: Atkins Kenneth</li>
                <li>Age: 16</li>
            </ul>
        </div>
    </a>     
    </li>
</ul>

JavaScript

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);