How to display the number of icons/images based on number of rows in result?
Question
I'm new to web-page designing. Learning PHP & HTML together. I'm trying to display the number of icons dynamically based on SQL result. I've a PHP code to query to DB and fetch the result. I've HTML code, which just displays the as many numbers i indicate (Static). I think I'm almost nearer to achieve it, but finding it difficult to integrate. Should i need to use AJAX for this ? How can i do it ?
index.php
<?php
$dbuser="root";
$dbname="test";
$dbpass="root";
$dbserver="localhost";
// Make a MySQL Connection
$con = mysql_connect($dbserver, $dbuser, $dbpass) or die(mysql_error());
mysql_select_db($dbname) or die(mysql_error());
// Create a Query
$sql_query = "SELECT ID, UserName, Status FROM table";
// Execute query
$result = mysql_query($sql_query) or die(mysql_error());
$jsonArray = array();
while ($row = mysql_fetch_array($result)){
$jsonArrayItem = array();
$jsonArrayItem["ID"] = $row["ID"];
$jsonArrayItem["UserName"] = $row["UserName"];
$jsonArrayItem["Status"] = $row["Status"];
array_push($jsonArray, $jsonArrayItem);
//echo '<option value='. $row['id'] . '>'. $row['login'] . '</option>';
}
mysql_close($con);
$tableData = array(
"data" => $jsonArray
);
header('Content-Type: application/json');
echo json_encode($tableData,JSON_UNESCAPED_SLASHES);
die();
?>
test.html
<html>
<head>
<title>EXAMPLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript">
// AJAX uery.Call PHP and retrieve the result .Based on the number of rows, display the below elements
</script>
<div id="container">
<a href="#">
<figure>
<button title="User1" class=" fa fa-user" style="font-size:100px;color:**green**"></button>
<figcaption>User1</figcaption>
</figure>
</a>
<a href="#">
<figure>
<button title="User2" class="fa fa-user" style="font-size:100px;color:**red**"></button>
<figcaption>User2</figcaption>
</figure>
</a>
</div>
</body>
</html>
<style>
#container {
text-align: center;
}
a, figure {
display: inline-block;
}
figcaption {
margin: 10px 0 0 0;
font-variant: small-caps;
font-family: Arial;
font-weight: bold;
color: #bb3333;
}
figure {
padding: 5px;
}
img:hover {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
img {
transition: transform 0.2s;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
}
</style>
If the Status is YES, icon should be in green colour. If NO, red colour. Could you please help me to integrate and achieve this.
1 answers
solution1
1 ACCPTED 2016-09-10 10:05:45
You probably won't even need AJAX here. You can just get the result of the DB query and iterate over the array in index.php by foreach loop.
The point of using AJAX is to have let say a form in index.html and feed the DB with new entries and get the new info in index.html without reloading the page, which I don't see in your case. Or feed index.html with new data without reloading the page on some time intervals. If this is the case you can use jQuery.ajax() method. This method can be called by some event - button click or time interval. You can make a call like this:
$.get("index.php", function(result){
var resultArray = jQuery.parseJSON(result);
});
Then you should use resultArray to iterate over and produce each individual user in .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.