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;
}