Jeg kunne ikke rigtig få outputtet til at blive rigtigt hvis jeg ikke havde html i den retunerede data fil.
jeg har prøvet at lave den så den kun retunere de rå data, i json format
din vertion der retunere HTML retunere ca 1300 byte
din vertion kunne godt optimeres lidt så den ikke retunerede doMath() og derved spare ca 600 tegn
min vertion der retunere JSON retunere ca 50 byte
min vertion retunerer kun den row i databasen der passer med det id du har sendt over.
database
--
-- Database: `test`
--
-- --------------------------------------------------------
--
-- Struktur-dump for tabellen `tbl_food`
--
CREATE TABLE IF NOT EXISTS `tbl_food` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) COLLATE utf8_danish_ci NOT NULL,
`enhed` int(11) NOT NULL,
`protein` float NOT NULL,
`carb` float NOT NULL,
`fat` float NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_danish_ci AUTO_INCREMENT=10 ;
--
-- Data dump for tabellen `tbl_food`
--
INSERT INTO `tbl_food` (`id`, `name`, `enhed`, `protein`, `carb`, `fat`) VALUES
(8, 'Abrikos,rå', 100, 0.8, 9.4, 0.3),
(9, 'Abrikos, tørret', 100, 2.9, 66.5, 1.7);
model.php
<?php
// semi model component
function MySqlIConnOOP($db = "") {
$db = ($db == "") ? "test" : $db;
$conn = new mysqli('localhost', 'root', '', $db);
if (!$conn) {
echo 'Der opstod en fejl.';
exit();
}
$conn->set_charset("utf8");
return $conn;
}
function food_Read($conn, $id) {
$sql = "SELECT * FROM tbl_food WHERE id =" . $id;
$rs = $conn->query($sql);
$ar = $rs->fetch_object();
return $ar;
}
function food_ReadAll($conn) {
$sql = "SELECT * FROM tbl_food ORDER BY name";
$rs = $conn->query($sql);
$ar = array();
while ($row = $rs->fetch_object()) {
$ar[] = $row;
}
return $ar;
}
$conn=MySqlIConnOOP(); // kunne også godt have skrevet $conn=MySqlIConnOOP("test");
?>
diet_content.php
<?php
require_once 'model.php';
$id = $_GET['name'];
$obj = food_Read($conn, $id);
echo json_encode($obj);
?>
diet_planner.php
<?php
require_once 'model.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
function doMath() {
var units = parseInt(document.getElementById('unit').value);
if (units > 0) {
var protein = parseFloat(document.getElementById('protein').value);
var carb = parseFloat(document.getElementById('carb').value);
var fat = parseFloat(document.getElementById('fat').value);
var calc_pro = (units * protein) / 100;
var calc_carb = (units * carb) / 100;
var calc_fat = (units * fat) / 100;
document.getElementById('protein').value = calc_pro;
document.getElementById('carb').value = calc_carb;
document.getElementById('fat').value = calc_fat;
}
else {
alert("Enhed skal være tal størrer end 0");
}
}
$(document).ready(function () {
$("#the-name").change(function () {
var theName = $("#the-name").val();
if (theName > 0) {
$.ajax({
type: "GET",
url: "diet_content.php",
data: "name=" + theName,
success: function (data) {
var json_array = jQuery.parseJSON(data);
$("#food").html(json_array.name);
$("#unit").val(json_array.enhed);
$("#protein").val(json_array.protein);
$("#carb").val(json_array.carb);
$("#fat").val(json_array.fat);
}
});
}
else{
$("#food").html("");
$("#unit").val(0);
$("#protein").val(0);
$("#carb").val(0);
$("#fat").val(0);
}
});
});
</script>
<style type="text/css">
.select112{
background-color: #F93;
text-align: center;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
width: 120px;
}
table {
border: 1px solid black;
}
table, th, td {
border: 1px solid black;
}
#table_wrapper{
width: 600px;
}
</style>
</head>
<body>
<table id="table_wrapper" >
<tr>
<td>
<select class="select112" id="the-name">
<option value="0">Vælg en madvare</option>
<?php
$liste = food_ReadAll($conn);
$str = "";
for ($i = 0, $lng = count($liste); $i < $lng; $i++) {
$str .= '<option value="' . $liste[$i]->id . '">' . $liste[$i]->name . '</option>';
}
echo $str;
?>
</select>
</td>
<td>
<div id="content">
<table >
<tbody><tr>
<th>Food</th>
<th>Enhed</th>
<th>Protein</th>
<th>Carb</th>
<th>Fat</th>
</tr>
<tr>
<td id="food"></td>
<td><input type="text" onblur="doMath();" id="unit" value=""></td>
<td><input type="text" readonly id="protein" value=""></td>
<td><input type="text" readonly id="carb" value=""></td>
<td><input type="text" readonly id="fat" value=""></td>
</tr>
</tbody></table>
</div>
</td>
</tr>
</table>
</body>
</html>