UPDATE -- View the JSFiddle for this issue: http://jsfiddle.net/bLURx/4/
In my application's main screen, there is an inline virtual keypad that functions correctly.
Within a table on the same screen, there are links that trigger a JQuery Dialog containing another table with textboxes in one of the columns. Each textbox generates its own keypad for user input.
At this point, everything is working as expected. I adjusted the z-index of the popup keypads to ensure they display above the dialog window. However, a strange issue occurs when any button on the keypads is clicked. Instead of functioning normally, each keypad closes and opens a new one above the top row in the table. While this top keypad remains open after clicking, it does not input text into any field.
The jQuery function responsible for the dialog box and initializing popup keypads is as follows:
$(function () {
var createdPads = [];
$('#dialog').dialog({
autoOpen: false,
modal: true,
width: '95%',
height: 1000,
open: function (event, ui) {
$('#dialog :text').each(function () {
$(this).keypad({
keypadOnly: false,
keypadClass: 'miniPad'
});
createdPads.push(this);
});
},
close: function (event, ui) {
for (i = 0; i < createdPads.length; i++) {
createdPads[i].remove();
}
$('#<%=enterNumberBox.ClientID%>').blur();
var tbl = $('#<%=gvData.ClientID%>');
if (tbl.is(":visible")) {
$(window).scrollTop(tbl.position().top);
}
}
});
});
CSS class used for styling the popup keypads:
.miniPad{
z-index: 9999 !important;
}
Sample HTML code snippet:
<div id="dialog" style="display: none; text-align: center;">
<span class="ui-helper-hidden-accessible"><input type="text"/></span>
<asp:GridView runat="server" ID="gvItemData"></asp:GridView>
<asp:Button ID="updateStagedButton" runat="server" Text="Update" OnClientClick="return validateUpdate();" />
</div>
I will provide a screenshot showcasing the issue once I have enough reputation points.
Thank you!