Switching Active Tabs Programattically: Jquery/Bootstrap

There are lots of different ways to control visibility of different types of web elements.

I’m working on the web front end of what will eventually become an HL7 message inspection tool.

I’ve set it up so that when the user pastes an HL7 message into the textarea on the #omsg pane,  the results will be pasted into the #parsedmsg pane.  I then want the latter pane to become visible.

I set all this up using bootstrap tabs.

The tab controls are anchors wrapped in list elements.  To show what tab is visible, Bootstrap relies on the class “active” to be added to the parent li tag.

I don’t know if I’m having an off day but I couldn’t figure out how to have that happen when I switched visibility programmatically.

The panes would switch visibility just fine, but I naturally wanted the active tab button to be highlighted.

Instead of toggling visibility of various elements,  I decided to write a function using DOM traversal to simulate clicking the desired button.

I’ll go into more detail below, but this is the function itself.

function activeTab(newtabid) {
$('#lpane > ul > li > a[href="'+newtabid+'"]').trigger('click');
});

The tab controls are contained in a div with the id of “lpane”.  As Bootstrap tabs rely on the href attribute, its easy enough to find which element to click using that particular parameter.

Here is the HTML

<div id="wrapper" class="col-lg-12">
<div id="header" class="col-lg-12">
<h3>HL7 Tool</h3>
</div>
<div id="lpane" class="col-lg-12 centered">
<ul class="nav nav-pills " style="text-align:center;">
	<li role="presentation"><a data-toggle="tab" href="#omsg">Original Message</a></li>
	<li role="presentation" id="lpmsg"><a class="btn" data-toggle="tab" href="#pmsg" href="#">Parsed Message</a></li>
	<li role="presentation"><a class="btn" data-toggle="tab" href="#redset" href="#">Redaction Settings</a></li>
	<li role="presentation"><a class="btn" data-toggle="tab" href="#redmsg" href="#">Redacted Message</a></li>
</ul>
</div>
<div id="cpane" class="tab-content col-lg-12">
<div id="omsg" class="tab-pane active">
<label for="#omsg">Original Message</label><textarea id="msg" class="form-control" placeholder="Paste Msg Here"></textarea>
<input type="button" class="btn" value="Parse" id="parsemsg"/><input type="button" class="btn" value="Clear" id="clearomsg" />
</div>
<div id="pmsg" class="tab-pane">
<div class="col-md-6" id="parsedmsg"></div>
</div>
<div id="redset" class="tab-pane">
REDSET
</div>
<div id="redmsg" class="tab-pane">
REDMSG
</div>
</div>
</div>

and finally…the actual script


<script>

$(document).ready(function(e){
 
$('#parsemsg').click(function(e){
 
$('#parsedmsg').parsehl7({msgin:$('#msg').val()});
 
 activeTab('#pmsg');
 
 }); //parsemsg
 
 }); //document ready

</script>

 

 

Advertisements

Database Result Set to HTML Table Function in PHP

Hi All;

I’m looking at a situation where I need to have several database tables view-able on a web front end without a lot of time to do it.

I created a quick and dirty function to accomplish this.  I thought others might find it useful.


function resultset2html($tblclass,$tblid,$headers,$resultset,$title = null,$titleclass = null) {

//$tblclass:  The html class for the table
//$tblid:  The html id for the table
//$headers:  An array of column headers
//$resultset:  The resultset from the PDO query
//$title: Optional table title
//$titleclass: Optional table title class
$output = "<table class='$tblclass' id='$tblid'>";   //sets up the output.

//creates a table title if specified
if ($title != null) {
if ($titleclass == null) {
$titleclass = '';
} else {
$titleclass = "class='$titleclass'";
}
$output .= "<tr $titleclass>";
$colcount = count($headers);
$output .= "<th colspan='$colcount'>".$title."</th>";
$output .= '</tr>';
}

//header row
$output .= "<tr>";
foreach($headers as $colh) {

$output .= "<th>".$colh."</th>";  //creates header row

}

$output .= '</tr>';

foreach($resultset as $row) {   //iterates through result set

$output .= '<tr>';

foreach ($row as $line) {  //iterates through each column of result set

$output .= "<td >".$line.'</td>';


}

$output .= '</tr>';


}

$output .= '</table>';

return $output;

}

Here is the code where I retrieve the result set from a PDO connection ($dbh) and send it to the function.

I’m using Bootstrap for most of my formatting.


$sql = "SELECT rsndmsg,odatetime,lresenddt,attempts,discard,discardreason,notes FROM hrm_resends WHERE sent = 0";

$q = $dbh->prepare($sql);
$q->execute();

$resends = $q->fetchAll(PDO::FETCH_ASSOC);

$headers = array('Message Id','Original Date/Time','Last Attempt','# attempts','discard','Discard reason','Notes');

$resendtable = resultset2html('table-striped table-bordered', 'resends',$headers, $resends,"Messages Queued for Resend","tbltitle");

This is the non Bootstrap css I levered in:


td,th {
padding-left:5px;
padding-right:5px;
}

.tbltitle th {
background-color:#0073EA !important;
color:#FFF;
text-align: center;
font-weight: bold;
font-size:large;
}

and, here is the output!

php_resultset2html