Changing css depending on SQL value - javascript

I'm new to both php and jquery, and i'm trying to create a webpage which shows players and it's status based on data from my Mysql server.
The base code works, although the code scraped together from multiple youtube tutorials :)
I would like to change the opacity of a player's row when it's status is, or becomes 0 (dead).
This is the code i have so far :
pagetest.php:
<!DOCTYPE html>
<html>
<head>
<title>pagetest</title>
</head>
<body>
<table id="show">
<tr>
<td>player</td>
<td>status</td>
</tr>
</table>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function() {
$('#show').load('test.php')
}, 3000);
});
</script>
</body>
</html>
test.php :
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<?php
$conn = mysqli_connect("myserver", "myuser", "mypass", "mydb");
if ($conn-> connect_error) {
die("Connection failed:". $conn->connect_error);
}
$sql = "SELECT player, status FROM mytable";
$result = $conn->query($sql);
if ($result-> num_rows > 0) {
while ($row = $result->fetch_assoc()){
echo "<tr><td>" . $row["player"] . "</td><td>" . $row["status"] . "</td></tr>";
}
echo "</table>";
}
else {
echo "No game data available";
}
?>
</body>
</html>
I'd really appreciate your help :)

Is there any reason for using jQuery with it? If no, then you can use this code:
<body>
<?php
$conn = mysqli_connect("host", "user", "password", "database");
if ($conn-> connect_error) {
die("Connection failed:". $conn->connect_error);
}
$sql = "SELECT player, status FROM mytable";
$result = $conn->query($sql);
if ($result-> num_rows > 0) {
echo '<table id="show">
<tr>
<td>player</td>
<td>status</td>
</tr>';
while ($row = $result->fetch_assoc()){
$status = $row["status"];
$player = $row["player"];
echo "<tr style='" . ($status == 0 ? 'opacity: 0;' : '') . "'><td>" . $player . "</td><td>" . $status . "</td></tr>";
}
echo '</table>';
}
else {
echo "No game data available";
}
?>
</body>

You can do something like that:
echo '<tr class="player-status-'.$row["status"].'"><td>'. $row["player"] .'</td><td>' . $row["status"] . '</td></tr>';
Add a class to your line tr based in the $row["status"] so rendered you'll have something like this: <tr class="player-status-0"><td>cristiano ronaldo</td><td>0</td></tr>
this way you can create a style to this class with css
.player-status-0 {
opacity:
}
By the way, have thought about using ajax and return a json with the data?

Related

How to display a json array in html table

Hi I am new to javascript/JS or jquery . All i know is to code in php but i want to learn JS too.
My code didnt diplay the get data from json_encode to HTML TABLE.
please help me to do this. I search all way how to that. but they always use like var but when i try to do the same i didnt display anything so i start again from basics.
what i want is to display the data get from process.php json_encode into my html table TBODY part only not the whole table.
please correct me if there are something missing.(i.e jquery plugin? where to download please)
below are my code.
For Index.html
<html>
<head>
<title>LEARN AJAX</title>
<style type="text/css">
#mytable,td{
border:0px solid blue;
}
</style>
</head>
<body>
<table>
<thead>
<th>ID No.</th>
<th>Full Name</th>
<th>Address</th>
</thead>
<tbody>
<!--*/data should go Here-- >
<!--Data from process.php-->
</tbody>
</table>
</body>
</html
For Process.php
<?php
include ('connection.php');
if (mysqli_connect_errno()) {
die('Could not connect: ' . mysql_error());
}
$return_arr = array();
$sql="SELECT * FROM members";
if ($result = mysqli_query( $conn, $sql )){
while ($row = mysqli_fetch_array($result))
{
$row_array['id'] = $row['id'];
$row_array['name'] = $row['fname'];
$row_array['address'] = $row['ad'];
array_push($return_arr,$row_array);
}
}
//echo json_encode($return_arr);
$result = json_encode($return_arr);
?>
For my DB connection:
<?php
//for MySQLi OOP
$conn = new mysqli('localhost', 'root', '', 'mydatabase');
if($conn->connect_error){
die("Connection failed: " . $conn->connect_error);
}
?>
In your tbody just loop through the result you get from php:
<tbody>
<?php
foreach ($result as $value) {
echo "<tr><td>"+$value['id']+"</td><td>"+$value['fname']+"</td><td>"+$value['ad']+"</td></tr>";
}
?>
</tbody>

How to edit and delete records of MySQL database without refreshing?

I am new to ajax, I am trying to view, add, edit and delete data of mysql database without refreshing the tab or in other words using ajax on this table:
I have done the view part, *edited but I can not figure out how to edit or delete *. I know it is a very long task, but I have found no solution on the internet.. Thanks in advance
HTML Code:
<html>
<head>
<title>View Data Without refresh</title>
<script language="javascript" type="text/javascript" src="script/jquery-git.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
(function() {
$.ajax({
type: "POST",
url: "display.php",
dataType: "html",
success: function(response){
$("#responsecontainer").html(response);
}
});
});
});
</script>
</head>
<body>
<fieldset><br>
<legend>Manage Student Details</legend>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Class</th>
<th>Section</th>
<th>Status</th>
</tr>
</table>
<div id="responsecontainer" align="center"></div>
</fieldset>
<input type="button" id="display" value="Add New"/>
</body>
</html>
PHP Display Code:
<?php
include("connection.php");
$sql = "select * from tbl_demo";
$result=mysqli_query($db,$sql);
echo "<table class='myTable'>";
while($data = mysqli_fetch_row($result))
{
echo "<tr>";
echo "<td width='13.5%'>$data[0]</td>";
echo "<td width='21%'>$data[1]</td>";
echo "<td width='19.5%'>$data[2]</td>";
echo "<td width='24%'>$data[3]</td>";
echo "<td><span class='edit'>Edit</span> | <span
class='delete'>Delete</span></td>";
echo "</tr>";
}
echo "</table>";
?>
If your connection, sql query and php response is ok and
I want it to be automatically done
means you want run ajax on page loading. Then, Output of php should be at last instead in each iteration.
<?php
include("connection.php");
$sql = "select * from tbl_demo";
$result=mysqli_query($db,$sql);
$output = "<table class='myTable'>";
while($data = mysqli_fetch_row($result))
{
$output .="<tr>";
$output .="<td width='13.5%'>$data[0]</td>";
$output .="<td width='21%'>$data[1]</td>";
$output .="<td width='19.5%'>$data[2]</td>";
$output .="<td width='24%'>$data[3]</td>";
$output .="<td><span class='edit'>Edit</span> | <span
class='delete'>Delete</span></td>";
$output .="</tr>";
}
$output .="</table>";
echo $output;
?>
To make edit/delete you need to pass or redirect page with action to other page named controller. After making changes again you need to redirect index/view data page or use ajax if you don't want to refresh/redirect page.

pass the value to database

I want to pass the value from the Ajax code to the database as this program is to show the details of the user, but there is an error in the code in passing the value. What can I do now?
function showUser() {
httpRequest = new XMLHttpRequest();
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
var id = document.getElementById("id").value;
httpRequest.onreadystatechange = alertContents;
httpRequest.open("GET", "http://localhost/cart/guser.php?id=" + id + "&rand=" + , true);
httpRequest.send();
}
function alertContents() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
document.getElementById("txtHint").innerHTML = httpRequest.responseText;
}
}
var id = document.getElementById('id').value;
}
<form>
enter digit :
<input type="text" id="id" name="id" />
<br />
<input type='button' onclick='showUser(this.value)' value='select' />
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b>
</div>
below code is for guser.php
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_GET['q']);
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "cart";
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
mysqli_select_db('cart',$con);
$sql="SELECT * FROM user_details WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>email</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['email'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>
Try this as your code have lots of problems
code of new html file
<!DOCTYPE html>
<html>
<body>
<form>
enter digit :
<input type="text" id="id" name="id" onkeyup='showUser(this.value)'/>
<br />
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b>
</div>
<script>
function showUser(id) {
httpRequest = new XMLHttpRequest();
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
else
{
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
document.getElementById("txtHint").innerHTML = httpRequest.responseText;
}
};
httpRequest.open("GET", "localhost/cart/guser.php?id=" + id, true);
httpRequest.send();
}
}
</script>
</body>
</html>
and code of new guser.php file
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$id = intval($_GET['id']);
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "cart";
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
mysqli_select_db('cart',$con);
$sql="SELECT * FROM user_details WHERE id = '".$id."'";
$result = mysqli_query($con,$sql);
echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>email</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['email'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>
Hope this helps!!..Comment for further queries
Try This:
Add in head:<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
you have to type person id in inputbox and user info in texthint div:
you will get id in guser.php of user from post and run query.and echo user info into guser.php file
<script type="text/javascript">
function showUser($id){
$("#email").keyup(function(){
$.ajax({
type: "POST",
url: "http://localhost/cart/guser.php",
data:'keyword='$id,
success: function(data){
$("#txtHint").html(data);
}
});
});
}
</script>
Either you should remove the , from httpRequest.open("GET", "http://localhost/cart/guser.php?id="+id+"&rand="+,true); jsut before true to make rand=true
or remove the + from the url just after &rand="

How to pass PHP value to Javascript and redirect to other page?

Why is it that I cant pass a value from my PHP code to an OnClick function on my button to my javascript function depCheck2()? I would like to redirect it to 2 different pages depending on the value it carries. Could anyone please help me?
<html>
<head>
<?php
$company_id = $_GET['cont'];
$query = "SELECT count(Department_ID) as countDep FROM department WHERE Company_ID=$company_id";
$result = mysql_query($query, $db) or die(mysql_error($db));
$row = mysql_fetch_array($result);
extract($row);
?>
<script>
function depCheck2(x){
var CountRow = '<?php echo "$countDep";?>';
if (CountRow>0){
window.location.assign("editEvent.php?id="+x"");
}
else{
window.location.assign("editEvent.php2?id="+x"");
}
}
</script>
</head>
<body>
<?php
include("config.php");
$company_id = $_GET['cont'];
$query = "select * from event_details where Company_ID=".$company_id." ORDER BY EventDetails_ID DESC";
$result=mysql_query($query, $db) or die(mysql_error($db));
echo "<table border=1 width='1000'>";
echo "<tr><th>Serial Number</th><th>Status</th><th>Event Type</th><th>Date of Event</th><th>End Date</th><th>Details</th></tr>";
while ($row = mysql_fetch_array($result))
{
extract($row);
echo "
<tr>
<td align='center'>$EventDetails_ID</td>
<td align='center'>$Status</td>
<td align='center'>$EventType</td>
<td align='center'>$StartDate</td>
<td align='center'>$EndDate</td>
<td align='center'>
<input type='button' value='Details' class='btn btn-large btn-primary' onClick='depCheck2(\''.$EventDetails_ID.'\')'>
</td>
</tr>
";
}
?>
</table>
</body>
</html>
At first: <?php echo "$countDep";?> contains $countDep which is not defined in PHP.
It is only present in the DB Query but you haven't assigned it to any variable from the $result
Then window.location.assign("editEvent.php?id="+x""); the syntax is wrong.
You have extra quotes at the end.
It should be window.location.assign("editEvent.php?id="+x);
Try this one:
window.location.href ="editEvent.php2?id="+x;

sending checkboxes value to database in php

I have a table in my page that first two columns of it come from a table in database, and third column is for checkbox, if user know the meaning of the words that are displayed in table, check them
I want to update my table in database in this way: for checked checkbox insert 1 to checking column in table and otherwise insert 0
how can I get checkbox value and insert it into right row in database
I have this code until now:
<?php
$con = mysql_connect("localhost", "root", "")
or die(mysql_error());
if (!$con) {
die('Could not connect to MySQL: ' . mysql_error());
}
mysql_select_db("project", $con)
or die(mysql_error());
$result = mysql_query("select * from words");
echo "<table border='1'>
<tr>
<th>word</th>
<th>meaning</th>
<th>checking</th>
</tr>";
while($row = mysql_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['word'] . "</td>";
echo "<td>". "<div class='hiding' style='display:none'>".$row['meaning']."</div>"."</td>";
echo "<td>";
echo "<input name=\"fahimeh\" type=\"checkbox\" value=\"\"> ";
echo "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
<button onclick="ShowMeanings()">ShowMeanings</button>
<button onclick="feedback()">sendfeedback</button>
and it is my javascript code:
<script type="text/javascript">
function ShowMeanings(){
var hidings = document.getElementsByClassName('hiding');
for (var i=0; i<hidings.length; i++){
hidings[i].style.display = 'block';
}
}
</script>
I dont know how can I write feedback(), and how can I get checkbox value and insert it into right row in database
This should work :)
<?php
$con = mysql_connect("localhost", "root", "")
or die(mysql_error());
if (!$con) {
die('Could not connect to MySQL: ' . mysql_error());
}
mysql_select_db("project", $con)
or die(mysql_error());
$result = mysql_query("SELECT * FROM words");
echo "<table border='1'>
<tr>
<th>word</th>
<th>meaning</th>
<th>checking</th>
</tr>";
while($row = mysql_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['word'] . "</td>";
echo "<td>". "<div class='hiding' style='display:none'>".$row['meaning']."</div>"."</td>";
echo "<td>";
echo "<input name=\"fahimeh\" type=\"checkbox\" name='" . $row['id'] . "' value=\"\"> ";
echo "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
<button onclick="ShowMeanings()">ShowMeanings</button>
<button onclick="feedback()">sendfeedback</button>

Categories