How to embed a paging page in the same php, same tab?

soulblader_86

Supremacy Member
Joined
Sep 28, 2007
Messages
9,012
Reaction score
0
I want to embed a data on a certain tab by showing the data using page

at first when it load it is okkk.

when I click on second page, it will gt error

I try to INCLUDE the Paging page, but so it will stay in the same page, but it still travel to my contact page


this is the customer page, when click on contact tab, it will show a series of contact
PHP:
<!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=utf-8" />
<title>Untitled Document</title>
 <link rel="stylesheet" type="text/css" href="style.css"/>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>


  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>
       <?php

	   
if (isset($_GET["id"]))
	{
 $pid= $_GET["id"];
	}
	else
	{
		$pid= 0;
	}
	
	if (isset($_GET["del"]))
	{
      $del= $_GET["del"];
	}
	
if (isset($_GET["company"]))
	{
      $company = $_GET["company"];
	}
if (isset($_GET["add"]))
	{
      $add = $_GET["add"];
	}
if (isset($_GET["contact"]))
	{
      $delcontact = $_GET["contact"];
	}

 include('config.php'); 

    $qry = "SELECT * from customer Where CustomerID=$pid";
$result = mysql_query($qry);
$row = mysql_fetch_array($result);
$name = $row["CompanyName"];
$image = $row["Image"];
$contact = $row["OfficeNumber"];
$address = $row["Address"];
$turnover = $row["Turnover"];
$netprofit = $row["NetProfit"];
$employees = $row["Employees"];
$industry = $row["Industry"];
$createby = $row["CreatedBy"];
$datecreated = $row["DateCreated"];
$modifieddate = $row["DateModified"];
$website = $row["Website"];


 ?>
</head>

<body>`
<div id="main_container"> 

<table width="980" border="1" id="main_table" cellpadding="5" cellspacing="5">
  <tr>
    <td colspan="2" height="100"><?php include('header.php') ;?></td>
  </tr>
  <tr>
    <td width="200" height="300" valign="top" id="sidebar"><?php include('sidebar.php') ;?></td>
  <td valign="top" id="width">
   
   
   <?php
 $role = $_SESSION["role"];  
 if(isset($del)&& $del == 3)
{
	echo "You do not have sufficient privileges to delete, please contact the Master Admin.";
}

   
  else if($role == 2 && $_SESSION["userid"] != $createby && $pid !=0 )
   {
	   
	   
	echo "You do not have the privileges required to view detailed information for this customer";  
	   
	   
   }
   else
   {
   
   
   

   
 	if (isset($_GET["id"]))
	{
	?>

  
  <table width="725" border="0">
  <tr>
    <td width="347">
    
   <h1> <?php

echo $name;
  ?></h1>
      <p> </p>
      <p> </p>
      <p><?php echo $address;
 
  ?></p>
      <p> </p>
      <p> </p>
      <p><?php echo $contact;?>*<br />
      </p>
    </td>
    <td width="345" align="center"><?php
if($image == "" || $image == "images/")
		{
		?>
          <img src="images/not_available.gif" width="200" height="200" />
          <?php
		}
		else
		{
          ?>
           <img src="<?php echo $image ?>" width="200" />
          
          <?php
		}
		?></td>
  </tr>
</table>
         <a href="delete.php?id=<?php echo $pid?>" onclick="return confirm('Are you sure you want to remove this company?');" ><img src="images/delete.png" width="27" height="27" /></a>
        <nav>
          <div id = font>
          <div id="tabs">
           <ul>
             <li><a href="#tabs-1">More Details</a></li>
              <li><a href="#tabs-2">Contact</a></li>
              <li><a href="#tabs-3">Call report</a></li>
              <li><a href="#tabs-4">Sales pipeLine</a></li>
              <li><a href="#tabs-5">Files</a></li>
            </ul>
            
                   <div id="tabs-1">
     <table width="401" height="378" border="0">
      <tr>
        <td width="389" height="29" align="left" class="background">Last known Turnover</td>
        <td width="150" align="left"><a href="editCustomer.php?edit=1&id=<?php echo $pid;  ?>"><img src="images/pencil.png" width="23" height="23" /></a>
          
          
          
          </td>
      </tr>
      <tr>
        <td height="21" colspan="2" align="left" ><?php
if($turnover == NULL)
	{
		echo "undefined";
	}
	else
     {
		echo "$turnover";
	}


  ?> <input name="customerid" type="hidden" id="customerid" value="<?php echo $pid;?>"/></td>
      </tr>
      <tr>
        <td height="22" colspan="2" align="left" class="background">Last known Net Profit</td>
        </tr>
      <tr>
        <td height="20" colspan="2" align="left" ><?php

	if($netprofit == NULL)
	{
		echo "undefined";
	}
	else
     {
		echo "$netprofit";
	}

  ?></td>
        </tr>
      <tr>
        <td height="22" colspan="2" align="left" class="background">Number of Employees</td>
        </tr>
      <tr>
        <td height="20" colspan="2" align="left" ><?php

echo $employees;

  ?></td>
        </tr>
      <tr>
        <td height="22" colspan="2" align="left" class="background">Industry</td>
        </tr>
      <tr>
        <td height="20" colspan="2" align="left" ><?php

echo $industry;
  ?></td>
        </tr>
      <tr>
        <td height="22" colspan="2" align="left" class="background">website</td>
      </tr>
      <tr>
        <td height="20" colspan="2" align="left">
        <?php

	if($website == NULL)
	{
		echo "undefined";
	}
	else
     {
		echo "<a href=$website>Visit Website</a>";
		
	 }
  ?>
        </td>
      </tr>
      <tr>
        <td height="22" colspan="2" align="left" class="background">Created By</td>
        </tr>
      <tr>
        <td height="20" colspan="2" align="left"><?php
    $qry = "Select e.FirstName FROM employee e INNER JOIN customer c ON e.ID = c.CreatedBy Where c.CustomerID=$pid";
$result = mysql_query($qry);
$row = mysql_fetch_array($result);

	if($row["FirstName"] == NULL)
	{
		echo "undefined";
	}
	else
     {
		echo $row["FirstName"];
	}

  ?></td>
        </tr>
      <tr>
        <td height="22" colspan="2" align="left" class="background">Dated Created</td>
      </tr>
      <tr>
        <td height="20" colspan="2" align="left"><?php
    $qry = "Select * FROM customer Where CustomerID=$pid";
$result = mysql_query($qry);
$row = mysql_fetch_array($result);

	echo $datecreated;

  ?></td>
        </tr>
      <tr>
        <td height="22" colspan="2" align="left" class="background">Last Modified</td>
      </tr>
      <tr>
        <td height="20" colspan="2" align="left" >
        <?php
		echo $modifieddate;
		 
?>
 
        </td>
        </tr>
      
      </table>              
                   
                   </div>
            <div id="tabs-2">
 <?php include('contact.php') ;?>
        </div>
            <div id="tabs-3">
              <table width="400" height="100" border="0">
                
  <th align="left">Name</th><td>Mr Yong</td> 
  <tr>
  <th align="left">Email</th><td>smartalex@hotmail.com</td>
  <tr>
  <th align="left">address</th><td>39 Artillery Avenue
    Singapore 099958</td>
    
    
  </table>
              
  <button type="button"> Create Call report </button>
            </div>
            <div id="tabs-4">
              
              Not sure how to do the Sales pipe lines
              
  </div>
            <div id="tabs-5">
              
              Havent do the Files 
              
  </div>
  </font>
</nav>
  <?php
  }
  	else if(isset($del)&& isset($company))
{
	if($del == 1 )
	{
		echo $company." has been deleted from the customer list";

	}
	else
	{
		echo $company." is unable to be deleted";
	}
}
	else if(isset($del)&& isset($delcontact))
{
	if($del == 1 )
	{
		echo $delcontact." has been deleted from the contact list";

	}
	else
	{
		echo $delcontact." is unable to be deleted";
	}
}

	else if(isset($add))
	{
		if($add == 1 )
	{
		echo "Customer added successfully.";

	}
	else
	{
		echo "Error, unable to add to the database.";	
	}
	}
	
	else if ($pid == 0)
	{
	 echo "<h4>Choose a company to view<h4>";	
		
	}
  
   }
  
  ?>
  </td>
  </tr>
  <tr>
    <td colspan="2" height="20"><?php include('footer.php') ;?></td>
  </tr>
</table>



</div>
 
</body>

</html>

My Contact PAGE to sort all contact
PHP:
  <a href="addContact.php"><img src="images/addcontact.png" width="30" height="32" /></a>
    <?php
     if(isset($pid))
	 {
	$_SESSION["id"] = $pid;
	 }
	$id = $_SESSION["id"];
    $qry = "SELECT * from contact Where CustomerID='$id'";
    $result = mysql_query($qry);
	$num = mysql_num_rows($result);
if($num>=1)
{


	$tableName="contact";		
	$targetpage = "contact.php"; 	
	$limit = 3; 
	
	$query = "SELECT COUNT(*) as num FROM $tableName where CustomerID='$id' ";
	$total_pages = mysql_fetch_array(mysql_query($query));
	$total_pages = $total_pages['num'];
	
	$stages = 3;

	$page = isset($_GET['page']) ? mysql_real_escape_string($_GET['page']) : 0;
	if($page){
		$start = ($page - 1) * $limit; 
	}else{
		$start = 0;	
		}	
	
    // Get page data
	$query1 = "SELECT * FROM $tableName where CustomerID=2  LIMIT $start, $limit";
	$result = mysql_query($query1);
	
	// Initial page num setup
	if ($page == 0){$page = 1;}
	$prev = $page - 1;	
	$next = $page + 1;							
	$lastpage = ceil($total_pages/$limit);		
	$LastPagem1 = $lastpage - 1;					
	
	
	$paginate = '';
	if($lastpage > 1)
	{	
	

	
	
		$paginate .= "<div class='paginate'>";
		// Previous
		if ($page > 1){
			$paginate.= "<a href='$targetpage?page=$prev'>previous</a>";
		}else{
			$paginate.= "<span class='disabled'>previous</span>";	}
			

		
		// Pages	
		if ($lastpage < 7 + ($stages * 2))	// Not enough pages to breaking it up
		{	
			for ($counter = 1; $counter <= $lastpage; $counter++)
			{
				if ($counter == $page){
					$paginate.= "<span class='current'>$counter</span>";
				}else{
					$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}					
			}
		}
		elseif($lastpage > 5 + ($stages * 2))	// Enough pages to hide a few?
		{
			// Beginning only hide later pages
			if($page < 1 + ($stages * 2))		
			{
				for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
				{
					if ($counter == $page){
						$paginate.= "<span class='current'>$counter</span>";
					}else{
						$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}					
				}
				$paginate.= "...";
				$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
				$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";		
			}
			// Middle hide some front and some back
			elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
			{
				$paginate.= "<a href='$targetpage?page=1'>1</a>";
				$paginate.= "<a href='$targetpage?page=2'>2</a>";
				$paginate.= "...";
				for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
				{
					if ($counter == $page){
						$paginate.= "<span class='current'>$counter</span>";
					}else{
						$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}					
				}
				$paginate.= "...";
				$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
				$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";		
			}
			// End only hide early pages
			else
			{
				$paginate.= "<a href='$targetpage?page=1'>1</a>";
				$paginate.= "<a href='$targetpage?page=2'>2</a>";
				$paginate.= "...";
				for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
				{
					if ($counter == $page){
						$paginate.= "<span class='current'>$counter</span>";
					}else{
						$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}					
				}
			}
		}
					
				// Next
		if ($page < $counter - 1){ 
			$paginate.= "<a href='$targetpage?page=$next'>next</a>";
		}else{
			$paginate.= "<span class='disabled'>next</span>";
			}
			
		$paginate.= "</div>";		
	
	
}
 // pagination

?>

<ul>
   <table width="511" height="55" border="0">
                
  <tr>
    <th width="91" height="22" align="left">Name</th><th width="88" align="left">Title</th><th width="76" align="left">Mobile</th> <th colspan="3" align="left"></th> 
 
<?php 
 

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

		
		?>
     <tr> 
  <td height="22"><?php echo $row["FirstName"]." ".$row["LastName"];?></td><td><?php echo $row["Title"] ?></td><td><?php echo $row["MobilePhone"] ?></td> <td width="70"><img src="images/view.png" width="20" height="20" />
  

  </td>
  <td width="70"><a href="editContact.php?id=<?php echo $row["ContactID"];  ?>"><img src="images/pencil.png" width="20" height="20" /></a></td>
  <td width="70">
   <a href="delete.php?cid=<?php echo $row["ContactID"];  ?>" onclick="return confirm('Are you sure you want to remove this contact?');" >
  <img src="images/del.png" width="20" height="20" /></a></td>
     </tr>
  
  <?php
		}
	
  ?>
  </table>

</ul>
<?php
 echo $paginate;	
    

}
else
{

echo "No contact added yet";
}
?>
 

soulblader_86

Supremacy Member
Joined
Sep 28, 2007
Messages
9,012
Reaction score
0
this is my style sheet

PHP:
/*Navigation page*/		
.searchbox
{
  margin: 10px;	
}
.list
{
	margin:10px;
    max-height:500px;
    overflow:auto;
	list-style-type: none;
	padding-left:10px;
	position:relative;

}

#sidebar
{
    height:auto;
	position:relative;
}

#width
{
	width:auto;
	position:relative;
}

#sandy
{

	position: absolute;
	height:auto;
	width: 200px;
	background-color: #F99;
	
	}
	

#content
{
	
	position: absolute;
	margin:220px;
	height:auto;
	width:auto;
	
	}
	a{
		
		text-decoration: none;
		
	}
 a.search  {
	text-decoration: none;
	color: #000;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 14px;
	

}

  a.search:hover {
	color: #03C;
	text-decoration: none;
	font-size: 15px;
	background-color: #CC6;

}
/*Dashboard page*/	
.box
{
	border: thin solid #000;
	position: relative;
	width: 1280px;
	height: 200px;
	text-align:right;
	background-color: #CC6;
}

.welcome {
	font-size: 18px;
}
.background {
	color: #0080C0;
	font-weight: bold;
}

#font
{

    font-size:12px;	
	padding:0;
	
}

body{
	font-family:"Myriad Pro",Arial, Helvetica, sans-serif;
	font-size:14px;
	text-justify:auto;
	margin: 0;
    padding: 0;
	line-height: 20px; 
	
}

#main_container {
	position: relative;
	width: 980px;
	height: auto;
	top: 0px;
	margin: auto;
	background-color: #FFFFFF;
	min-height:800px;
	
}

#main_table{
	border:#666 solid 1px;
	border-collapse:collapse;
	min-height:800px;
	padding:5px;
	margin:5px;
}


#loginbox{
	
	border:#999 solid 1px;
	border-collapse:collapse;
	
	padding:5px;
	margin:5px;
	background-image:url(images/bar.jpg);
	background-repeat:repeat-x;
	
	
}
.errMSG{
	color:#F00;
	
}

/*lightbox*/

		.backdrop
		{
			position:absolute;
			top:0px;
			left:0px;
			width:100%;
			height:100%;
			background:#000;
			opacity: .0;
			filter:alpha(opacity=0);
			z-index:50;
			display:none;
		}
 
 
		.box
		{
			position:relative;
			margin: auto;
			top:0px;
			width:500px;
			height:auto;
			background:#ffffff;
			z-index:51;
			padding:10px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			-moz-box-shadow:0px 0px 5px #444444;
			-webkit-box-shadow:0px 0px 5px #444444;
			box-shadow:0px 0px 5px #444444;
			display:none;
		}
 
		.close
		{
			float:right;
			margin-right:6px;
			cursor:pointer;
		}
 /*paging */
 .paginate {
font-family:Arial, Helvetica, sans-serif;
	padding: 3px;
	margin: 3px;
}

.paginate a {
	padding:2px 5px 2px 5px;
	margin:2px;
	border:1px solid #999;
	text-decoration:none;
	color: #666;
}
.paginate a:hover, .paginate a:active {
	border: 1px solid #999;
	color: #000;
}
.paginate span.current {
    margin: 2px;
	padding: 2px 5px 2px 5px;
		border: 1px solid #999;
		
		font-weight: bold;
		background-color: #999;
		color: #FFF;
	}
	.paginate span.disabled {
		padding:2px 5px 2px 5px;
		margin:2px;
		border:1px solid #eee;
		color:#DDD;
	}
	
	page.li{
		padding:4px;
		margin-bottom:3px;
		background-color:#FCC;
		list-style:none;}
		
	page.ul{margin:6px;
	padding:0px;}
 

NSforSG

High Supremacy Member
Joined
Nov 17, 2010
Messages
34,226
Reaction score
2
you mean you are trying to load different page onto the same page?
 

davidktw

Arch-Supremacy Member
Joined
Apr 15, 2010
Messages
13,550
Reaction score
1,302
I want to call from database, but dun want to refresh the page

One popular approach will be using AJAX. You can code from ground up, or use existing widget frameworks to help you. Try KendoUI, YUI, jQueryUI and a lot more other such frameworks. They come in full fledge UI framework, or could be just an isolated library that tackle portions of it.

The main idea to such design is based on a rich client application concept.
  1. Browser access main web application url
  2. Main web application with tab panel widget is responded to show the website.
  3. Each tab in the tab panel is a placeholder to invoke an asychronous javascript request to the server to return a fragment of html codes that will form the content inside a container that belongs to the tab.

Older method will be using iframes. The tabs are nothing more than illusion, just like the ajax approach. Javascript is used to bind everything together. Instead of using ajax to return a fragment of html codes to be placed into the same web app, iframes source attribute are changed to reflect different contents.

Another approach is you can load all iframes, but using cascaded style sheet to hide or unhide the elements.

Either way, it's dynamic approach. Ajax is the more popular and modern approach to solve this problem. Given that you are dealing with only a single web page, the whole experience can be quite attractive. Your web page basically is a Rich Client Application.

Take a look at how KendoUI shuffle existing containers within the single web page at
http://demos.kendoui.com/web/tabstrip/index.html

and also how you can use ajax to fetch contents from other webpages to be shown in the same webapp closure at
http://demos.kendoui.com/web/tabstrip/ajax.html
 
Last edited:

soulblader_86

Supremacy Member
Joined
Sep 28, 2007
Messages
9,012
Reaction score
0
One popular approach will be using AJAX. You can code from ground up, or use existing widget frameworks to help you. Try KendoUI, YUI, jQueryUI and a lot more other such frameworks. They come in full fledge UI framework, or could be just an isolated library that tackle portions of it.

The main idea to such design is based on a rich client application concept.
  1. Browser access main web application url
  2. Main web application with tab panel widget is responded to show the website.
  3. Each tab in the tab panel is a placeholder to invoke an asychronous javascript request to the server to return a fragment of html codes that will form the content inside a container that belongs to the tab.

Older method will be using iframes. The tabs are nothing more than illusion, just like the ajax approach. Javascript is used to bind everything together. Instead of using ajax to return a fragment of html codes to be placed into the same web app, iframes source attribute are changed to reflect different contents.

Another approach is you can load all iframes, but using cascaded style sheet to hide or unhide the elements.

Either way, it's dynamic approach. Ajax is the more popular and modern approach to solve this problem. Given that you are dealing with only a single web page, the whole experience can be quite attractive. Your web page basically is a Rich Client Application.

Take a look at how KendoUI shuffle existing containers within the single web page at
Kendo UI TabStrip Demo

and also how you can use ajax to fetch contents from other webpages to be shown in the same webapp closure at
AJAX loaded content demo in Kendo UI TabStrip widget

Thanks!!! you help a lot
 
Important Forum Advisory Note
This forum is moderated by volunteer moderators who will react only to members' feedback on posts. Moderators are not employees or representatives of HWZ Forums. Forum members and moderators are responsible for their own posts. Please refer to our Community Guidelines and Standards and Terms and Conditions for more information.
Top