jQuery Grid Plugin - jqGrid

I have a grid which launches a custom add dialog.  On the add dialog I have another grid.  When I click on that add dialog (just the default one), only my first select box is available for input/selection.  I have two additional text fields which I cannot input anything into or even get focus to even though I am setting editable to true

<%@ taglib uri="/struts-tags" prefix="s"%>

<table id="main"></table>

<div id="pager"></div>

<script language = "JavaScript"

type = "text/JavaScript" >

function initPage() {

$('#formBlock').dialog({

autoOpen: false,

modal: true,

title: 'Add Booking'

});

var colnames = new Array('<s:text name="id"/>', '<s:text name="booking"/>', '<s:text name="ssl"/>', '<s:text name="bookingType"/>', '<s:text name="equipmentType"/>', '<s:text name="vessel"/>', '<s:text name="voyage"/>', '<s:text name="portLoading"/>', '<s:text name="authorizations"/>', '<s:text name="hazards"/>', '<s:text name="specials"/>', '<s:text name="createdDate"/>', '<s:text name="modifiedDate"/>');

jQuery('#main').jqGrid({

sortable: true,

width: 1200,

height: 425,

url: 'BookAction_data',

datatype: 'json',

colNames: colnames,

//['Id','Booking','SSL','Booking Type','Equipment Type','Vessel','Voyage','Port','Authorizations','Hazards','Specials','Created Date','Modified Date'],

colModel: [{

name: 'bookingId',

index: 'bookingId',

width: 100,

editable: false,

editoptions: {

readonly: true,

size: 10

}

},

{

name: 'booking',

index: 'booking',

width: 100,

editable: true,

editoptions: {

size: 20

}

},

{

name: 'ssl',

index: 'ssl',

width: 100,

editable: true,

editoptions: {

size: 30

}

},

{

name: 'bookingtype',

index: 'bookingtype',

width: 100,

editable: true,

editoptions: {

size: 10

}

},

{

name: 'equipmenttype',

index: 'equipmenttype',

width: 100,

editable: true,

editoptions: {

size: 10

}

},

{

name: 'vessel',

index: 'vessel',

width: 100,

editable: true,

editoptions: {

size: 30

}

},

{

name: 'voyage',

index: 'voyage',

width: 100,

editable: true,

editoptions: {

size: 10

}

},

{

name: 'port',

index: 'port',

width: 100,

editable: true,

editoptions: {

size: 30

}

},

{

name: 'authorizations',

index: 'authorizations',

width: 100,

editable: false,

editoptions: {

readonly: true,

size: 10

}

},

{

name: 'hazards',

index: 'hazards',

width: 100,

editable: false,

editoptions: {

readonly: true,

size: 10

}

},

{

name: 'specials',

index: 'specials',

width: 100,

editable: false,

editoptions: {

readonly: true,

size: 10

}

},

{

name: 'createddate',

index: 'createddate',

width: 100,

editable: false,

editoptions: {

readonly: true,

size: 10

}

},

{

name: 'modifieddate',

index: 'modifieddate',

width: 100,

sorttype: 'date',

formatter: 'date',

formatoptions: {

srcformat: 'UniversalSortableDateTime',

newformat: 'ISO8601Long'

},

editable: false,

editoptions: {

readonly: true,

size: 10

}

}],

rownumbers: true,

rowNum: 20,

loadonce: true,

gridview: true,

//rowList:[20,100,200],

sortname: 'booking',

sortorder: 'desc',

pager: '#pager',

viewrecords: true,

caption: 'Bookings'

});

jQuery('#main').jqGrid('navGrid', '#pager', {

add: false,

view: true

}, //options

{}, // edit options

// {}, // add options

{

reloadAfterSubmit: false

}, // del options

{

multipleSearch: true

}, // search options

{

height: 'auto',

width: 'auto',

jqModal: false,

closeOnEscape: true

} // view options

);

jQuery('#main').jqGrid('navButtonAdd', '#pager', {

caption: 'Columns',

title: 'Reorder Columns',

onClickButton: function () {

//jQuery('#main').jqGrid('columnChooser');

jQuery("#main").jqGrid('setColumns');

}

});

jQuery('#main').jqGrid('navButtonAdd', '#pager', {

caption: 'Add',

title: 'Add Record',

onClickButton: function () {

function DisplayEmptyText( display)

{

var grid = $('#items');

var emptyText = grid.getGridParam('emptyDataText'); // get the empty text

var container = grid.parents('.ui-jqgrid-view'); // find the grid's container

if (display) {

container.find('.ui-jqgrid-hdiv, .ui-jqgrid-bdiv').hide(); // hide the column headers and the cells below

container.find('.ui-jqgrid-titlebar').after('' + emptyText + ''); // insert the empty data text

}

else {

container.find('.ui-jqgrid-hdiv, .ui-jqgrid-bdiv').show(); // show the column headers

container.find('#EmptyData' + dataObject).remove(); // remove the empty data text

}

};

var itemcolnames = new Array('<s:text name="id"/>', '<s:text name="equipmentType"/>', '<s:text name="quantity"/>', '<s:text name="reeferStatus"/>');

jQuery('#items').jqGrid({

sortable: true,

width: 665,

autoheight: true,

resizable: true,

url: 'BookAction_itemdata',

datatype: 'json',

colNames: itemcolnames,

//['Id','Booking','SSL','Booking Type','Equipment Type','Vessel','Voyage','Port','Authorizations','Hazards','Specials','Created Date','Modified Date'],

colModel: [{

name: 'lhtId',

index: 'lhtId',

width: 100,

editable: false,

editoptions: {

readonly: true,

size: 10

}

},

{

name: 'lhtCode',

index: 'lhtCode',

width: 100,

editable: true,

edittype: 'select',

editoptions: {

dataUrl: "BookAction_itemlist"

}

},

{

name: 'quantity',

index: 'quantity',

width: 100,

sorttype: 'int',

editable: true,

edittype: 'text',

editoptions: {

maxlength: 10,

size: 30

},

editrules:{required:true, integer: true, minValue: '1'}

},

{

name: 'reeferType',

index: 'reeferType',

width: 100,

editable: true,

editoptions: {

size: 10

}

}],

rownumbers: true,

rowNum: 10,

loadonce: true,

gridview: true,

rowList: [10, 20, 30],

sortname: 'lhtCode',

sortorder: 'desc',

viewrecords: true,

pager: '#itempager',

caption: 'Items',

loadComplete: function(){

if($('#items').getGridParam("reccount")==0) {

DisplayEmptyText(true);

}

else{

DisplayEmptyText(false);

}},

emptyDataText:'There are no records. If you would like to add one, click the "Add New ..." button below.',

editurl:"someurl.php"

});

jQuery('#items').jqGrid('navGrid', '#itempager', {

}, {

reloadAfterSubmit: false

}, // edit options

{

reloadAfterSubmit: false

}, // add options

{

reloadAfterSubmit: false

}, // del options

{}); //options

$("#formBlock").dialog("option", "height", 530);

$("#formBlock").dialog("option", "width", 750);

$('#formBlock').dialog("open");

}

});

}

</script>

<div id="formBlock"><s:form action="Book_save">

<fieldset><legend> <s:text name="booking" /> </legend> <label>

<s:text name="booking" /> </label> <s:textfield name="booking" maxlength="30"

required="true" /> <label> <s:text name="ssl" /> </label> <s:select

label="ssl" name="sslCode" list="#request.ssls" listKey="sslCode"

listValue="sslDescription" required="true" multiple="false" /> <br />

<label> <s:text name="bookingType" /> </label> <s:select

label="bookingType" required="true" multiple="false"

name="bookingType"

list="#{'N':'Normal','P':'Positioning','T':'Terminating', 'X' : 'Export Only'}" />

<label> <s:text name="equipmentType" /> </label> <s:select

label="equipmentType" required="true" multiple="false"

name="equipmentType" list="#{'C':'Container','H':'Chassis'}" /></fieldset>

<fieldset><legend> <s:text name="routing" /> </legend> <label>

<s:text name="vessel" /> </label> <s:select label="vessel" name="vesselCode"

list="#request.vessels" listKey="code" listValue="longDescription"

required="true" multiple="false" /> <label> <s:text

name="voyage" /> </label> <s:textfield name="voyage" maxlength="10"

required="true" /> <br />

<br />

<label> <s:text name="portOfDispatch" /> </label> <s:select

label="portOfDispatch" name="portOfDispatch" list="#request.ports"

listKey="code" listValue="display" required="true" multiple="false" />

<label> <s:text name="portOfLoading" /> </label> <s:select

label="portOfLoading" name="portOfLoading" list="#request.ports"

listKey="code" listValue="display" required="true" multiple="false" />

<br />

<label> <s:text name="portOfDischarge" /> </label> <s:select

label="portOfDischarge" name="portOfDischarge" list="#request.ports"

listKey="code" listValue="display" required="true" multiple="false" />

<label> <s:text name="portOfDestination" /> </label> <s:select

label="portOfDestination" name="portOfDestination"

list="#request.ports" listKey="code" listValue="display"

required="true" multiple="false" /> <br />

<br />

<label> <s:text name="shipper" /> </label> <s:textfield name="shipper"

maxlength="60" required="true" /> <label> <s:text

name="trucker" /> </label> <s:textfield name="trucker" maxlength="30"

required="true" /> <br />

<label> <s:text name="consignee" /> </label> <s:textfield

name="consignee" maxlength="60" required="true" /> <label> <s:text

name="commodity" /> </label> <s:textfield name="commodity" maxlength="50"

required="true" /> <br />

<label> <s:text name="remarks" /> </label> <s:textfield name="remarks"

maxlength="60" required="true" /></fieldset>

<fieldset><legend> <s:text name="items" /> </legend>

<table id="items"></table>

<div id="itempager">

</div>

</fieldset>

</s:form></div>

Also - how do I post code so it is formatted and readable?

Any help is appreciated.

thanks,

Jmoran888