Jquery Modal Form Input error - forms

Question

Summary: When a dialog window is opened, the dialog contains a form, yet the INPUT fields do not allow text entry. FireBug Console reports the following error when I press a key and the cursor is in the text field:
The 'charCode' property of a keydown event should not be used. The value is meaningless.
/lemonade_stand/start.php Line 0
I also see this error when the window opens:
Unknown pseudo-class or pseudo-element 'tabbable'.
/lemonade_stand/start.php Line 0
It seems that some over event is listening for a keypress. I found an article that suggested that I "remove the ui-dialog class from the div", yet even trying that didn't help.
Code samples:
Definition of Dialog Box
var $priceWindow = $("#setPriceWindow").dialog({
autoOpen: false,
height: 306,
modal: true,
width: 380,
buttons: {
"Save": function(){
$.get('php/saveQA.php',
{
'cup': $("#pCup").val(),
'lemons': $("#pLemons").val(),
'sugar': $("#pSugar").val(),
'ice': $("#pIce").val(),
});
$(this).dialog('close');
},
Cancel: function(){
$(this).dialog('close');
}
}
});
Event to open Dialog box
$("#setPrice").click(function(e){
e.preventDefault();
$priceWindow.dialog('open');
});
PHP/HTML content of dialog
<div id="setPriceWindow" class="priceWin" title="Set Price and Quality">
<form>
<ul>
<li><label>Price Per Cup</label><span><span><input type="text" size="3" id="pCup" tabid="1" value="<?php echo $_SESSION['qa']['cup']; ?>" /><p>Cents</p></span></span></li>
<li><label>Lemons Per Pitcher</label><span><span><input type="text" size="3" id="pLemons" tabid="2" value="<?php echo $_SESSION['qa']['lemons']; ?>" /><p>Lemons</p></span></span></li>
<li><label>Sugar Per Pitcher</label><span><span><input type="text" size="3" id="pSugar" tabid="3" value="<?php echo $_SESSION['qa']['sugar']; ?>" /><p>Cups</p></span></span></li>
<li><label>Ice Per Cup</label><span><span><input type="text" size="3" id="pIce" tabid="4" value="<?php echo $_SESSION['qa']['ice']; ?>" /><p>Cubes</p></span></span></li>
</ul>
</form>
</div>
Full project can be seen here: http://yrmailfrom.me/games/lemonade_stand/start.php

Answer 1

The problem is in your game.js script.
In
$("#setPrice").click(function(e){
e.preventDefault(); **// THIS LINE IS CAUSING THE TROUBLE**
$priceWindow.dialog('open');
});
Also in lemonade_game.css try removing the zIndex from this block
div#setPriceWindow ul li span {
background: none repeat scroll 0 0 #F9F9F9;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #BBBBBB;
margin: 0;
padding: 3px 0;
}