I’m working on a small personal project, arthritis and experimenting with some new (to me) things. I’m using CodeIgniter as a PHP framework and Twitter’s Bootstrap for the layout and design. Bootstrap is actually a conglomeration of other neat concepts nicely packaged, viagra 40mg one that I’ve already been using, decease the 960 Grid System (although their’s is slightly modified), and LESS.css which I’m totally loving.

One of the issues I ran into pretty quickly is Modal dialog boxes. I have a view in my web app where the user is presented with a table of data, and they can click on the table row to edit that data. The edit box is a modal popup that is filled in with the data for them to edit.

While the Bootstrap framework has javascript plugins for modal dialog boxes, it doesn’t have a “standard” way of loading content into them, aside from statically.

After googling around I came across two sites that each provided part of the answer I was looking for. The first site I found was at ThePhuse.com were I found an article outlining a good way of implementing clickable table rows. The second site was more specifically about loading dynamic content into Bootstraps’ tabs.

I took the two sites and mashed up the knowledge and came up with the following code:

<!-- this is the table that shows the user information -->
<table class="zebra-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<?php
$fields = array('id','first_name','last_name','email');
foreach ($data as $user) { ?>
<tr data-href="/users/edit/<?php echo $user->id; ?>/1">
<?php foreach ($fields as $field) { ?>
<td><?php echo $user->$field; ?></td>
<?php } ?>
</tr>
<?php } ?>
</tbody>
</table>

<!-- this is the placeholder for the modal box -->
<div id="modal-editUser" class="modal hide">
<!-- content will go here -->
</div>

<!-- this is the code that makes it all happen -->

<script type="text/javascript">
jQuery( function($) {
// find all tr's with a data-href attribute
$('tbody tr[data-href]').click( function() {
// copy the data-href value to the modal for later use
$('#modal-editUser').attr('data-href',$(this).attr('data-href'));
// show the modal window
$('#modal-editUser').modal({show: true , backdrop : true , keyboard: true});
}).find('a').hover( function() {
// unbind it in case I put some a tags in the table row eventually
$(this).parents('tr').unbind('click');
}, function() {
$(this).parents('tr').click( function() {
// rebind it
$('#modal-editUser').attr('data-href',$(this).attr('data-href'));
$('#modal-editUser').modal({show: true , backdrop : true , keyboard: true});
});
});

// when the modal show event fires, load the url that was copied to the data-href attribute
$('#modal-editUser').bind('show', function() {
$(this).load($(this).attr('data-href'));
});
});
</script>