jQuery In Action Chapter 8 - use a php data file for ajax call.

[Dennis Spring]

jQuery In Action:
Re: Chapter 8
I could not get the POST var syntax to work for the script calling the data file with the .load() method.

You can use a php page for the data file, in place of the getDetails.jsp.
The code for my version of getDetails.php is :

[color=darkred]<?php
/**
@author: E. Dennis Spring, 2010-04-14, Charlotte, NC
*/

$style = $_GET['style'];
$item = array();

if($style == '7141832'){
	$item["name"] =	"Chippewa 17-inch Engineer Boot";
	$item["sku"] =	"7141832";
	$item["height"] = "17 inches";
	$item["lining"] = "Leather";
	$item["colors"] = "Black <abbr>Oil-tanned</abbr>, Black Polishable";
	$item["price"] = "$187.00";
	$item["features"]= "<abbr>Oil-tanned</abbr> or polishable <abbr>full-grain</abbr> leather uppers. 
	<abbr>Vibram</abbr> sole.<abbr>Goodyear welt</abbr>. Padded insole. Steel safety toe.";	
}
elseif($style == '7141833'){
	$item["name"] =	"Chippewa 11-inch Engineer Boot";
    $item["sku"] =	"7141833";
   $item["height"] = "11 inches";
   $item["lining"] = "None";
   $item["colors"] = "Black, Crazy Horse";
   $item["price"] =  "$167.00";
   $item["features"]= "<abbr>Oil-tanned</abbr> <abbr>full-grain</abbr> leather uppers.
	<abbr>Vibram</abbr> sole. <abbr>Goodyear welt</abbr>. Padded insole. Steel safety toe. Texon® insole.";
}
elseif($style == '7173656'){
	$item["name"] =	"Chippewa 11-inch Engineer Boot";
    $item["sku"] =	"7173656";
   $item["height"] = "11 inches";
   $item["lining"] = "None";
   $item["colors"] = "Black, Crazy Horse";
   $item["price"] =  "$167.00";
   $item["features"]= "<abbr>Oil-tanned</abbr> <abbr>full-grain</abbr> leather uppers.
	<abbr>Vibram</abbr> sole. <abbr>Goodyear welt</abbr>. Padded insole. Steel safety toe. Texon® insole.";
}
elseif($style == '7141922'){
 $item["name"] = "Chippewa Harness Boot";
 $item["sku"] =	"7141922";
 $item["height"] = "13 inches";
 $item["lining"] = "Leather";
 $item["colors"] = "Black, Crazy Horse";
 $item["price"] = "$187.00";
 $item["features"]= "<abbr>Full-grain</abbr> leather uppers. Leather lining.
	<abbr>Vibram</abbr> sole. <abbr>Goodyear welt</abbr>.";
}
elseif($style == '7177382'){
 $item["name"] = "Caterpillar Tradesman Work Boot";
 $item["sku"] =	"7177382";
 $item["height"] = "6 inches";
 $item["lining"] = "Leather";
 $item["colors"] = "Honey, Peanut";
 $item["price"] = "$87.00";
 $item["features"]= "<abbr>Full-grain</abbr> <abbr>oil-tanned</abbr> leather. Nylon mesh lining. 
 Ortholite sock liner. EVA midsole. T84V Rubberlon outsole.";
}
elseif($style == '7141730'){
 $item["name"] = "Danner Foreman Pro Work Boot";
 $item["sku"] =	"7141730";
 $item["height"] = "10 inches";
 $item["lining"] = "Leather";
 $item["colors"] = "Honey, Brown";
 $item["price"] = "$287.00";
 $item["features"]= "<abbr>Full-grain</abbr> <abbr>oil-tanned</abbr> leather. Nylon mesh lining. 
 Ortholite sock liner. EVA midsole. T84V Rubberlon outsole.";
}
elseif($style == '7141833'){
 $item["name"] = "Chippewa 17-inch Snakeproof Boot";
 $item["sku"] =	"7141833";
 $item["height"] = "17 inches";
 $item["lining"] = "Leather";
 $item["colors"] = "Russet";
 $item["price"] = "$147.00";
 $item["features"]= "<abbr>Full-grain</abbr> leather foot. 1000 Denier <abbr>Cordura</abbr> Viper cloth shaft. <abbr>Goodyear welt</abbr>.
	Leather Lining. Body Cushion Insole. <abbr>Vibram</abbr> Robinson Outsole.";
}
elseif($style == '7257914'){
 $item["name"] = "Danner Grouse GTX Boot";
 $item["sku"] =	"7257914";
 $item["height"] = "8 inches";
 $item["lining"] = "<abbr>Gore-Tex</abbr>";
 $item["colors"] = "Brown";
 $item["price"] = "$207.00";
 $item["features"]= "<abbr>Full-grain</abbr> leather foot. 1000 Denier <abbr>Cordura</abbr> 
 Viper cloth shaft. <abbr>Gore-Tex</abbr> lining. Stich-down construction.";
}
elseif($style == '7269643'){
 $item["name"] = "Caterpillar Logger Boot";
 $item["sku"] =	"7269643";
 $item["height"] = "8 inches";
 $item["lining"] = "<abbr>Gore-Tex</abbr>";
 $item["colors"] = "<abbr>Cambrelle</abbr>";
 $item["price"] = "$157.00";
 $item["features"]= "<abbr>Full-grain</abbr> leather. <abbr>Cambrelle</abbr>® lining. 
	Steel safety toe. Electrical hazard protection. Poliyou® cushion insole. Rubber lug outsole.";
}
else
{
	$item["name"] = "- - -";
	$item["sku"] =	"- - -";
	$item["height"] = "- - -";
	$item["lining"] = "- - -";
	$item["colors"] = "- - -";
	$item["price"] = "- - -";
	$item["features"]= "- - -";
}
$returnString = "
<div>
<label>Item name:</label> ". $item['name']."
</div>
<div>
  <label>SKU:</label> ". $item['sku']."
</div>
<div>
  <label>Height:</label> ". $item['height']."  
</div>
<div>
  <label>Colors:</label> ". $item['colors']."
</div>
<div>
  <label>Lining:</label> ". $item['lining']." 
</div>
<div>
  <label>Today's price:</label> ". $item['price']."
</div>
<div>
  <label>Features:</label> ". $item['features']."
</div>
<div align='center'>";

if($item[sku] != '---'){
    $returnString .= "<img id='itemPhoto' src='photos/".$item[sku].".png'/>";
}

$returnString .= "</div>";

echo $returnString;
?>[/color]

******************************************************
remember to use echo - not return!
******************************************************

The calling page, boot.closet.1.html, needs a mod in the javascript:

This call, using GET var syntax in the 7th line works:

    <script type="text/javascript">
      $(function(){
        $('#styleDropdown')
          .change(function(){
            var styleValue = $(this).val();
			  $('#detailsDisplay').load(
               'getDetails.php?style='+styleValue);
          })
          .change();
      });
    </script>

- - - - - - - - - - - - - - - - - - - - - - - - - - -

This call, using POST var syntax, does NOT work.
(Maybe someone can enlighten me.)

    <script type="text/javascript">
      $(function(){
        $('#styleDropdown')
          .change(function(){
            var styleValue = $(this).val();
			var postVarStr = 'style='+styleValue;
            $('#detailsDisplay').load(
               'getDetails.php', postVarStr);
          })
          .change();
      });

The web page for the .load() method at jQuery.com has a glitch. I need another good lead on where I have gone wrong with the POST var syntax. Anyone have an idea?