Bootstrap modal Replace Button with Link - Dynamic Div IDs

Question

Using bootstrap to include modal within dynamic php loop. Working wonderfully by dynamically changing the div ID by adding a unique field from each line in the iteration:

foreach($classes as $class => $details)
    {
     $unique = $class->['ID'];
     $name = $class->['Name';
     $description = $class->['Description';

    ?>
    <button class="btn btn-xs" data-toggle="modal" data-target="#myModal<?php echo $sclassid ?>">
<?php echo $name ?></button>
        <!-- Small modal -->
        <div id="myModal<?php echo $sclassid ?>" class='modal fade bs-example-modal-sm' tabindex='-1' role='dialog' aria-labelledby='mySmallModalLabel' aria-hidden='true'>
      <div class='modal-dialog modal-sm'>
        <div class='modal-content'>
                <?php echo $classDescription?>  
            <button type="button" class="btn btn-xs" data-dismiss="modal">Close</button>  
        </div>
      </div>
  </div>

If you're not generating unique IDs (#myModal-somevalue) then every instance of the modal will open up on each click. Ouch.

At any rate - I could style the buttons to look like links, but is there a way to send the same information to the bootstrap jscript code using a link similar to this:

<a href="javascript:void(0)" class="md-trigger" onclick="$('.bs-example-modal-sm').modal('show')"><?php echo $className ?>

Adding data-target="#myModal<?php echo $sclassid ?>" didn't work.

Is there any reason that one way or the other would be better.

I look forward to your insights and feedback.

Off to read Eloquent Javascript by Marijn Haverbeke...

Answer 1

Instead of looping over the modal itself, why not set up -one- modal, and use jQuery's ajax() to inject another page into the modal container - no need for unique ID tomfoolery.

Here's how I do it (this is in ColdFusion, so the # signs are the equivalent to PHP's variable markers) - also note this is Bootstrap 2.1.0, but a few structure/class changes will get it working in 3.1.1:

Here's the URL to launch the modals (this could be output by your looping script, dynamically setting the url parameters to pass to the script that contains your modal content):

<a href="/modal/showDocHistory_Modal.cfm?docPropID=#GetMetaData.docPropID#&File=#URLEncodedFormat(name)#" data-target="#histModal" data-toggle="modal" rel="tooltip" data-placement="left" title="Click to view document history" class="btn btn-mini ajax"><i class="icon icon-list-alt"></i></a>

Next, you have the container for the modal:

<!--- DIV container for history modal --->
<div class="modal hide fade" id="histModal" style="width:80%; margin-left:-40%;"></div>

Lastly, a bit of jQuery to ensure the URL passed to the modal is unique (otherwise, the last clicked link will always appear the next time the modal is launched):

<!--- script to ensure ajax modal always loads currently clicked link --->
<script type="text/javascript">
$(document).ready(function() {
    $.ajaxSetup({ cache: false });
    $('[data-toggle="modal"].ajax').click(function(e) {
      e.preventDefault();
      var url = $(this).attr('href');
      var target = $(this).data('target');
      if (url.indexOf('#') == 0) {
      $(target).modal('open');
      } else {
          $.get(url, function(data) {
                              $(target).html(data);
                              $(target).modal();
          }).success(function() { $('input:text:visible:first').focus(); });
      }
    });
});
</script>

Now, all you need to do is loop over your HREF and provide the parameters to feed to the external script that contains your modal content (the external script will just have the modal body tags, since the main modal container will be in the calling script).