将JSON数据加载到Bootstrap模式中 [英] Load JSON data into a Bootstrap modal

问题描述

我想加载一个在Bootstrap Modal内创建列表的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.

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

这是JSON数据的示例:

Here's an example of the JSON data:

    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:使用Ajax

每次用户单击图像时，都会从单击的图像中获取ID，然后将Ajax请求发送到服务器以获取JSON对象.

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.

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

方法2:使用隐藏的div

不需要任何Ajax请求，但是您需要创建一个隐藏的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

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

这篇关于将JSON数据加载到Bootstrap模式中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！