> $("select").change(function () {
> var theValue = this.value;
> //alert(theValue);
> $.post("select.php", { color: theValue },function(){alert
> (theValue);});
>
> });
There isn't any code here to change the div The PHP block you have at
the top suggests some confusion about how this should work. That block
will only be processed by PHP the first time the page is loaded. The
$.post method makes an asynchronous request to the server. As such,
your page is not evaluated by PHP as in the 1st request. In fact, this
should be a completely separate script. Take all the PHP code out of
there and rename the page to index.html (it can be a PHP page but
that's unimportant just now).
Change this:
<div>
<?php echo $color; ?>
</div>
to this:
<div id="my_color_div">
black
</div>
Create a PHP script named 'select.php':
<?php
if (isset($_POST['color'])) {
echo $_POST['color'];
} else {
echo 'something went wrong';
}
?>
Now change your JS:
$(document).ready(function()
{
$("select").change(function()
{
var theValue = this.val();
$.ajax({
type: 'POST',
url: '/select.php',
data: 'color=' + theValue
success: function(ret)
{
$('#my_color_div').html(ret);
}
});
});
});
I prefer using the ajax() function myself. You should be able to
figure out from that what the options are for. The important thing is
the success handler. It takes a param which is the result returned
from the server. The body of that function simply updates your div
with that content.
In practice, I imagine you'd probably want to do something like update
the CSS by returning the hex code for a color, eg. '#990000'.
$('#my_color_div').css('background-color', ret);
On Sun, May 3, 2009 at 7:34 PM, erikober <upperho...@gmail.com> wrote:
>
> Hello.
> Jquery noob, but lovin it.
> Can't get a rudimentary post to work, but probably missing something
> very simple.
> Alerts are working, but div content is never updated.
> Following in file called "select.php":
> --------------------------------------------------------------
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
> www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <?php
> if(isset($_POST['color'])) {
> $color = $_POST['color'];
> } else {
> $color = 'black';
> }
> ?>
> <script src="http://code.jquery.com/jquery-latest.js";></script>
>
> <script>
> $(document).ready(function(){
>
> $("select").change(function () {
> var theValue = this.value;
> //alert(theValue);
> $.post("select.php", { color: theValue },function(){alert
> (theValue);});
>
> });
>
> });
> </script>
> <style>
> div { color:red; }
> </style>
> </head>
> <body>
> <select name="select" id="select">
> <option value=""></option>
> <option value="red">red</option>
> <option value="green">green</option>
> <option value="blue">blue</option>
> </select>
> <br><br>
> <div>
> <?php echo $color; ?>
> </div>
> </body>
> </html>
> --------------------------------------------------------------
>
> Thanks for your time...
>
