I got a bit stuck and would appreciate any help.
Intro
In short (I hope): I am creating a website (only local at the moment) which has stored city names and some important/interesting values (for example population, time, currency). I use a MySQL database to store the data. Three of these tables relevant to this case: Table 1. stores cities as values. table 2. stores the "title" of the relevant data (population, current time, currency). The third table the actual value (100 000, 12:30, Euro). I am using php to communicate between the database and the html.
Desired outcome:
A search box is used to find a city of interest. The web page prints the selected city in the top of the page and some relevant data of the city inside two divs.
Problem
How can I get the value of autocomplete back to php in order to make three different SQL queries on the same page depending on the selection?
I read that you could use a php -file as the source of the autocomplete (now on an array, values stored from the database) and somehow autocomplete could retrieve other data based on the users' selection. But will it work if I am not using any other jquery-ui component? How would it actually be written in code?
EDIT
I read shortly about:
- Sending it as POST, but can it be done in the same page?
- Use sessions
- Use AJAX
What is the easiest/best to understand/use?
Any other suggestions?/help?/tips?
At this point my stack has overflown.
Summary
What is a easy to learn and correct way to handle communication from javascript/jQuery back to PHP while staying on the same page?
Code
<?php
require_once "dataPDO.php"; //All of the sql-queries
$databaseHandler = new dataPDO();
$list=$databaseHandler->allCities(); //a list of all the cities
?>
<!doctype html>
<html>
<head>
<title>Choose a city</title>
<meta charset="utf-8">
<!-- needed by autocomplete -->
<link rel="stylesheet" href="js/jquery.ui.all.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.position.js"></script>
<script src="js/jquery.ui.menu.js"></script>
<script src="js/jquery.ui.autocomplete.js"></script>
<script>
$(function() {
var names=<?php echo json_encode($list); ?>;
$("#cities").autocomplete({
source: names, minLength: 2
});
});
$(document).ready(function () {
$('#cities').on('autocompletechange change', function () {
var data = $('#city').html('Chosen city: ' + this.value);
}).change();
});
</script>
</head>
<body>
<div>
<div class="ui-widget">
<label for="cities">Search for a city:</label>
<input id="cities">
<div id="city"></div>
</div>
</div>
<div>
<section class="left">
<?php
try {
$databaseHandler->information(1);//(hardcoded) information belonging to the first city
}
catch(PDOException $e)
{
echo $e->getMessage();
}
?>
</section>
<section class="right">
<?php
try {
$databaseHandler->values(1);//(hardcoded) information values belonging to the first city
}
catch(PDOException $e)
{
echo $e->getMessage();
}
?>
</section>
</div>
</body>