Question

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:

  1. Sending it as POST, but can it be done in the same page?
  2. Use sessions
  3. 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>

Was it helpful?

Solution

You certainly do not need to use JQuery or another framework, however, it sure does make it a lot easier to do these types of things. RyanS' comment about using JQuery makes a lot of sense for this reason. You'd just be reinventing the wheel.

Basically, the process will be to make a PHP file that takes some parameters through GET or POST and then uses those parameters to display the data. Once you have that file in place, you can use Javascript to trigger an event to call that PHP script. For instance, you can say when someone selects a value from a drop down menu, then pass these parameters to the PHP script and display the output from there into a div that you have on the same page as the drop down menu.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top