Update div dynamically with database values depending on dropdown

Question

Please see website.

My database has a table with values 'name' (the event under step 2 on the left), 'price', 'date' etc and I'd like to display them dynamically in the dark box on the right depending on which event is chosen.

I'm currently displaying the event itself with the code below, but I'm unsure as to how to develop it to grab database values based on this choice. I'm guessing some sort of .get().

<script type="text/javascript">

    $(document).ready(function() {
            $('#right_inside').html('<h2>' + $('#club').val() + '</h2>');
    });

    $('#club').change(function(event) {
        $('#right_inside').html('<h2>' + $('#club').val() + '</h2>');
    });

</script>

This has had me stumped for ages, so any help would be much, much appreciated!

EDIT

Thanks for your replies. Here's what I now have, but it isn't working.

jQuery:

<script type="text/javascript">

$(document).ready(function() {
        $('#right_inside').html('<h2>' + $('#club').val() + '</h2>');
});

$('#club').change(function(event) {
    $.ajax({
        type: "post",
        url: "eventinfo.php",
        data:  $(this).serialize(),
        success: function(data) {
            $('#right_inside').html('<h2>' + $('#club').val() + '</h2>Price'+data.price);
            },
        dataType: "json"
    });

});

</script>

eventinfo.php:

    <?php
// the name of the input text box is 'club'
    $night = $_POST['club'];
    $night = mysql_real_escape_string($night);

// one of the columns values included in * is 'price'
// this line was previously: $query = mysql_query("SELECT * FROM nights WHERE name = '$night'");
    $query = "SELECT * FROM nights WHERE name = '$night'";

        $result = mysql_query($query);
        $items = array();

        if($result && mysql_num_rows($result) > 0) { 
            while ($row = mysql_fetch_array($result)) { 
                $items[] = array($row[0]);
                }         
        } 

        mysql_close(); 
        // convert into JSON format and print
        echo json_encode($items);
    ?>

You're right. Use $.ajax to get the values and then populate. — jeremyharris
– jeremyharris, Commented Jun 13, 2012 at 14:55
Also it may help to use Firebug for Firefox to see if you are getting any errors. — Travis Pessetto
– Travis Pessetto, Commented Jun 13, 2012 at 15:33
Looking at Firebug you are returning an empty array so that is why you can't get the price. — Travis Pessetto
– Travis Pessetto, Commented Jun 13, 2012 at 15:34
There is definitely a database row called price. Could it be my PHP that isn't creating the array properly? I'm quite weak with PHP arrays... — Sebastian
– Sebastian, Commented Jun 13, 2012 at 15:40

Morgan · Accepted Answer · 2012-06-13 14:55:02Z

1

The best course of action would be to use an xmlhttp object to load your PHP page that echos the data out. From that xmlhttp object you can assign the responseText (which will be the output contents of your PHP page) to a Javascript variable.

In other words, you probably want to use AJAX.

answered Jun 13, 2012 at 14:55

Morgan

9053 gold badges12 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Milimetric · Accepted Answer · 2012-06-13 15:06:51Z

This is a good place to use client side templating. Use jQuery.tmpl and make a template for the right side (example below):

<script id="infoTemplate" type="text/html">
    <div>
        <span>${price}</span>
        <span>${information}</span>
    </div>
</script>

Then, make a method in PHP that takes in something like eventId and passes back a JSON object that looks something like this: {"price":"123.34","information":"some info here"}. To load up your template, do this:

$(document).ready(function(){
    // ... other stuff

    $.template("infoTemplate", $("#infoTemplate").html());
});

Then, in your change event handler, do this:

$('#club').change(function(event) {
    $.get('/yourNewPHPMethod', $('#club').val(), function(data){
        $('#right_inside').html($.tmpl('infoTemplate', data));
    });
});

Sorry, didn't have time to test any of this but it's the main idea and should help you establish a good pattern for any of this type of work in the future. See jQuery.tmpl documentation below: http://api.jquery.com/jquery.tmpl/

Travis Pessetto · Accepted Answer · 2012-06-13 18:51:50Z

1

If I understand you right, you want an AJAX call to get the price. So something like

$('#club').change(function(event) {
     $.ajax(
     {type: "post",
     url: "/path/to/price",
     data:  $(this).serialize(),
     success: function(data)
     {
      $('#right_inside').html('<h2>' + $('#club').val() + '</h2>Price'+data.price);
     },
    dataType: "json"
});

Then since you are using PHP get the values you want and load them into an array and use json_encode.

update

For the PHP try changing

    if($result && mysql_num_rows($result) > 0) { 
        while ($row = mysql_fetch_array($result)) { 
            $items[] = array($row[0]);
            }         
    }

to

    if($result && mysql_num_rows($result) > 0) { 
        while ($row = mysql_fetch_array($result)) { 
            $items[] = array("price"=>$row['price']);
            }         
    }

update #2

Try adding the following to your PHP file, near the top:

header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');

edited Jun 13, 2012 at 18:51

answered Jun 13, 2012 at 14:57

Travis Pessetto

3,2984 gold badges29 silver badges56 bronze badges

12 Comments

Sebastian Over a year ago

Thanks for your reply. I'm afraid I'm still getting the same result!

Sebastian Over a year ago

Could it be because the array is in a while loop?

Travis Pessetto Over a year ago

@Sebastian, my bad, I messed up it should have been $row['price'] not $row['row'] assuming there is a price column in your database.

Sebastian Over a year ago

It's still returning undefined - is there a way of checking if the array is empty or not?

Travis Pessetto Over a year ago

@Sebastian yes, just render the page in your browser, not via AJAX, and change the code from json_encode to print_r($items)

|

Collectives™ on Stack Overflow

Update div dynamically with database values depending on dropdown

3 Answers 3

Comments

Comments

update

update #2

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

update

update #2

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related