5

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>

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.

Improve this question
0

1 Answer 1

Reset to default
11

Method 1: using 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.

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

(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

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

(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);
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.