Question

I am working on a project internally, and want to use simplemodal to display customer info, when clicked in the table where all the customers are listed.

This has however caused me some trouble, and therefore I am now asking you guys.

This is my code so far:

<table border="0" cellpadding="0" cellspacing="0" id="customertable" class="sortable">
<thead>
    <tr class="odd">
        <th>Navn</th>
        <th>Telefon</th>
        <th>Postnummer</th>
        <th>By</th>
    </tr>
</thead>
<tbody>
{foreach $results as $customer}
{strip}
   <tr class="{cycle values='even,odd'}">
      <td class="name" id='mousetracking' title={$customer.name}><a href="#" id="osx{$customer.customerid}">{$customer.name}</a></td>
      <td class="data">{$customer.phone}</td>
      <td class="data">{$customer.postcode}</td>
      <td class="data">{$customer.city}</td>
   </tr>
{/strip}
        <!-- modal content -->
        <div class="modalhidden">
            <div id="osx-modal-content{$customer.customerid}">
                <div id="osx-modal-title">Customer no #{$customer.customerid}</div>
                <div class="close"><a href="#" class="simplemodal-close">x</a></div>
                <div id="osx-modal-data">
                    <h2>Hello! I'm Customer no. #{$customer.customerid}</h2>
                </div>
            </div>
        </div>
{/foreach}
</tbody>
</table>
Displaying {$total} records<br />

<script type="text/javascript">
function addModal(x)
{
    $("osx" + x).addEvent("click", function(){
          var SM = new SimpleModal();
              SM.show({
                "title":"Title",
                "contents": $("#osx-modal-content" + x).html()
              });
        });

}
</script>

As you might have noticed, I am using smarty for the templating, which works fine.

Also, a single simplemodal works fine – but I want multiple of them with different content.

Question is, if this is a good idea, or if it should rather be on a separate page?

Please, tell if I am missing some information here – this is my first post 🙂

Regards,
Frederik

EDIT

I now have this code:

<table border="0" cellpadding="0" cellspacing="0" id="customertable" class="sortable">
<thead>
    <tr class="odd">
        <th>Navn</th>
        <th>Telefon</th>
        <th>Postnummer</th>
        <th>By</th>
    </tr>
</thead>
<tbody>
{foreach $results as $customer}
{strip}
   <tr class="{cycle values='even,odd'}">
      <td class="name" id='mousetracking' title={$customer.name}><a href="#" id="{$customer.customerid}">{$customer.name}</a></td>
      <td class="data">{$customer.phone}</td>
      <td class="data">{$customer.postcode}</td>
      <td class="data">{$customer.city}</td>
   </tr>
{/strip}
        <!-- modal content -->
        <!--<div class="modalhidden">-->
            <div id="modal_{$customer.customerid}">
                <div id="osx-modal-title_{$customer.customerid}">Customer no #{$customer.customerid}</div>
                <div class="close"><a href="#" class="simplemodal-close">x</a></div>
                <div id="osx-modal-data_{$customer.customerid}">
                    <h2>Hello! I'm Customer no. #{$customer.customerid}</h2>
                </div>
            </div>
        <!--</div>-->
{/foreach}
</tbody>
</table>
Displaying {$total} records<br />

Together with this JS code:

jQuery(function ($) {
    var OSX = {
        container: null,
        init: function () {
            $("a").click(function (e) {
                e.preventDefault(); 

                $('#modal_' + this.id).modal({
                    overlayId: 'osx-overlay',
                    containerId: 'osx-container',
                    closeHTML: null,
                    minHeight: 80,
                    opacity: 65, 
                    position: ['0',],
                    overlayClose: true,
                    onOpen: OSX.open,
                    onClose: OSX.close
                });
            });
        },
        open: function (d) {
            var self = this;
            self.container = d.container[0];
            d.overlay.fadeIn('slow', function () {
                $('#modal_' + this.id, self.container).show();
                var title = $('#osx-modal-title_' + this.id, self.container);
                title.show();
                d.container.slideDown('slow', function () {
                    setTimeout(function () {
                        var h = $('#osx-modal-data_' + this.id, self.container).height()
                            + title.height()
                            + 20; // padding
                        d.container.animate(
                            {height: h}, 
                            200,
                            function () {
                                $("div.close", self.container).show();
                                $('#osx-modal-data_' + this.id, self.container).show();
                            }
                        );
                    }, 300);
                });
            })
        },
        close: function (d) {
            var self = this; // this = SimpleModal object
            d.container.animate(
                {top:"-" + (d.container.height() + 20)},
                500,
                function () {
                    self.close(); // or $.modal.close();
                }
            );
        }
    };

    OSX.init();

});

and the original jquery.simplemodal.js

My only problem now is, that it loads the modal with the right div, but that div is hidden..

Answer 1

Alright. I managed to fix it myself.

Ended up with this code:

<table border="0" cellpadding="0" cellspacing="0" id="customertable" class="sortable">
<thead>
    <tr class="odd">
        <th>Navn</th>
        <th>Telefon</th>
        <th>Postnummer</th>
        <th>By</th>
    </tr>
</thead>
<tbody>
{foreach $results as $customer}
{strip}
   <tr class="{cycle values='even,odd'}">
      <td class="name" id='mousetracking' title={$customer.name}><div id="basic-modal"><a href="#" id="{$customer.customerid}">{$customer.name}</a></div></td>
      <td class="data">{$customer.phone}</td>
      <td class="data">{$customer.postcode}</td>
      <td class="data">{$customer.city}</td>
   </tr>
{/strip}
{/foreach}
</tbody>
</table>
{foreach $results as $customer}
{strip}
        <!-- modal content -->
        <div id="basic-modal-content_{$customer.customerid}" style="display:none;" width="600px">
            <h3>{$customer.name}</h3>
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="150px;">Adresse</td>
                    <td>{$customer.address1}<br />{$customer.postcode}&nbsp;{$customer.city}</td>
                </tr>
                <tr>
                    <td width="150px;">Telefon</td>
                    <td>{$customer.phone}</td>
                </tr>
                <tr>
                    <td width="150px;">Fax</td>
                    <td>{$customer.fax}</td>
                </tr>
                <tr>
                    <td width="150px;">Email</td>
                    <td>{$customer.email}</td>
                </tr>
                <tr>
                    <td width="150px;">Website</td>
                    <td>{$customer.web}</td>
                </tr>
            </table>
            <br /><br />
            <h4>Server Setup</h4>
            <code>{$customer.Server_setup}</code>
        </div>
{/strip}
{/foreach}
Displaying {$total} records<br />

Together with this javascript:

jQuery(function ($) {
    // Load dialog on page load
    //$('#basic-modal-content').modal();

    // Load dialog on click
    $('#basic-modal a').click(function (e) {
        $('#basic-modal-content_' + this.id).modal({
            overlayClose:true
        });
        return false;
    });

});

And it works like a charm.

Thanks for all the input.