Greetings!

I have a form that's meant to be a rudimentary search engine.

The forms calls the piece of code below and outputs successfully the results in a new tab.

<?php
//Includes the db config file
$dbconf = include '.../config/dbConfig.php';

//checks if fields are set.
if(isset($_POST['submit'])) {
if(
!empty($_POST['search_string'])
) {
searchWebcases();
searchResolutions();
} else {
echo "<html><body>
<script type=\"text/javascript\" language=\"javascript\">alert(
'Nothing to do.'
+ '\\n\\n' + ' You must type a letter, word or phrase before you can hit \"Run Search\"'
+ '.');</script> </body></html>";
}
}


function searchWebcases() {

/*
* Grabs $dbconf and declares variables.
*/
global $dbconf;
/*
* Grabs POST value.
*/
$q = $_POST['search_string'];

/*
* Connect to db.
*/
$con = mysql_connect($dbconf["host"], $dbconf["user"],$dbconf["password"]) ;
if (!$con) {
die('Could not connect: ' . mysql_error());
}

mysql_select_db($dbconf["db"], $con) or die ("Couldn't select the database.");

/*
* Search webcases.
*/
$result = mysql_query("
select
wc.caseid,
wc.request_title,
wc.request_description,
wc.requestor,
wc.created_on,
wc.status,
wc.assigned_to from webcases wc where
lower(wc.request_title) like '%".$q."%'
or
lower(wc.request_description) like '%".$q."%' order by wc.caseid asc");

/*
* build output page.
*/
$headerpage = '<html><head><title>WEBCASES matching your search criteria</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#mytable, #mytd
{
border-color: #600;
border-style: solid;
}
#mytable
{
border-width: 1px 1px 1px 1px;
border-spacing: 0;
border-collapse: collapse;
}
#mytd
{
margin: 0;
padding: 4px;
border-width: 1px 1px 0 0;
background-color: #FFC;
}
</style></head><body>';

echo $footerpage = '</body></html>';

echo $headerpage . '<table id="mytable"><thead>
<tr>
<th>ID</font></th>
<th>Title</font></th>
<th>Description</font></th>
<th>Requester</font></th>
<th>Created</font></th>
<th>Status</font></th>
<th>Developer</font></th>
</tr></font></thead><tbody>';

while($row = mysql_fetch_array($result)) {

echo("<a target='_blank'>".
'<tr><td id="mytd">'
. $row['caseid'] . '</td><td id="mytd">'
. $row['request_title'] . '</td><td id="mytd">'
. $row['request_description'] . '</td><td id="mytd">'
. $row['requestor'] . '</td><td id="mytd">'
. $row['created_on'] . '</td><td id="mytd">'
. $row['status'] . '</td><td id="mytd">'
. $row['assigned_to'] . '</td><td id="mytd">'
. '</tr>'
."</a> \n");

}

echo '</tbody></table>' . $footerpage;

mysql_close($con);
}

function searchResolutions() {


/*
* Grabs $dbconf and declares variables.
*/
global $dbconf;
/*
* Grabs POST value.
*/
$q = $_POST['search_string'];

/*
* Connect to db.
*/
$con = mysql_connect($dbconf["host"], $dbconf["user"],$dbconf["password"]) ;
if (!$con) {
die('Could not connect: ' . mysql_error());
}

mysql_select_db($dbconf["db"], $con) or die ("Couldn't select the database.");

/*
* Search webcases.
*/
$result = mysql_query("
select
wc.caseid,
wc.resolution,
wc.resolved_on from resolution wc where lower(wc.resolution) like '%".$q."%' order by wc.caseid asc");

/*
* build output page.
*/
$headerpage = '<html><head><title>RESOLUTIONS matching your search criteria</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#mytable, #mytd
{
border-color: #600;
border-style: solid;
}
#mytable
{
border-width: 1px 1px 1px 1px;
border-spacing: 0;
border-collapse: collapse;
}
#mytd
{
margin: 0;
padding: 4px;
border-width: 1px 1px 0 0;
background-color: #FFC;
}
</style></head><body>';

echo $footerpage = '</body></html>';

echo $headerpage . '<table id="mytable"><thead>
<tr>
<th>ID</font></th>
<th>Resolution</font></th>
<th>Resolved On</font></th>
</tr></font></thead><tbody>';

while($row = mysql_fetch_array($result)) {

echo("<a target='_blank'>".
'<tr><td id="mytd">'
. $row['caseid'] . '</td><td id="mytd">'
. $row['resolution'] . '</td><td id="mytd">'
. $row['resolved_on'] . '</td><td id="mytd">'
. '</tr>'
."</a> \n");

}

echo '</tbody></table>' . $footerpage;

mysql_close($con);
}
?>

Problem is that both query results display in the *same* tab i.e that of my searchWebcases() function.

Is there a way to output the results of searchResolutions() function in its own tab?

In case I wasn't clear.....

Basically, my intent is to load one function's output into one browser tab, and the other function's output to another (separate) browser tab.

jQuery did the trick.

I found an example of tabs implementation via jQuery. I simply hacked the code to support my needs. Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Knowledge Base</title>
<style type="text/css">
body {
background: #f0f0f0;
margin: 0;
padding: 0;
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
color: #444;
}
h1 {
font-size: 3em; margin: 20px 0;
}
.container {
width: 1000px; margin: 50px ;height: 1000px;
}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%;
height: 100%;
background: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 10px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
color: #254588;
}
.tab_content img {
float: left;
margin: 0 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});

});
</script>
</head>
<body>
<div class="container">
<h1>Knowledge Base</h1>
<h3>This search engine crawls the online ticketing system for data on resolutions.<p></p>
For a search, enter a word (faster) or letter (slow) to see a list of corresponding ticket titles, design notes or resolutions.</h3>
<form method="post"
id="f1" name="myform" action="<?php echo $_SERVER['PHP_SELF'];?>" >
<input type="text" id="qry" name="search_string" size="60"></input>
<input type="submit" id="rs" name="submit" value="Run Search"></input>
<input type="reset" id="reset" name="reset" value="Clear Search"
></input><p></p>
</form>
<ul class="tabs">
<li><a href="#tab1">Webcases</a></li>
<li><a href="#tab2">Design Notes</a></li>
<li><a href="#tab3">Resolutions</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h2>Search Results</h2>
<p>
<?php
//Includes the db config file
$dbconf = include '/var/www/html/ServiceAndRepair/config/dbConfig.php';

//checks if fields are set.
if(isset($_POST['submit'])) {
if(
!empty($_POST['search_string'])
) {
searchWebcases();
}
}


function searchWebcases() {

/*
* Grabs $dbconf and declares variables.
*/
global $dbconf;
/*
* Grabs POST value.
*/
$q = $_POST['search_string'];

/*
* Connect to db.
*/
$con = mysql_connect($dbconf["host"], $dbconf["user"],$dbconf["password"]) ;
if (!$con) {
die('Could not connect: ' . mysql_error());
}

mysql_select_db($dbconf["db"], $con) or die ("Couldn't select the database.");

/*
* Search webcases.
*
* Uses `mysql_real_escape_string()` as safeguard against SQL injection.
* Function `mysql_real_escape_string()` escapes special characters in a string for use in a SQL statement.
*
*/
$result = mysql_query("
select
wc.caseid,
wc.request_title,
wc.request_description,
wc.requestor,
wc.created_on,
wc.status,
wc.assigned_to from webcases wc where
lower(wc.request_title) like '%".mysql_real_escape_string($q)."%'
or
lower(wc.request_description) like '%".mysql_real_escape_string($q)."%' order by wc.caseid asc");


/*
* build output page.
*/
$headerpage = '<html><head><title>WEBCASES matching your search criteria</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#mytable, #mytd
{
border-color: #600;
border-style: solid;
}
#mytable
{
border-width: 1px 1px 1px 1px;
border-spacing: 0;
border-collapse: collapse;
}
#mytd
{
margin: 0;
padding: 4px;
border-width: 1px 1px 0 0;
background-color: #FFC;
}
</style></head><body>';

echo $footerpage = '</body></html>';

echo $headerpage . '<table id="mytable"><thead>
<tr>
<th>ID</font></th>
<th>Title</font></th>
<th>Description</font></th>
<th>Requester</font></th>
<th>Created</font></th>
<th>Status</font></th>
<th>Developer</font></th>
</tr></font></thead><tbody>';

while($row = mysql_fetch_array($result)) {

echo("<a target='_new'>".
'<tr><td id="mytd">'
. $row['caseid'] . '</td><td id="mytd">'
. $row['request_title'] . '</td><td id="mytd">'
. $row['request_description'] . '</td><td id="mytd">'
. $row['requestor'] . '</td><td id="mytd">'
. $row['created_on'] . '</td><td id="mytd">'
. $row['status'] . '</td><td id="mytd">'
. $row['assigned_to'] . '</td><td id="mytd">'
. '</tr>'
."</a> \n");

}

echo '</tbody></table>' . $footerpage;

mysql_close($con);
}?>
</p>
</div>
<div id="tab2" class="tab_content">
<h2>Search Results</h2>
<p>
<?php
//Includes the db config file
$dbconf = include '/var/www/html/ServiceAndRepair/config/dbConfig.php';

//checks if fields are set.
if(isset($_POST['submit'])) {
if(
!empty($_POST['search_string'])
) {
searchWip();
}
}

function searchWip() {
/*
* Grabs $dbconf and declares variables.
*/
global $dbconf;
/*
* Grabs POST value.
*/
$q = $_POST['search_string'];

/*
* Connect to db.
*/
$con = mysql_connect($dbconf["host"], $dbconf["user"],$dbconf["password"]) ;
if (!$con) {
die('Could not connect: ' . mysql_error());
}

mysql_select_db($dbconf["db"], $con) or die ("Couldn't select the database.");

/*
* Search resolutions. Uses `mysql_real_escape_string()` as safeguard against SQL injection.
* Function `mysql_real_escape_string()` escapes special characters in a string for use in a SQL statement.
*/
$result = mysql_query("
select
wc.caseid,
wc.design_notes,
date(wc.as_of) as_of from wip wc where lower(wc.design_notes) like '%".mysql_real_escape_string(strtolower($q))."%' order by wc.caseid asc");

/*
* build output page.
*/
$headerpage = '<html><head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#mytable, #mytd
{
border-color: #600;
border-style: solid;
}
#mytable
{
border-width: 1px 1px 1px 1px;
border-spacing: 0;
border-collapse: collapse;
}
#mytd
{
margin: 0;
padding: 4px;
border-width: 1px 1px 0 0;
background-color: #FFC;
}
</style></head><body>';

echo $footerpage = '</body></html>';

echo $headerpage . '<table id="mytable"><thead>
<tr>
<th>ID</font></th>
<th>Design Notes</font></th>
<th>As Of</font></th>
</tr></font></thead><tbody>';

while($row = mysql_fetch_array($result)) {

echo("<a target='_new'>".
'<tr><td id="mytd">'
. $row['caseid'] . '</td><td id="mytd">'
. $row['design_notes'] . '</td><td id="mytd">'
. $row['as_of'] . '</td><td id="mytd">'
. '</tr>'
."</a> \n");

}

echo '</tbody></table>' . $footerpage;

mysql_close($con);
}?>
</p>
</div>
<div id="tab3" class="tab_content">
<h2>Search Results</h2>
<p>
<?php
//Includes the db config file
$dbconf = include '/var/www/html/ServiceAndRepair/config/dbConfig.php';

//checks if fields are set.
if(isset($_POST['submit'])) {
if(
!empty($_POST['search_string'])
) {
searchResolutions();
}
}

function searchResolutions() {
/*
* Grabs $dbconf and declares variables.
*/
global $dbconf;
/*
* Grabs POST value.
*/
$q = $_POST['search_string'];

/*
* Connect to db.
*/
$con = mysql_connect($dbconf["host"], $dbconf["user"],$dbconf["password"]) ;
if (!$con) {
die('Could not connect: ' . mysql_error());
}

mysql_select_db($dbconf["db"], $con) or die ("Couldn't select the database.");

/*
* Search resolutions. Uses `mysql_real_escape_string()` as safeguard against SQL injection.
* Function `mysql_real_escape_string()` escapes special characters in a string for use in a SQL statement.
*/
$result = mysql_query("
select
wc.caseid,
wc.resolution,
date(wc.resolved_on) resolved_on from resolution wc where lower(wc.resolution) like '%".mysql_real_escape_string(strtolower($q))."%' order by wc.caseid asc");

/*
* build output page.
*/
$headerpage = '<html><head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#mytable, #mytd
{
border-color: #600;
border-style: solid;
}
#mytable
{
border-width: 1px 1px 1px 1px;
border-spacing: 0;
border-collapse: collapse;
}
#mytd
{
margin: 0;
padding: 4px;
border-width: 1px 1px 0 0;
background-color: #FFC;
}
</style></head><body>';

echo $footerpage = '</body></html>';

echo $headerpage . '<table id="mytable"><thead>
<tr>
<th>ID</font></th>
<th>Resolution</font></th>
<th>Resolved On</font></th>
</tr></font></thead><tbody>';

while($row = mysql_fetch_array($result)) {

echo("<a target='_new'>".
'<tr><td id="mytd">'
. $row['caseid'] . '</td><td id="mytd">'
. $row['resolution'] . '</td><td id="mytd">'
. $row['resolved_on'] . '</td><td id="mytd">'
. '</tr>'
."</a> \n");

}

echo '</tbody></table>' . $footerpage;

mysql_close($con);
}?>
</p>
</div>
</div>
</div>
</body>
</html>

It is not 100% production ready but it is working like I want. :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.