I am populating a <DIV id='area'> element using a PHP script and I want to repopulate the same DIV element by calling a PHP function in JavaScript if the user wishes to filter the information:
$("#area").load("update-dashboard.php?id=7263");
It populates the DIV element with the correct information but the CSS styling I'm using to format the information (eg. class="highlight") doesn't get applied for some reason. So what I get reads correctly if I view the underlying HTML but the browser doesn't format it according to the stylesheet.
<style type="text/css">
.Highlight {
background-color: #dcfac9;
cursor: pointer;
}
td.highcell {
padding-top: 8px;
padding-bottom: 8px;
}
</style>
Here's what my table should contain within the DIV section:
<table style='border-collapse: collapse;' border=0 width='100%' id='link-table'>
<tr class='highlight'>
<td class='highcell'>
NK51 SNR55
</td>
<td class='highcell' width=36>
<img src='status_2.png' border=0 width=32 height=32><td class='highcell'>18-Dec-15</td>
<td class='highcell'>NK51 SNR55</td>
<td class='highcell'></td>
<td class='highcell'></td>
</tr>
ADDITIONAL INFO:
I also use this jQuery code to highlight the rows in the Table - maybe it doesn't work with HTML loaded after the page appears - if so can it be reinitialised?
$(function ()
{
$('#link-table td:first-child').hide();
$('#link-table tr').hover(function ()
{
$(this).toggleClass('highlight');
});
$('#link-table tr').click(function ()
{
location.href = $(this).find('td a').attr('href');
});
});
Try changing your css from .Highlight to .highlight. CSS selectors are case-insensitive but the HTML class attributes are not.
Related
I have the following php code to hyperlink another page to edit whatever data is on the table. When I click the "edit" button it tells me the localhost is not found. Is the code wrong?
editpage is the name of the page where I have the edit code.
<td style="text-align:center; vertical-align:middle;">
<?php echo "<a href='editpage.php?edit=$row[id]'>"?> Edit
</td>
Do you have access to the following page:
http://localhost/editpage.php
You might need clean up your code:
<style>
.ac { text-align: center; }
.vm { vertical-align: middle; }
</style>
<td class="ac vm">
Edit
</td>
In this below code i have text box and submit button .when i enter or refresh that page the div tag displays but my expected result is when i enter a value in textbox and click submit button then div tag should appear.The problem is div tag displays always. Please any one help me.
<form action="<?php echo site_url('search1_site/search_keyword');?>" method = "post">
<input type="text" name = "keyword" />
<input type="submit" id="opn" value = "Search" />
</form>
<div id='hideme'>
<strong>Warning:</strong>These are new products<a href='#' class='close_notification' title='Click to Close'>
<img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="hide('hideme')"/>
</a>
<div style="background:#669900; width: 500px; height: 500px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal" >
<table>
<tr>
<th>course_code</th>
<th>course name</th>
</tr>
<?php foreach($results as $row):?>
<tr>
<center>
<td>
<?php echo $row->course_code?>
</td>
</center>
<center>
<td>
<?php echo $row->course_name?>
</td>
</center>
</tr>
<?php endforeach;?>
</table></div></div>
</div>
<script>
$('a.modal').bind('click', function(event) {
event.preventDefault();
$('#modal').fadeIn(10);
});
function hide(obj) {
var el = document.getElementById(obj);
el.style.display = 'none';
}
</script>
First I'd like to say that mixing JQuery with traditional javascript is not very efficient.. Instead of using getElementById you can use $('#' + obj).val()...
In your problem I guess the most efficient solution would be to use JQuery's .hide() and .show() methods to hide and unhide divs....
You can try this :
function hide(obj) {
var el = $('#' + obj).val();
e1.hide();
}
Also if you want any div to be hidden as soon as the page is loaded, you can use the hide method in $(document).ready(){}... To show it anytime you can use e1.show() method...
First you need to hide your div through css usign display:none;. You haven't set this that is why your div is showing on page load.
Your div should looks like
<div style="background:#669900; width: 500px; height: 500px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px;display:none;" id="modal" >
Call a function on form submit. Your <form> tag should looks like
<form onSubmit="return showDiv();" action="<?php echo site_url('search1_site/search_keyword');?>" method = "post">
And your javascript function will looks like
function showDiv() {
$('#modal').fadeIn(10);
return false; //not to refresh page
}
First add display:none; to the div whom you want to be hidden,
add attribute
onsubmit="return validate()"
function validate()
{
//validate the form as you want
document.getElementById('modal').style.display="block";
return false ; // if you dont want to submit the form
}
all you need is an css style <style>#hideme{display:none}</style>
How can I attach an external CSS file to display data fetched from a MySQL database? Can I display data using CSS instead of using tables. I want to completely avoid tables in diplaying the fetched data.
This is the code to fetch data from the MySQL database:
<?php
echo "Database Date: " .date("Y-m-d");
?>
Variables included in this data are: Assigned NCL Number, Hospital, Age, Sex, Primary cancer and the date of diagnosis and latest management on the patient.
<style type="text/css">
table.data { width:100%; margin: 0;
border: 1px solid black; border-spacing: 2px; }
.id {width: 7%; background-color: #c7c7c0; }
.date {width: 12%; background-color: #d8d8d1; }
.nclnumber { width: 10%; background-color: #c7c7c0; }
.hospital {width: 17%; background-color: #d8d8d1; }
.age { width: 3%; background-color: #c7c7c0; }
.sex { width: 2%; background-color: #d8d8d1; }
.cancer { width: 10%; background-color: #d8d8d1; }
.dateofdiagnosis { width: 7%; background-color: #d8d8d1; }
.notes { width: 32%; background-color: #d8d8d1; }
</style>
<table class="data" border="0" cellspacing="2">
<tr>
<td class="id"><b>Id</b></td>
<td class="date"><b>Date</b></td>
<td class="nclnumber"><b>NCL Number</b></td>
<td class="hospital"><b>Hospital</b></td>
<td class="age"><b>Age</b></td>
<td class="sex"><b>Sex</b></td>
<td class="cancer"><b>Diagnosed Cancer</b></td>
<td class="dateofdiagnosis"><b>Date of Diagnosis</b></td>
<td class="notes"><b>Notes</b></td>
</tr>
</table>
<?php
// Connects to your Database
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("cancer") or die(mysql_error());
$data = mysql_query("SELECT * FROM cancer WHERE Age ='1'OR Age = '2' OR Age = '3'OR Age = '4'OR Age = '5'OR Age = '6'OR Age = '7'OR Age = '8'OR Age = '9'")
or die(mysql_error());
while($info = mysql_fetch_array( $data )) {
echo "<table class='data' border='0' cellspacing='2'>
<tr>
<td class='id'>".$info['Id']."</td>
<td class='date'>".$info['Date']."</td>
<td class='nclnumber'>".$info['NCL_Number']."</td>
<td class='hospital'>".$info['Hospital']."</td>
<td class='age'>".$info['Age']."</td>
<td class='sex'>".$info['Sex']."</td>
<td class='cancer'>".$info['Diagnosed_Cancer']."</td>
<td class='dateofdiagnosis'>".$info['Date_of_Diagnosis']."</td>
<td class='notes'>".$info['Notes']."</td>
</tr>
</table>";
}
?>
There is absolutely no reason not to use <table> elements for tabular data.
The anti-table hysteria that some people have is simply a misunderstanding: it's bad to misuse tables for layouting purposes. There's nothing wrong with the HTML tag, though. In fact, using any other HTML element to display tabular data is bad for semantics.
The <table> tag and its contained <tr> rows and <td> columns informs the browser rendering it that the data therein is related and columnar. Don't think of the <table> (or any HTML tag for that matter) as strictly a visual display element. They convey meaning about the data to the machine which is parsing it.
Let's sort out a little confusion. Displaying in CSS instead of tables doesn't make since as tables and its associated tags are HTML elements and CSS is styling you can apply to those elements. They are not equivalent.
The alternative to tables would be to create a complex, complicated and convoluted layout using a combinations of divs and spans.
However, there is absolutely no reason why, if the data is tabular, that you should bother with such an awkward design just to avoid the use of the <table> tag. That's why the <table> tag is in the HTML spec.
Abusing the <table> tag for layout purposes has given the tag a bad rep. When used properly though (i.e. to display tabular data) it can be very very useful.
Best advice: use the <table> tag and follow the advice of the community wiki.
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.
can someone tell me how to create a nice small tooltip like ajax pop-up ?
the situation is like this,
I am pulling the $row->title from the db, and then I presented it as a link like this
<?php foreach($task->result() as $row): ?>
<tr>
<td><a href=#><?php echo $row->title; ?></a></td>
</tr>
<?php endforeach; ?>
when a random user clicks that link, I want it to produce a small pop-up or tooltip like stuff that contains the title's description $row->description , and when user moves mouse from it,it closes. i know its possible, but i just don't know how to do it.
You need jQuery. Add stylesheet into <head></head> and javascript to any place in your page.
Sample style:
<style type="text/css">
.description {
visible: hidden;
position: absolute;
left: 0px;
top: 0px;
/* View */
font-family: Arial,Tahoma,Verdana;
font-size: 8pt;
color: #bbb;
background-color: #444;
padding: 5px 7px;
border: 1px solid #222;
}
</style>
Javascript:
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Add listener to links
$(".some_class").click(function(e) {
var description = $('<div class="description">'+ $(this).attr("description") +'</div>');
$(this).append(description);
description.css("left", e.pageX-4);
description.css("top", e.pageY-4);
description.animate({ opacity: 'toggle' }, 400, 'linear');
// Remove description, if user moved the mouse cursor out description
description.mouseout(function() {
$(this).remove();
});
return false;
});
});
</script>
Change your code:
<?php foreach($task->result() as $row): ?>
<tr>
<td><?php echo $row->title; ?></td>
</tr>
<?php endforeach; ?>
But the better way is to check out some good jQuery plugin..
Check out this jQuery plugin: http://www.w3avenue.com/2010/01/11/coda-bubble-jquery-plugin/
something like the following?
AJAX to get the description and when you're received the response create the description 'box'
var tipel = document.createElement('div');
tipel.innerHTML = descr;`
add it to the page
var bodyel = document.getElementsByTagName('body').item(0);
bodyel.appendChild(tipel);`
and position it like:
tipel.style.position = "absolute";
tipel.style.top = newfntogetabsolutecoord_top(document.getElementById("mytitleelement"));
tipel.style.left = newfntogetabsolutecoord_left(document.getElementById("mytitleelement"));`
getting absolute coords of an element can be tricky, look for a fn online.
for closing the tip, a suggestion would be placing tipel just under the mouse pointer (you already know it's over the link "mytitleelement", just shift the tip a little in the lines above), and then add an onmouseout event function to tipel that:
tipel.style.display = "none"; //hides or
tipel.parentNode.removeChild(tipel); //removes it from the page
(you might get away with using this instead of tipel in those 2 lines)