I have a html table that is populated using PHP:
<table class="flat-table flat-table-1" width="100%">
<tr style="background-color:#FFF;">
<td class="table-head">Name</td>
<td class="table-head">Review</td>
<td class="table-head">Rating</td>
</tr>
<?php
//run a query to find all the fields in the review table that belong to the specific hall, using the id in the url ($current_id)
if ($r = $db->prepare("SELECT * FROM reviews WHERE hall_id = :current_id")) {
//bind the parameters used in the above query using the 'current_id' variable
$r->bindParam(':current_id', $current_id);
//Execute the prepared query
$r->execute();
//search review table for all fields and save them in $review
$reviewtemp = $r->fetchAll();
foreach( $reviewtemp as $review) {
//loop and output the reviews
?>
<tr>
<td><? echo $review['name'];?></td>
<td><? echo $review['review']; ?></td>
<td><? echo $review['overall']; }}?></td>
</tr>
</table>
The - <td><? echo $review['review']; ?></td>' - contains longs pieces of text that need to be shorted using a show more/less button, if the piece of text is over 400 characters.
I have tried using pieces of code I have found on the internet but have had no luck. I am hoping that maybe somebody on here can point me in the right direction? I am happy to use any solution I can.
The following piece of code is the kind of thing I need to use, however I am unsure how to implement it into my code: http://jsfiddle.net/Wpn94/326/
(--I have previously asked a similar question before but had no responses. I have now changed the question and have posted it again--)
In the following code, I updated the HTML to contain more than one review and use tables.
http://jsfiddle.net/3VTb7/
The structure that is impotant for the javascript to work is this:
<table>
<tr><td>Name</td></tr>
<tr><td><div class="content hidecontent">insanely long review here</div><div class="show-more">Show More</div><td></tr>
</table>
Note: You must have the hidecontent class. The show more div should be directly after the content you want to hide and include the show-more class.
Without looking at the code you tried to mix together, I cannot determine what else can be wrong.
This might be an error: <td><? echo $review['overall']; }}?></td>
Since you're looping the table rows, } should go after </tr>
<tr>
<td><? echo $review['name'];?></td>
<td><? echo $review['review']; ?></td>
<td><? echo $review['overall']; ?></td>
</tr>
<?php }} ?>
To answer question, maybe something like:
First, if you have review_id use that otherwise add $id = 0; before if ($r = $db->prepare("...
Split review into two..
<td><?php
$review = $review['review'];
$short_length = 200;
$short = substr($review, 0, $short_length);
$long = substr($review, $short_length);
$id++;
echo $short . '<span class="content hidecontent" id="review'.$id.'">'.$long.'</span>
Show More';
?></td>
Then use jQuery to toggle
$("#hidecontent").click(function(){
var reviewid = "#review"+$(this).data("id");
$(reviewid).slideToggle(500, function(){
var moreless = $(reviewid).is(":visible") ? 'Less' : 'More';
$(this).html("Show "+moreless)
});
});
Related
I am not very good at coding i hope someone can help me out.
I am trying to create a basic program where i select values form a mysql table via array into table cells and change colours of those cells if < or > compared to another cell value. I have got everything working but i am stuck with this. When the code runs it only applys the script/css where it changes color to the first row only and it does not apply to the rest of the row cells. I have cut down on my code to only show the issue i am facing so this code below is only a snippets of my code to give an idea so parts of it may be incomplete.
Basically the color changes only applies to the first row does not apply to other rows
Can anyone point me in the right direction to sort this issue
<?php
include_once 'temp/dbconnect.php';
$result = mysqli_query($conn,"SELECT * FROM cusers WHERE email='".$_SESSION['_email']."' ORDER BY id DESC");
?>
<?php
if (mysqli_num_rows($result) > 0) {
?>
<?php
$i=0;
while($row = mysqli_fetch_array($result)) {
?>
<?PHP
$num_of_alerts_achived1=($row["num_of_alerts_achived"]);
$num_of_alerts_achived1_res = (int)$num_of_alerts_achived1;
?>
<?PHP
$alert_count_eng2= ($row["total_global_alert_count"]) / ($row["engineer_count"]);
$alert_count_per_eng2_res=$alert_count_eng2*1.3;
$alert_count_per_eng2_res = (int)$alert_count_per_eng2_res;
?>
<table>
<tr>
<td class="tg-tvyx" colspan="3">No of Alerts(25%)</td>
<td class="tg-xcv"><?php echo $num_of_alerts_achived1_res; ?></td>
<td class="tg-xcv"><?php echo $alert_count_per_eng1_res; ?></td>
<td style="font-size:10px;" class="alert-t1-overwrite"><?php echo $alert_count_per_eng1_res; ?></td>
<td class="tg-xcv"><?php echo $alert_count_per_eng2_res; ?></td>
<td style="font-size:10px;" class="alert-t2-overwrite"><?php echo $alert_count_per_eng2_res; ?></td>
</tr>
</table>
<script type="text/javascript">
$('.alert-t1-overwrite').each(function() {
if(parseInt($(this).text(), 10) <= <?php echo $num_of_alerts_achived1_res; ?>) {
$(this).addClass('alert-t1_overwritten');
}
});
$('.alert-t2-overwrite').each(function() {
if(parseInt($(this).text(), 10) <= <?php echo $num_of_alerts_achived1_res; ?> ) {
$(this).addClass('alert-t2_overwritten');
}
});
</script>
.alert-t1-overwrite {color:red;background-color: red; text-align:center; }
.alert-t1_overwritten {color:green;background-color: green; text-align:center;}
.alert-t2-overwrite {color:red;background-color: red; text-align:center; }
.alert-t2_overwritten {color:green;background-color: green; text-align:center;}
Front end test 1
Front end test 2
I'm trying to create a table, and in each row there will be a picture, and when the picture is clicked a js function gets executed, each entry of a row in the table will create a js script for the picture of that row. And for that reason I'm using <?php echo ?> on the id of the image and on the getElementById in the script. And I have no problem using the echo on the id of the image, but if I put it inside getElementById the js code doesn't get executed. And if I write instead directly the number of the id let's say
getElementById("3") instead of getElementById("<?php echo $contact['id']; ?>") it works perfectly, but if use echo it doesn't, even when the source code of the loaded page shows that getElementById("<?php echo $contact['id']; ?>") successfully got printed as getElementById("3")
Here's the full table's code:
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php $contacts = getContacts();
if($contacts->num_rows) {
foreach($contacts as $contact) { ?>
<tr>
<td>
<img id="<?php echo $contact['id']; ?>" src="img/arrow.png" onclick='removeImage("");'>
<script type="text/javascript">
function removeImage() {
document.getElementById("<?php echo $contact['id']; ?>").style.display = "none";
}
</script>
</td>
<td><?php echo $contact['Name']; ?></td>
<td><?php echo $contact['Status']; ?></td>
</tr>
<?php }} ?>
</tbody>
</table>
When looping, you are recreating the same function over and over again, but with a different ID in each. However, you can't create the same function over and over again with the same name.
On your img change removeImage('') to removeImage(this)
<img id="<?php echo $contact['id']; ?>" src="img/arrow.png" onclick='removeImage(this);'>
Then outside of the loop just have a single function that refers to the element passed to it
function removeImage(el) {
el.style.display = "none";
}
So I have an SQL query which pulls all data from a mysql table, called example:
function get_example($conn){
$statement = "SELECT * FROM `example`";
if ($result = $conn->query($statement)) {
$rows = array();
while($row = $result->fetch_array()){
$rows[] = $row;
}
return $rows;
} else {
return 0;
}
}
I call this function in PHP and store the value in $example. I can then use a foreach to create a table of everything:
<table>
<tr>
<td>ID</td>
<td>Name</td>
<td>Description</td>
</tr>
<?php
foreach($example as $entry){
echo "<tr>";
echo "<td>" . $entry['id'] . "</td>";
echo "<td>" . $entry['name'] . "</td>";
echo "<td>" . $entry['description'] . "</td>";
echo "</tr>";
}
?>
</table>
This is all simple enough and I can use a form with method POST to choose a value and filter the table accordingly (for eg, only show entires where the description field is a certain value).
My question is, how do I filter this table using JS?
I would want to have html buttons which, when clicked, call a function which changes the relevant tags css property for visibility from hidden to visible.
So - by default every tag is listed int he table with visibility proeprty set to hidden. Then, when certain elements are clicked, the associated elements are set to visible.
Is this possible? My JS knowledge is limited so the more I look into it, the more it seems the PHP form may be the ssafest way to go
Thanks
If you want the Filtering in your table with the help of JavaScript. the i suggest Datatables for it.
DataTables:
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.
You Can find More Example on datatables here
HTML
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<?php
foreach($example as $entry){
<tr>
<td><?php $entry['id']; ?></td>
<td><?php $entry['name']; ?></td>
<td><?php $entry['description']; ?></td>
</tr>
}
?>
</tbody>
</table>
Js
$(document).ready(function() {
$('#example').DataTable();
});
Add this cdn links to your page
https://code.jquery.com/jquery-1.12.0.min.js
https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css
If you choose to filter objetcs client-side using javascript you could use array.filter() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
or the usefull library underscorejs http://underscorejs.org/
I am working on a simple Chat right now, its already working, but its not very efficient.
Whenever I run my script it refreshes the whole Chat and loads the content over and over again.
Im trying to find a way that the script only loads new content from my chat database, the old messages shouldnt load over and over again.
This is the part from my index.php:
<div id="chat" class="full rund">
<table border="1" class="full chattable">
<?php
$abfrage = "SELECT * FROM chat";
$ergebnis = mysql_query($abfrage);
while($row = mysql_fetch_object($ergebnis)) {?>
<tr class="chattr">
<td style="width:200px;"><h3 class="text">ƬψƬ ☢ <?php echo $row->name;?>:</h3></td>
<td style="width:440px;"><p><h3 class="text"><?php echo $row->text;?></h3></p></td>
<td style="width:160px;"><h3 class="text"><?php echo $row->timestamp;?></h3></td>
</tr>
<?php
}
?>
</table>
</div>
This is my chat.js:
setInterval( "updateShouts()", 1000 );
function fx(form,target){
var _target=target;
var url=form.action;
var data=$(form)[(form.method.match(/^post$/i))?'serializeArray':'serialize']();
$(_target).load(url,data,function(){setTimeout(function(){
$(_target).empty();
},0);});
return false;}
function updateShouts(){
$('#chat').load('php/latestMsg.php');
}
My latestMsg.php (same as index):
<div id="chat" class="full rund">
<table border="1" class="full chattable">
<?php
$abfrage = "SELECT * FROM chat";
$ergebnis = mysql_query($abfrage);
while($row = mysql_fetch_object($ergebnis)) {?>
<tr class="chattr">
<td style="width:200px;"><h3 class="text">ƬψƬ ☢ <?php echo $row->name;?>:</h3></td>
<td style="width:440px;"><p><h3 class="text"><?php echo $row->text;?></h3></p></td>
<td style="width:160px;"><h3 class="text"><?php echo $row->timestamp;?></h3></td>
</tr>
<?php
}
?>
</table>
</div>
I hope anyone can help me, ive been searching for a long time now and I couldnt find anything that solves my problem!
Thanks :)
2 Solutions.
You will need a way to mark your messages as read, per user of course.
You can ignore that and only read back the last X messages.
in your chat table, you must add 'unread' field or something, to identify the message status (read/unread) , same like #geggleto solution
add filter to your query to something like this :
$abfrage = "SELECT * FROM chat WHERE timestamp between '$from' AND '$to' ";
to make sure you have a role to limit message by time
I made this JS function that open 2 pages
function edit(id){
window.open('<?php echo site_url();?>store_out/store_out_print/'+id);
window.open('<?php echo site_url();?>store_out/delivery_print/'+id);
document.getElementById('print').target = '_blank';
}
I have that table that display all possible records that user can select one row and click on print image so two pages are opened:
<?php
for($i=0;$i<sizeof($storeout);$i++){ ?>
<tr class="gradeZ" id="<?php echo $storeout[$i]->storeout_id;?>" onclick="edit(this.id); ">
<td><?php printf("%06d",$i+1);?></td>
<td><?php echo $storeout[$i]->storeout_id;?></td>
<td><?php echo $storeout[$i]->storeout_modified_time;?></td>
<td><?php echo $account[$i][0]->account_name;?></td>
<td><?php echo $storeout[$i]->rof_id != 0 ? "R.O.F" : "S.O";?></td>
</tr>
<?php } ?>
I want when I select specific row and click on the print image, execute two functions to open two different pages (delivery/store_out).
Any Ideas guys?
I'm going to assume that the td is in a tr which is programmatically generated in a loop (i.e. you will have more than 1 tr, td, and img). I will also assume jQuery is available.
The first problem will be if you have more than 1 row that is created in a loop, you will have a bunch of things with the same id="print". This is not the good js.
You should append the store_out (or whatever the id is you are trying to get to the controller) to the id attribute. Something like id="print_<?php echo $thing->id;?>". This will let you get the id you want to pass to the edit function. I would also add a class="print" which will make the below easier. So, the whole row would look something like:
<td width="5%"><a id="print_<?php echo $thing->id; ?>" class="print" href="#" ><img src="<?php echo site_url();?>/images/print.png" border="0" title="Print" height="25" width="25"/> </a></td>
Which would output something like:
<td width="5%"><a id="print_1234" class="print" href="#" ><img src="http://example.com/images/print.png" border="0" title="Print" height="25" width="25"/> </a></td>
Second is you are not passing the id to the method so far as I can tell. Considering you heeded the above, you can pull the id from the id attribute.
$('.print').click(function(){
var id = $(this).attr('id').split('_')[1];
edit(id);
})