I'm creating my own recipe box using php/mysql and one part I'm stuck on is actually creating the recipes, specifically selecting the ingredients.
What I wanted to do instead is have a auto-complete search box where I can type out names of the ingredients, have the results drop down right below, and click the ones I'm looking for. After clicking the ingredient, it'll be listed below the search box with an input to put quantity and an "x" to delete if needed. This of course would grow depending on how many ingredients the recipe requires. At the end, I would just take the data and do an insert into my database.
I've seen a lot of AJAX tutorials on getting the auto-complete search box functionality, but nothing tying it to the value selection. The best example of what I'm going for can be found at http://supercook.com. They have it so you can search for recipes.
Any suggestions or online resources?
Thanks!
you asked a great question. Below I've written a short example to get you started. Just save it as ingredients.php and it should work. Of course, you'll need to add your database connection and query to give it real data. I've used the jQuery library because it makes the Javascript part a lot easier.
<?php
// connect to database here
if (isset($_POST['q'])) {
if (trim($_POST['q']) === '') die('[]');
// $q = mysql_real_escape_string($_POST['q']);
// run a query like: "SELECT id, name FROM ingredients WHERE name LIKE '{$q}%'"
// and put the result in the $result array.
// This is sample data:
$result = array(
array('id' => 71, 'name' => 'apple'),
array('id' => 3, 'name' => 'anchovies'),
array('id' => 230, 'name' => 'artichoke'),
);
if (function_exists('json_encode')) die(json_encode($result));
else {
$escaped = array();
foreach ($result as $r) $escaped[] = str_replace(array('\\', '"'), array('\\\\', '\"'), $r);
die('["'.join('","', $escaped).'"]');
}
}
$data = array();
if (isset($_POST['ingredients'])) {
foreach ($_POST['ingredients'] as $i => $ingredient) {
$data[] = array(
'ingredient' => $ingredient,
'quantity' => $_POST['quantities'][$i],
);
}
// save data to the database here (or inside the foreach loop above)
}
?>
<html><head></head><body>
<style>
#wrap { position: relative }
#pop {
position: absolute;
border: 1px solid black;
background-color: white;
display: none;
}
</style>
<?php if (count($data)): ?>
<h3>Saved:</h3>
<pre><?php print_r($data) ?></pre>
<?php endif; ?>
<div id="wrap">
<input id="adder" />
<div id="pop"></div>
</div>
<form method="post">
Ingredients:<br />
<div id="recipe"></div>
<input type="submit" value="Save" />
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var last_query = '';
jQuery(function() {
jQuery('#adder').val('').keyup(function() {
var query = jQuery(this).val();
if (query != last_query) jQuery.post('ingredients.php', {q: query}, function(data) {
var p = jQuery('#pop').html('').show();
for (var i=0; i<data.length; i++) {
p.append(jQuery('<p>'+data[i].name+'</p>').bind('click', { ingredient: data[i] }, function(e) {
add_ingredient(e.data.ingredient);
jQuery('#pop').hide();
jQuery('#adder').val('');
}));
}
}, 'json');
else jQuery('#pop').show();
last_query = query;
});
});
function add_ingredient(data) {
console.log(data);
var ingredient = jQuery('<div> <input name="quantities[]" size="2" /> '+data.name
+ '<input type="hidden" name="ingredients[]" value="'+data.id+'" /></div>');
var remover = jQuery('<span>X</span>').click(function() {
jQuery(this).parent().remove();
});
jQuery('#recipe').append(ingredient.prepend(remover));
}
</script>
</body></html>
Related
I am using google charts (on a php webpage) with data from an sql DB. The problem i am having is that it is not display the field names and values properly it simply displays the value of the first field "expense". It should be showing two fields "expense" and "income" with the values in the db. Any ideas what i am doing wrong ?
my code below:
<?php
$dbhandle = new mysqli('localhost','root','','useraccounts');
echo $dbhandle->connect_error;
$query = "SELECT * FROM ctincome";
$res = $dbhandle->query($query);
?>
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['expense','income'],
<?php
while($row=$res->fetch_assoc())
{
echo "['".$row['expense']."','".$row['income']."'],";
}
?>
]);
var options = {
title: 'Expenses to Income',
pieHole: 0.4,
};
var chart = new
google.visualization.PieChart(document.getElementById
('donutchart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="donutchart" style="width: 900px; height: 500px;"></div>
</body>
</html>
the values for the income column should be numbers, not strings.
remove the single quotes from the second column.
from...
echo "['".$row['expense']."','".$row['income']."'],";
to...
echo "['".$row['expense']."',".$row['income']."],";
I have three suggestions based on my experience in crossbrowser or javascript bugs I solved.
First point : You are just echoing, you need to use concatenation.
<?php
$data = '';
while($row=$res->fetch_assoc())
{
$data .= "['".$row['expense']."','".$row['income']."'],";
}
?>
var data = google.visualization.arrayToDataTable([
['expense','income'],
<?php echo $data; ?>
]);
second point : In javascript last comma may or may not work, its best to not to append comma if it's a last row.
var data = google.visualization.arrayToDataTable([
['expense','income'],
<?php
while($row=$res->fetch_assoc())
{
if(last row )
$data .= "['".$row['expense']."','".$row['income']."']";
else $data .= "['".$row['expense']."','".$row['income']."'],";
}
?>
]);
third suggestion : check data type of var data before and after the concatenation
I have the following Google Charts code and I'm trying to connect it with MySQL, I have tried each and everything with it available on the internet but it still shows just one entry of SQL result set, although I have 10 entries in it. On the internet I found the $row_num counter thing and since including it in my code, I have been able to query one entry but I want to query all entries with it. Please help me with this and let me know what mistake (if any) I have been making, Following is my PHP code:
[<?php
``$dbhandle= new mysqli('localhost','root','8317','record');
//echo $dbhandle->connect_error();
$query= "SELECT * from download_manager";
$res= $dbhandle->query($query);
?>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':\['bar'\]});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable(\[
\['Title', 'No. of Downloads'\],
<?php
$total_rows = mysqli_num_rows($res);
$row_num = 0;
if (mysqli_num_rows($res) > 0) {
while($row=$res->fetch_assoc())
{
$row_num++;
if ($row_num == $total_rows){
echo "\['".$row\['filename'\]."',".$row\['downloads'\]."\]";
}
}
}
else
{
echo "0 results";
}
?>
\]);
var options = {
width: 800,
chart: {
'title': 'Top 10 Downloads',
subtitle: 'for the last month'
},
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
}
};
var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
See Also : Downloads in the Last 7 Years <br> <br>
<div id="dual_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>][1]
You have missed adding a comma , in your PHP data loop. Try with the following:
echo "\['".$row\['filename'\]."',".$row\['downloads'\]."\],";
I have a Select box and a text box to search through the list in the select box. The Select box is getting populated from a database with PHP. What I am trying to achieve here is as soon as clear the text field; the select box should refresh. I have to reload the whole page to do that. Here is the little script that I using to search through select box.
function filterSelectBox(filterButton) {
var searchValue = document.getElementById('selectFilter').value.toLowerCase();
var selectField = document.getElementById("domainID");
var optionsLength = selectField.options.length;
for(var i = 0; i < optionsLength; i++) {
if(selectField.options[i].innerHTML.toLowerCase().indexOf(searchValue) >= 0) {
selectField.options[i].style.display = 'block';
} else {
selectField.options[i].style.display = 'none';
}
}
}
Here is HTML Elements associated with the code.
<div class="search_domains" id="search_domains">
<input type="text" id="selectFilter" name="selectFilter" />
<input type="button" id="filterButton" value="Filter" onClick="filterSelectBox(this)"/>
</div>
and this is how I am populating the Select box,
<select name="domainID" id="domainID" size="15" style="width:175">
<option>Select a Domain</option>
<? foreach ($domains as $row) {
?>
<option value="<?=$row -> id ?>"><?=$row -> domain ?></option>
<? } ?>
</select>
Put this code:
document.getElementById('selectFilter').onkeyup = function() {
if(this.value.length == 0) {
var selectField = document.getElementById("domainID");
var optionsLength = selectField.options.length;
for(var i = 0; i < optionsLength; i++) {
selectField.options[i].style.display = 'block';
}
}
};
just before the </body> tag in your page, and it will show all of the options when you clear the textbox value.
What I'd do here is populate the list with AJAX from that same PHP file, but have it output JSON. On loading the page, the AJAX request would load the php file, get the JSON and add the items in the list.
For refreshing when the text field is blank, you could use an onChange or onKeyUp and check the length of the value.
I think all this would be much simpler in jQuery or any JS framework than pure JS :)
These will help:
http://css-tricks.com/dynamic-dropdowns/
Using jQuery, JSON and AJAX to populate a drop down
Populate dropdown using json
Populate Dropdown Menu in PHP from JSON
You could definitely use AJAX, but for this example, it may not be necessary. It might be more efficient to just store the original contents in a Javascript array and reset it when you need to. I would actually remove the options instead of hiding them:
<script type="text/Javascript">
var originalOptions = {<?php $echo = array(); foreach ($domains as $row) $echo[] = "\"{$row->id}\":\"{$row->domain}\""; echo implode(", ", $echo); ?>};
function filterSelectBox(text)
{
var selectField = document.getElementById('domainID');
selectField.options.length = 0;
for (var key in originalOptions)
{
if (originalOptions[key].substr(0, text.length) == text)
{
var option = document.createElement("option");
option.value = key;
option.text = originalOptions[key];
selectField.add(option, null);
}
}
}
</script>
<select name="domainID" id="domainID" size="15" style="width:175">
<?php foreach ($domains as $row) {
echo "\t<option value=\"{$row->id}\">{$row->domain}</option>\n";
} ?>
</select>
<input type="text" onkeyup="filterSelectBox(this.value)" />
I think this is a case of me not knowing javascript, but I can't for the love of god get this to work
For some reason, creating vars cancels out my java alert code. (maybe bc its wrong)
And my java vars aren't being set correctly.
I pointed out the problems in my comments
In my SQL, I have Temperatures all with an associative value disk 'id'.
So my data structure in this is:
$array[id];
$array[id]=array();
//For every new element
//Using while ($row = mysql_fetch_assoc($result))
$array[id][]="temperature";
//second id
$array[id2];
$array[id2]=array();
//For every new element
$array[id2][]="temperature";
$array[id2][]="temperature2";
$array[id2][]="temperature3";
$array[id2][]="temperature4";
MY ATTEMPT (WRONG CODE):
//I simplified this code down. In my own version, the join works ONLY when I use an actual index "174" instead of a javascript variable that is 174. Couldnt get join to be alerted in this simplified version
<?php
$phparray=array();
$phparray["100"]="First Element";
$phparray["101"]="Second Element";
$phparray["102"]="Third Element";
$phparray["100"]=array();
$phparray["101"]=array();
$phparray["100"][]="First Element - Sub 2";
$phparray["100"][]="First Element - Sub 3";
$phparray["101"][]="Second Element - Sub 2";
echo $phparray["100"]; //Does not show 'First Element'. Shows Array
echo $phparray["100"][0]; //Correctly shows sub element
//var_dump($phparray);
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Associative Array in PHP used in Java Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
var index=100;
//var index2=<?php echo $phparray[index]; ?>; //Supposed to output 'First Element'
var joined=[<?php echo join($phparray[index], ', '); ?>]; //Supposed to join elements of '100'
alert("hello"); //This line does not work anymore after the var index2 made above
</script>
</head>
<body>
<div id="container" style="height: 500px; min-width: 600px"></div>
</body>
</html>
EDIT: Here is the long full code of my php page:
<?php
include_once("../../config.php");
$conn=mysql_connect($dbhost,$dbuser,$dbpasswd) or die ('Error connecting to mysql');
mysql_select_db($dbname);
ini_set('error_reporting', E_ALL);
//ini_set('display_errors',1);
ini_set('log_errors',1);
$sql = "select disk_id from disk";
$result = mysql_query($sql);
$ids = array();
$names=array();
$temperatures = array();
while ($row = mysql_fetch_assoc($result)) {
$ids[] = $row['disk_id'];
$temperatures[]=$row['disk_id'];
//echo "<br>".$row['disk_id'];
}
//
foreach ($ids as $value)
{
//echo "--START ".$value."--<br>";
$sql = "select * from disk_data WHERE disk_id=".$value;
$result = mysql_query($sql);
$dates=array();
$key = array_search($value, $temperatures);
$temperatures[$value] = array();
//var_dump($temperatures);
while ($row = mysql_fetch_assoc($result))
{
$temps = $row['Temperature'];
$temp = explode("||", $temps);
$prehex=$temp[3];
$posthex=hexdec(substr($prehex,-2));
$predate=$row['create_date'];
$postdate =strtotime($predate)*1000;
$output="[".$postdate.", ".$posthex."]";
//$temperatures[$key][] = $output;
$temperatures[$value][] = $output;
$dates[]=$row['create_date'];
//echo $row['create_date']." ".end($temperatures[$key])."<br>";
}
}
print_r(array_keys($array));
var_dump($temperatures);
foreach ($ids as $value)
{
//echo $value;
$key = array_search($value, $temperatures);
//echo "Key: $key; Value: $temperatures[$value]<br />\n";
$comma = join($temperatures[$value],", ");
echo $comma;
echo "\n";
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
//names=[<?php echo join($ids, ', '); ?>],
names=["174"], //Above code works. BUT only using ID 174 to test
values=[<?php echo join($temperatures["174"], ', '); ?>], //Supposed to be ALL data. But temp 174
colors = Highcharts.getOptions().colors;
//alert(values);
$.each(names, function(i, name2) {
//alert(seriesOptions.length);
alert(name2.toString()); //Works....
var values=[<?php
echo join($temperatures[name2], ', '); ?>]; //Doesnt work
//alert(values);
console.log(values);
//document.write(values);
seriesOptions[i] =
{
name: name2,
data:values
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter++;
if (seriesCounter == names.length)
{
createChart();
}
});
// create the chart when all data is loaded
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 0
},
title: {
text: 'Test Performance Data',
style: {
margin: '10px 100px 0 0' // center it
}
},
yAxis: {
title: {text:'Temperature (°C)'},
labels: {
formatter: function() {
return this.value + '';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
line: {
gapSize: 0
},
series: {
//compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
yDecimals: 2
},
series: seriesOptions
});
}
});
</script>
</head>
<body>
<script type="text/javascript" src="../js/highstock.js"></script>
<script type="text/javascript" src="../js/themes/gray.js"></script>
<div id="container" style="height: 500px; min-width: 600px"></div>
</body>
</html>
You cannot mix PHP and JavaScript like that. JavaScript variables are not parsed in PHP.
Even when index is replaced by a variable $index or 100, your code would still miss quotes.
Use the following instead:
<script type="text/javascript">
var index=100;
var array = <?php echo json_encode($phparray); ?>;
var joined = array[index];
The last line outputs the following:
var joined={"100":["First Element - Sub 2","First Element - Sub 3"],"101":["Second Element - Sub 2"],"102":"Third Element"};
Before trying this, make sure that you remove the invalid comment in the line after var index = 100;. Otherwise, a PHP warning can be generated, which invalidates the code:
var index=100;
//var index2=PHP Notice: Use of undefined constant index - assumed 'index' in /tmp/t.php on line 29
PHP Notice: Undefined index: index in /tmp/t.php on line 29
Look at the generated code in the client browser, you'll find that it looks like this:
var joined = [First Element - Sub2, Second Element etc.....]
note the lack of quotes around your inserted strings. You've created Javascript syntax errors, which kills the entire <script> block those variables are embedded within.
As Rob W mentions above, you have to use json_encode() to produce VALID javascript out of your arbitrary text.
As a general rule, if you've got PHP generating anything javascript, and especially when filling in variables like that, use json_encode() - it'll keep these kinds of headaches away.
PHP runs server side and will output its content in to the webpage, before its then rendered in your browser and the JavaScript is run. (meaning when php is running, it has no idea what "index" is because as far as its concerned its never been defined.
I expect what you want to do is move your PHP in to javascript so you can then access it however you like in the page. In your JavaScript just add somthing along the lines of this:
var my_array_in_js = <?php echo json_encode($phparray); ?>;
Which will result in PHP printing its array as json, which can then be read by javascript however you want. Then to read a specific index just use
alert(my_array_in_js[index]);
im new in jquery and get stacked in a issue and need help.
i have a sql query that retrieve ids and put them in array . i have a loop that create a div for each id in that array all in php. works fine.
on the other hand i have a javascript function doing the same with the same array and creating divs inside the div created with the above function all in jquery.
the first one show the picture of a users with the id.
the javascript one shows the name of users with the id.
the problem is jquery function only createme the div with all names within the first div created in the php loop.
i want both being created at the same time. i tried all i know and couldnt getit.
please help.
here is the code :
$receivers is the array containing the ids.
$totalreceivers is the count of the ids.
function showfbnames() {
var receivers = <? echo $receivers; ?>;
var count = <? echo $totalreceivers; ?>;
for (var i = 0; i < count; i++) {
var temparray = ["<?php echo join("\", \"", $receivers); ?>"];
FB.api(
{
method: 'fql.query',
query: 'SELECT name FROM user WHERE uid='+temparray[i]
},
function(resp) {
$.each(resp, function(k,v) {
$("#divfather").append("<div class='tit' id ='fbname'>"+(v.name)+"</div>");
//$("#fbname").html(v.name);
})
}
);
}
}
the php loop creating divs :
<?for ($i = 0; $i < $totalreceivers; $i++) {?>
<script>showfbnames()</script>
<tr><td>
<div style="width:100%; height:150px;overflow:auto;border-top:1px solid #c89cc1;border-bottom:1px solid #c89cc1;" id="divfather">
<? echo "<img src='https://graph.facebook.com/$receivers[$i]/picture' width='40' style='float:left'/>";?>
</div>
</td>
</tr>
<? } ?>
Your loop creates multiple divs with the id of "divfather".
That will not produce the results you desire. You need to have each div with a different id.
id="divfather<?echo $i;?>"
Also, pass the id to the "showfbnames" function:
<script>showfbnames(<?echo $i;?>)</script>
So that you can use it in your jquery code:
function showfbnames(passedi) {
and then $("#divfather"+passedi).append(
(Note: I recommend you move the <script> to appear AFTER the div, to be safe. You don't have to, but it's too risky.)
I retract my previous answer; please select this one as the Accepted solution.
I believe this is what you're trying to accomplish:
<? for ($i = 0; $i < $totalreceivers; $i++) { ?>
<tr><td>
<div style="width:100%; height:150px;overflow:auto;border-top:1px solid #c89cc1;border-bottom:1px solid #c89cc1;" id="divfather<? echo $i; ?>">
<? echo "<img src='https://graph.facebook.com/$receivers[$i]/picture' width='40' style='float:left'/>"; ?>
</div>
</td></tr>
<? } ?>
<script type="text/javascript">
var count = <? echo $totalreceivers; ?>;
var temparray = ["<?php echo join("\", \"", $receivers); ?>"];
for (var i = 0; i < count; i++) {
FB.api(
{
method: 'fql.query',
query: 'SELECT name FROM user WHERE uid='+temparray[i]
},
function(resp) {
$.each(resp, function(k,v) {
$("#divfather"+i).append("<div class='tit' id ='fbname"+i+"'>"+(v.name)+"</div>");
//$("#fbname").html(v.name);
})
}
);
}
</script>