HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function Send1()
{
adress="1.php"
$.get(adress,Get1)
}
function Get1(answer)
{
$("#Show1").html(answer)
}
function Send2()
{
$("#Show1").click(function( event ) {
var cty = $(event.target).attr('id');
adress="2.php?cty="+ cty
$.get(adress,Get2)
})
}
function Get2(answer)
{
$("#Show2").html(answer)
}
</script>
</head>
<body>
<form method="post">
<div style="margin-top: 1vh; margin-bottom: 1vh;">
<input type="button" onclick="Send1()" style="height:4vh; width: 19.7vw;" value="Button">
</div>
</form>
<div id="Show1" style="border:1px solid black; height: 600px; width:300px; float:left; margin-right: 1vw;" onclick="Send2()"></div>
<div id="Show2" style="border:1px solid black; height: 600px; width:1000px;"></div>
</body>
</html>
1.php
<?php
require 'vendor/autoload.php';
$adress="http://localhost:3000/Country";
$clienthttp=new EasyRdf\Http\Client($adress);
$req=$clienthttp->request();
$resultJSON=$req->getBody();
$country=json_decode($resultJSON);
foreach ($country as $countries)
{
echo "<a href='#'><span id='$countries->id'> $countries->name </span></a> <br>";
}
?>
2.php
<?php
require 'vendor/autoload.php';
$cty = $_GET["cty"];
$adress="http://localhost:3000/City?CountryId=$cty";
$clienthttp=new EasyRdf\Http\Client($adress);
$req=$clienthttp->request();
$resultJSON=$req->getBody();
$city=json_decode($resultJSON);
echo "<div style='text-align: center; margin-bottom: 5vh;'>";
echo "<span style='font-size: 3vh'> Name </span>";
echo "<span style='margin-left: 10vw'> Surface </span>";
echo "<span style='margin-left: 10vw'> Population </span>";
echo "</div>";
foreach ($city as $cities)
{
echo "<div style='text-align: center; margin-bottom: 22.5vh;'>";
echo "<span style='font-size: 3vh;'> $cities->name </span>";
echo "<span style='margin-left: 10vw'> $cities->surface </span>";
echo "<span style='margin-left: 10vw'> $cities->population </span>";
echo "</div>";
}
?>
Short description: first request (Send1 and Get1) shows a list of countries. When I click one of the countries, I want to get the cities from it (that's what Send2 and Get2 are for). For some reason, the request is duplicated times x (first request goes once, second twice, so on). And sometimes it just randomly changes the values between cities from different countries. Basically, the code works but it produces some strange behaviours.
Every time you run Send2 it executes $("#Show1").click... which creates a new click event handler for the show1 button. But you never remove any of the previous handlers. So when you click show1 it runs all the handlers (and thus all the Ajax requests) ever attached to the button.
That's fine the first time obviously, but after that the number of requests triggered will keep going up proportional to every execution of the Send2 function. The mess is also exacerbated by the fact that Send2 is triggered by clicking on show1!
It would make more sense to define the event handler once, outside the Send2 function. You don't need the Send2 function at all, in fact.
Related
I'm currently developing a simple web page that enables the user to: upload an image and a corresponding caption to a DB, let the user view the images and delete them.
I have already accomplished the first two with the following code:
<?php
#include_once("connection.php");
$db = new mysqli("192.168.2.2", "root", "", "proyectoti");
if ($db->connect_errno) {
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
echo "Información de servidor: ";
echo $db->host_info . "\n";
// Initialize message variable
$msg = "";
// If upload button is clicked ...
if (isset($_POST['upload'])) {
// Get image name
$image = addslashes(file_get_contents($_FILES['image']['tmp_name'])); #$_FILES['image']['name'];
// Get text
$image_text = mysqli_real_escape_string($db, $_POST['image_text']);
$sql = "INSERT INTO images (image, image_text) VALUES ('{$image}', '{$image_text}')";
// execute query
mysqli_query($db, $sql);
}
$result = mysqli_query($db, "SELECT * FROM images");
?>
<!DOCTYPE html>
<html>
<head>
<title>Proyecto TI | Sube imágenes</title>
<style type="text/css">
#content{
width: 50%;
margin: 20px auto;
border: 1px solid #cbcbcb;
}
form{
width: 50%;
margin: 20px auto;
}
form div{
margin-top: 5px;
}
#img_div{
width: 80%;
padding: 5px;
margin: 15px auto;
border: 1px solid #cbcbcb;
}
#img_div:after{
content: "";
display: block;
clear: both;
}
img{
float: left;
margin: 5px;
width: 300px;
height: 140px;
}
</style>
</head>
<body>
<h1>Proyecto TI | <a> Interfaz </a></h1>
<div id="content">
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div id='img_div'>";
#echo "<img src='images/".$row['image']."' >";
echo '<img src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/>';
echo "<p>".$row['image_text']."</p>";
echo "</div>";
}
?>
<form method="POST" action="index.php" enctype="multipart/form-data">
<input type="hidden" name="size" value="1000000">
<div>
<input type="file" name="image">
</div>
<div>
<textarea
id="text"
cols="40"
rows="4"
name="image_text"
placeholder="Di algo de esta imagen ^^"></textarea>
</div>
<div>
<button type="submit" name="upload">Publicar</button>
</div>
</form>
</div>
</body>
</html>
It looks like this:
Now, the only part I'm missing is being able to delete an image (basically I only echo each image), how would you suggest for me to accomplish this, to make each item clickable and let's say, pop up a dialog or button to perform an action (delete from DB).
I really don't know much about PHP or CSS/HTML, any help would be much appreciated, Thank you!
Within this loop:
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div id='img_div'>";
#echo "<img src='images/".$row['image']."' >";
echo '<img src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/>';
echo "<p>".$row['image_text']."</p>";
echo "</div>";
}
?>
Personally I would add an element to click on - like an 'x' or whatever - with a unique data attribute:
https://www.abeautifulsite.net/working-with-html5-data-attributes
You have to add the unique id of the image obviously, so you can let SQL know which row to delete... Like this:
echo "<div class='delete-image' data-id='" . $row['id'] . "'>x</div>';
Then I would link this class to an AJAX call to make an asynchronous request to the server and delete the image without reloading the page. It's not very hard.
An easier solution would be to create a new form in the loop, so you create multiple forms per image, add a hidden field with the image id in the form and make a submit button with the valeu 'delete' or simply 'x'.
The same way you created the check:
if (isset($_POST['upload'])) { ... }
You can create something like this:
if (isset($_POST['delete-image'])) { ... }
You will be carrying the image id value like a normal form input. And you can do whatever you want with it.
I would HIGHLY suggest you to look into how to work with jquery and ajax calls though.
Opening a dialogue and ask the user before he deletes an item will require that you either go another page for deletion or use javascript for this.
In both cases, you should somehow set an identifier for your image in your html-code.
I would suggest you give every image an id
'<img ... id="'.$yourImageId.'">'
or a data-attribute
'<img ... data-identifier="'.$yourImageId.'" >'
with that identifier.
First variant:
...
echo '<a href="/path/to/delete/view/page.php?image=yourImageId">'
echo '<img ... id="'.$yourImageId.'"/>'
echo '</a>'
...
and on this delete-view-page, you just have a form that triggers your delete-code
<form action="/path/to/delete/view/page.php" method="POST">
<input type="hidden" name="id" value="<?php echo $yourImageId ?>">
</form>
<!-- after this, react with $_POST['id'] --> to the id sent to the server side and delete the image in your database -->
The other way is not server side rendered.
You should give your Elements some class like "my-clickable-image".After that, you have a script on your page, that looks something like the following
<script>
/* get your images with querySelectorAll, the . stands for class and after that your name */
var clickables = document.querySelectorAll(".my-clickable-image");
clickables.foreach(function(image){
// say that for each image, when clicked the generated function is called image.addEventListener('click',generateShowDialogueFunc(image.getAttr("id")));
});
// generate a function(!) that reacts to an image being clicked
function generateShowDialogueFunc(imageIdentifier){
// return a function that adds a Pop Up to the page
// the Pop Up has approximately the code of the first options second page
// except that now, it must create and remove elements in javascript
return function createPopUp(){
removePopUp();
var popup = document.createElement("div");
popup.setAttribute("id","deletePopUp");
var deleteForm = document.createElement("form");
deleteForm.setAttr("action","/path/to/file/that/deletes/given/query.php?id="+imageIdentifier);
var deleteContents = '<p> Do you want to delete this image? </p>'
+ '<button type="submit"> yes </button>'
+ '<button onclick="removePopUp()"> no </button>'
deleteForm.innerHTML = deleteContents;
document.body.appendChild()
}
}
// remove the Pop Up that can be used to delete an image from the page
function removePopUp(){
var existingPopUp = document.getElementById("deletePopUp");
if(existingPopUp) document.body.removeChild(existingPopUp);
}
</script>
<!-- just add some styling to make the popup show on top of the page -->
<style>
#deletePopUp{
width: 50vw;
height: 50vh;
position: absolute;
z-index: 1;
padding: 1em;
}
</style>
In this case, you just call the server to delete the image, not to show the delete form.
I would suggest the second one but stack overflow is not made for opinion based answers.
Regarding simple security:
It looks like your users could give titles or texts to images.
try what happens if a user gives a title like <bold>some title</title>
and guess what would happen if the title is <script>window.location.href="google.com"</script>
(XSS * hint hint *)
Regarding code structure:
If you want to do something like web development more often, think about separating your database accessing code, and your logic code from your php page template code, this is called 3 tier architecture and standard for bigger projects but i guess this is really just a first, short prototype or test.
Beginner to PHP, so I am pretty sure this is a stupid question...but, was hoping someone can help me out.
I have a html/php form, which basically dynamically pulls in values from a DB for a dropdown.
//HTML/PHP (original page)
<div style="position: relative; float: left; width:236px; margin-right: 20px;">
<div id="variablebox" style="position: relative; float: left; width:215px; border: solid #0096D6; border-width: 1px; padding: 10px;">
<H2>Step 2: Select Variable Type</H2>
<form id="var" enctype="multipart/form-data">
<span style="float: left; margin-top:8px;">
<label class="fieldlabel"><span>Variable Type:</span></label></br>
<select id="variabletype" name="variabletype" class="selectfieldshadow">
<option value="">Select</option>
<?php
$list=mysqli_query($con, 'SELECT * FROM valuelist');
while($row_list=mysqli_fetch_array($list)){
?>
<option value="<?php echo $row_list['valuelistid']; ?>">
<?php echo $row_list['valuename']; ?>
</option>
<?php
}
?>
</select>
</span>
When this form is submitted, it basically submits to PHP file via AJAX and then return the same form to the screen within the same DIV.
//PHP Page
echo "<H2>Step 2: Select Variable Type</H2>";
echo "<form id='var' enctype='multipart/form-data'>";
echo "<span style='float: left; margin-top:8px;'>";
echo "<label class='fieldlabel'><span>Variable Type:</span></label></br>";
echo "<select id='variabletype' name='variabletype' class='selectfieldshadow'>";
echo "<option value=''>Select</option>";
echo "<?php";
echo "$list=mysqli_query($con, 'SELECT * FROM valuelist');";
echo "while($row_list=mysqli_fetch_array($list)){";
echo "?>";
echo "<option value="<?php echo $row_list['valuelistid']; ?>">";
echo "<?php echo $row_list['valuename']; ?>";
echo "</select>";
echo "</span>";
echo "<span style='position: relative; float: left; display: inline-block; margin-top: 7px; font: 12px Lucida Grande,Helvetica,Arial,Verdana,sans-serif; padding-right: 60px;'>";
echo "<p>Add Value Control Screenshot:</p>";
echo "<input id='controlimage' type='file' name='controlimage'>";
echo "</span>";
I keep getting errors with my output...T_Variable this and Exception that...my question is, am I going about doing this correctly? I mean, looking at my PHP file that will return content back to the original page, do I have to echo php tags so they work on the original page when returned? ie. echo "<?php" etc..
Any assistance would be much appreciated!
echo is used to output content. As it's currently written, you're just trying to display the PHP code. To execute it, you'll have to restructure your code as follows:
<!-- some HTML code -->
<?php
// display stuff
?>
<!-- continue with HTML -->
Well first of all, PHP is all rendered server-side. So that means returning PHP in an AJAX response doesn't make sense. It won't render on the client side.
Second of all, those echos look crazy too. There are several different ways to output large text like that. Personally, I like to just close the PHP tag and write it. So your second file could look like this instead:
// end all PHP for now
?>
<H2>Step 2: Select Variable Type</H2>
<form id='var' enctype='multipart/form-data'>
<span style='float: left; margin-top:8px;'>
...
<input id='controlimage' type='file' name='controlimage'>
</span>
<?php
// continue writing PHP here
Send PHP is a nonsens cause PHP is a Server side language (run on server and not on the client, the browser).
Why don't you run your PHP code in this script and return the result. (Just display it)
But, please, make us proud of our favorite language and its beginners:
Use mysqli_fetch_assoc() instead of mysqli_fetch_array()
Use only one echo to do a multiline display, PHP natively supports it.
Indent your code, you will really like how it's more readable.
Use jQuery, its AJAX methods and autocomplete widget. Somebody did the job for you. ;-)
i'm trying to auto retrieve data from mysql server in specific DIV without manual refresh the web page.
My PHP code is:
function lastCodes(){
include('mysql.php');
include('config.php');
echo "<div id='content_data'>";
$get = mysql_query("SELECT * FROM scripts ORDER by date_added DESC");
if(mysql_num_rows($get)>0){
while($row = mysql_fetch_assoc($get)){
$get2 = mysql_query("SELECT * FROM accounts WHERE username = '$row[s_owner]'");
while($red = mysql_fetch_assoc($get2)){
echo "<table>
<tr>
<td width='22px'>";
if(!empty($red['avatar'])){
echo "<center>
<img src='$red[avatar]' style='width: 52px; height: 52px; margin-left: -30px; border: 2px solid #fff;' title='$row[s_owner]'/>
</center>
</td>";
} else {
echo "<td width='22px'>
<center>
<img src='/theme/$tema/icons/empty_avatar.png' style='width: 52px; height: 52px;' title='$row[s_owner]'/>
</center>
</td>";
}
echo "<td>
<a style='font-family: IndexName; color: #000; font-size: 14px; margin-left: 5px;'><b>$row[s_owner]</b> написа <a title='$row[s_name], Категория: $row[s_category].' href='#' style='text-decoration: none;'>нов код</a> <a style='font-family: IndexName; color: #000; font-size: 14px; margin-right: 10px;'>в $row[date_added]</a>
</td>
</tr>
</table>";
}
}
}
echo "</div>";
}
What should be in my case the jquery/ajax code if I want to retrieve this information in DIV called "content_data" in interval of 5 seconds? Thanks a lot!
You could place the contents of your lastCodes() function inside an otherwise empty PHP file, let's call it lastCodes.php.
And then use the load function from JQuery on the page where you want to retrieve the data
<div id="divTarget"></div>
<script type="text/javascript">
$("#divTarget").load("lastCodes.php");
</script>
But keep in mind that this way of coding can get messy real fast. I would recommend you to try any of the many great template systems available. It's not necessary for clean code but without one you will need some discipline keeping logic out of your view code.
And when you feel comfortable with one of those you could go even further and try a template system on the frontend using Javascript, for example Handlebars. With one of those you will be able to write clean code and send your data using JSON which will lower the size of the HTTP response and at the same time make the data more usable for other scenarios than simply rendering it as HTML.
Edit: To update the data every 5 seconds:
<script type="text/javascript">
window.setInterval(function() {
$("#divTarget").load("lastCodes.php");
}, 5000);
</script>
You just have to use the setInterval() function to load the contents of the page every 5 seconds(5000 milliseconds)
</div>
<script src="jquery.js"></script>
<script>
setInterval(function(){
$('#container').load('page.php');
}, 5000);
</script>
I can see that you have a function so you might as well call it. If that doesn't work then try to put your code outside of the function.
lastCodes();
Be sure that its actually changing its contents and that the page that you're calling actually works, you can test it by accessing the page itself and see if it has any output.
On a page I am working on, I have several distinct pieces of PHP, such as one in the head to handle dynamic Javascript and one in the main body for table creation. However, many of the operations, SQL queries, etc. are the same between the two area. For example, I keep having to reconnect to the same database over and over. Is there some way for me to streamline the code so that I do not need to have so much duplication and repeated calculation?
The page code, although it won't look right without the supplementary files. Also, it's very long.
<!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>Our Phones</title>
<style type="text/css">
<!--
#main #list table{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
width: 750px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#float_tot {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000;
background-color: #FFF;
overflow: auto;
position: fixed;
top: 127px;
height: 150px;
width: 198px;
border: 2px groove #999;
background-attachment: scroll;
}
.price {
font-size: 16px;
text-align: center;
}
.descr {
width: 300px;
}
-->
</style>
<?php
$con=mysql_connect(localhost,*****,*******);//connect to database
mysql_select_db("phone_site",$con);//select table
//work out the number of rows in the table
$query="SELECT * FROM phones WHERE 1=1";//set an always true WHERE
//search
$min=$_REQUEST['min_price'];
$max=$_REQUEST['max_price'];
$manuf=$_REQUEST['manufact'];
//if not empty, add them to the condition
if (!empty($min)){
$query.=" AND price>=$min";}
if (!empty($max)){
$query.=" AND price<=$max";}
if (!empty($manuf)){
$query.=" AND manu='$manuf'";}
$result=mysql_query($query);
$num=mysql_num_rows($result);
//prepare 2 substitutions
$pass=NULL;//this will fill in the correct number of input variables
$parse=NULL;//this will parse them into an array of ints.
$prices=NULL;//this will generate the pricelist
$i=0;
while($data = mysql_fetch_array($result)){
$parse.="D[$i]=parseInt(d$i);";
$pass.="d$i, ";
$prices.="P[$i]=" . $data['price'] . ";";
$i++;
}
$passd=substr_replace($pass,"",-2);
//make javascript
print("<script type=\"text/javascript\">
function total($passd){
var D=new Array();
$parse //parse the input into integers. if the field is blank 'NaN' should return.
var P=new Array();
$prices//prices.
var total = 0;//set total to zero.
for (i=0;i<$num;i++){
if (D[i]){//only do something if the field is not blank
total += D[i]*P[i];
}//add D[i] number of that item at P[i] Price to the total
}
document.output.readout.value= (total);//output
}
</script>");
mysql_close($con);
?>
<link href="format.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<img src="Images/Site/Banner.gif" width="1200" height="117" />
</div>
<div id="sidebar">
<img src="Images/Site/Home.gif" width="208" height="48" alt="Home" />
<img src="Images/Site/Phones.gif" width="208" height="58" alt="Phones" />
<img src="Images/Site/About.gif" width="208" height="51" alt="About" />
<img src="Images/Site/R_sibe_b.gif" width="208" height="56" />
</div>
<div id=endorse>
<?php
$quote=Null;
$sign=Null;
$afil=Null;
$con=mysql_connect(localhost,****,*******);//connect to database
mysql_select_db("phone_site",$con);//select table
$query="SELECT * FROM quotes ORDER BY Rand() LIMIT 1";//get one random row
$result=mysql_query($query);
$data = mysql_fetch_array($result);//get data from location $result
//print out text
print ("<p id=\"quote\">" . $data['quote'] . "</p>");
print ("<p id=\"ename\">" . $data['sign'] . "</p>");
print ("<p id=\"afill\">-- " . $data['afil'] . "</p>");
mysql_close($con);//close connection
?>
</div>
<div id="main">
<?php
$con=mysql_connect(localhost,******,********);//connect to database
mysql_select_db("phone_site",$con);//select database
//make maufacturer search
$query="SELECT DISTINCT manu FROM phones";
$result=mysql_query($query);
$manl="<option value=''></option>";
while($data = mysql_fetch_array($result)){
$manl.="<option value=\"" . $data['manu'] . "\">" . $data['manu'] . "</option>";
}
print "<form name=\"search\" action=\"phones.php\" method=\"post\">
Manufacturer?
<select name=\"manufact\">
$manl
</select> <br/>
What is your price range? $<input name=\"min_price\" type=\"text\" value =\"\" maxlength=\"6\" /> to $<input name=\"max_price\" type=\"text\" maxlength=\"6\" value=\"\"/>
<input type=\"submit\" name=\"seek\"/>
</form>
<hr/>
<div id=\"list\">
<form name=\"phonelist\">
<table><!--table populated using PHP/MYSQL-->
<tr>
<th> </th><th> </th><th>Features</th><th>Price</th>
</tr>";
$query="SELECT * FROM phones WHERE 1=1";//set an always true WHERE
//search
$min=$_REQUEST['min_price'];
$max=$_REQUEST['max_price'];
$manuf=$_REQUEST['manufact'];
//if not empty, add them to the condition
if (!empty($min)){
$query.=" AND price>=$min";}
if (!empty($max)){
$query.=" AND price<=$max";}
if (!empty($manuf)){
$query.=" AND manu='$manuf'";}
$result=mysql_query($query);
//work out the number of rows in the table
$num=mysql_num_rows($result);
//make the onkeyup list, giving it that many entries
$hold="total(";
for ($i=1;$i<=$num;$i++){
$hold.="phonelist.a$i.value, ";}
$pass= substr_replace($hold,")",-2);
//now print all the data in the table for population, subject to entered search strings
$count=0;
while($data = mysql_fetch_array($result)){//get data from location $result
$count++;
print("<tr>
<td><img src=\"Images/" . $data['image'] . "\" width=\"100\" /></td>
<td class=\"descr\">" . $data['blurb'] . "</td>
<td><ul>" . $data['features']. "</ul></td>
<td><span class=\"price\">\$" . $data['price'] . "</span><br/>
How many would you like? <br/>
<input name=\"a$count\" type=\"text\" maxlength=\"2\" onkeyup=\"$pass\" /></td>
</tr>");
}
mysql_close($con);
print "</table>
</form>
</div>";
?>
</div>
<div id="lside">
<div id="float_tot">
<p>Your current total is</p>
<br/>
<form name="output">
$<input name="readout" type="text" readonly="readonly" value="0"/>
</form>
</div>
</div>
<div id="footer">
<img src="Images/Site/footer.gif" width="1200" height="74" />
</div>
</body>
You can re-use variables over and over on a single page. This would be a good idea for at least the database connection. Define $con just once at the top of the page and use it multiple times. Just because you close your php tag (?>) doesnt mean you lost your variables.
For code re-use, I would take a look at defining functions for common code fragments. Ideally, you would create classes to encapsulate logic. For example, it is typical to have a database connection object (or framework) which encapsulates connecting, querying, etc.
You may benefit from taking a look at the Zend Framework. It is a great tool for learning PHP developers to see industry standards on how to do many of things you are asking.
http://framework.zend.com/docs/quickstart
There are several ways to reuse code in php. The most basic and powerful one is the concept of functions.
I have the following css code:
#Layer3
{
position:absolute;
width: 89%;
height: 40%;
left: 10%;
top: 56%;
background-color: #f1ffff;
}
#Layer3 h1
{
font-size: medium;
color: #000033;
text-decoration: none;
text-align: center;
}
.tableheader {
border-width:10px; border-style:solid;
}
.tablecontent {
height: 95%;
overflow:auto;
}
However, when I use this PHP to generate the html
echo '<div id="tableheader" class="tableheader">';
echo "<h1>{$query} Auctions</h1>" . "\n";
echo "</div>";
echo '<div id="tablecontent" class="tablecontent">';
echo "<table border='0' width='100%'><tr>" . "\n";
echo "<td width='15%'>Seller ID</td>" . "\n";
echo "<td width='10%'>Start Date</td>" . "\n";
echo "<td width='75%'>Description</td>" . "\n";
echo "</tr>\n";
// printing table rows
foreach ($rows as $row)
{
$pk = $row['ARTICLE_NO'];
echo '<tr>' . "\n";
table contens generated in here
echo '</tr>' . "\n";
}
echo "</table>";
}
echo "</div>";
which generates this html:
<div id="tableheader" class="tableheader">
<h1>hardy Auctions</h1>
</div>
<div id="tablecontent" class="tablecontent">
<table border='0' width='100%'>
<tr>
<td width='15%'>Seller ID</td>
<td width='10%'>Start Date</td>
<td width='75%'>Description</td>
the rest of table stuff
</div>
The stylesheet is correctly referenced so I am unsure what is causing the error. But there is no border around tableheader at all. Both of these layers are in Layer3 which no longer displays properly on the page.
#tableheader {
border: 10px solid #000;
}
Try giving it a color.
EDIT: since its id is tableheader, try changing the style selector to be an id. You could also try using !important to see if anything is overriding your class selector.
Specificity values:
inline: 1000; id: 100, class: 10, element: 1
!important trumps all other non-important declarations.
Start by browsing the HTML DOM in the rendered page either using Firebug in Firefox or using the IE Developer Toolbar in IE.
That way, you can see what styles are actually associated with the element in the rendered page. It's a lot easier to debug the issue from there.
One possibility is that there's a syntax error somewhere in the CSS file causing the styles not to be applied correctly.
I've just had a quick look at this and it seams fine, I've also created a local copy of these and the styles work out okay as well, I get a nice thick black border around the h1 text.
So from what your explaining something is either overwriting the styles, or the styles aren't being applied to the page.