Question

I have some rows in my database including name, description and an image.

What I’m looking to do though, is to display these records in a HTML list, that has a ‘link/button’ that when I click on it, it opens a jQuery dialog with the image inside it.

What I’m doing so far, is looping through the records passing the object to a partial. The partial includes a div that simply displays the image.

I have so far:

editSuccess.php

 $( ".image" ).dialog({
    autoOpen: false,
    height: 1000,
    width: 1000,
    position: [130, -100],
    modal: true,
    buttons: {
    Close: function() {
        $( this ).dialog( "close" );
    }
    },
    close: function() {
    }
 });

 $(".view-image" )
        .button()
        .click(function() {
            $( ".image" ).dialog( "open" );
});

<?php foreach($items as $item): ?>
    <div class="item">
        <?php echo $item->getName(); ?>
        <?php include_partial('templates/editTemplate', array('item'=>$item)); ?>
        <button class="view-image">View</button>
    </div>
<?php endforeach; ?>

_editTemplate.php

<div class="image">
    <?php echo $item->getImage(); ?>
</div>

The problem is, there is 10 records that are output. When I click on the ‘View’ button, it opens up a dialog for each one of the 10 items.

Is there a way were I click on a ‘View’ it only opens the dialog for that actual record?

Answer 1

Your code pretty much calls the modal to open up every class that has image. You have to specify the context on which specific image you want to open instead.

<script>
$(function() {

    /** Modal dialog */
    var dialog = function (content) {
        var modal;
        if (!$('#modal').length) {
            $('body').append($('<div id="modal"></div>'));
            $(document.body).append(modal);         
        }
        modal = $('#modal');
        modal.dialog({
            autoOpen: true,
            height: 1000,
            width: 1000,
            position: [130, -100],
            modal: true,
            buttons: {
                Close: function () {
                    $(this).dialog("close");
                }
            },
            close: function () {}
        });
        modal.html(content);
   };

   $('.view-image').click(function(e) {
      // Call the dialog and pass the content of the image class.
      dialog($(".image", $(this).parent('.item')).html());

      return false;   
   });

});
</script>

...Your PHP code follows.

To resolve your jQuery UI dialog specific issue, here’s the jsFiddle address the dialog issue (concept-wise). jsFiddle

I updated the answer above on how this can be integrated with your PHP app.