Problem:
I'm required to call custom function ValidateNumericInputBox, which will return focus to a text field which will cause an infinite loop.
I originally had buttons that would perform the lookup, but after going over the page with our end users it was decide to have lookups/validations performed on exit of the text field. So I need to find a way to kill this infinite loop that is created from conflicting code. The weird part is that this doesn't occur in Chrome or Firefox, only IE.
Original Problem:
IE freezes (infinite loop) when I have a jquery modal dialog box open for an error. In the IE developer tools I can see it looping. This does not occur in Firefox and Chrome.
Code:
$(DivID).dialog({
width:375,
height:550,
modal:true,
closeOnEscape:true,
buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ]
});
From research on SO I read that having this line would help:
close: function(event,ui){},
Issue still occurs when added. This is source:
JQuery dialog freezing on close
Display Dialog Box Code
function DialogBox(Params){
...
variables
...
if(arrParams[3])
errMsg = arrParams[3]; //custom error message
// CLOSE DIALOG BOX
if (DivStatus == 'Close'){
$(DivID).hide();
$(DivID).dialog('close');
}
else if(DivStatus === 'Open'){
....
logic for determining err msg
....
$(DivID).dialog({ width:375, height:550, modal:false, closeOnEscape:true, focus: function( event, ui ) {}, buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] });
}
else{ // General error message - uncaught error
if (DivID == '#Div_ErrorMessage')
{ $(DivID).dialog({ width:375, height:150, modal:true, closeOnEscape:true, close: function(event,ui){},buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] }); }
}
}
HTML DIV For Dialog Box
<div id="Div_Wrapper" style="background:#EBEBEB;">
<div id='Div_LoadingOverlay' class="Div_LoadingOverlay_Relative noPrint"><div class='Div_LoadingOverlay'><br><br><img src='/common/images/misc/loader_01.gif' align='absmiddle' /><br>Loading...</div></div>
<div id='Div_ErrorMessage' style='display:none;' title='Error Message'>There seems to be something wrong with the form...</div>
Research:
JQuery dialog freezing on close
A lot of issues that I researched are dated <= 2010, and deal with browsers that I don't support. Also are not completely relevant.
Browsers tested
IE 9,10 - does not work
Firefox 18.0.1 - works
Chrome Version 34.0.1847.137 m - works
More test cases:
1) Removed $( this ).dialog( "close" ); in the click function. - Does not work.
2) Brought things back to the basics and copied and pasted the code straight from jquery's website
$( "#dialog-modal" ).dialog({
height: 140,
modal: true
});
Changing of course #dialog-modal to be DivId. - This does not work.
EDIT 0
I just realized this would be useful information and is part of the problem. I perform validation on a text field on the onBlur event. So whenever the user exits the text field validation is performed and if it's invalid input then this dialog box will appear. So what I think is happening after this dialog box pops up it returns focus to the text box and then focus returns back to the dialog box which creates this infinite loop.
EDIT 1
That's exactly it, but it's because I have code that is returning focus to the text field to outline the text field as red. These are user requirements and I can't change them.
This function is called to lookup information and validate the field. If an error is returned from the JSP page then
function someFuncNameLookup(params){
....
//SubmitForm = ValidateNumericInputBox('#'+ arrParams[0] +' #'+orgType+'^5^0');
// SUBMIT FORM
//if (SubmitForm.length == 0){
if (0 == 0){
$('#Div_LoadingOverlay').show();
$.post("/someDirectory/someFileName.jsp",
{ ID20140411: "LookUp_org|"+ $("#"+orgType).val() + '|' + orgType },
function(ID20140411_LoadDefault_data) {
var splitData = ID20140411_LoadDefault_data.split("%");
var splitString = splitData[1].toString();
var pairs = splitString.split(","); if(ID20140411_LoadDefault_data.search('orgLookupError') != -1){
DialogBox('Div_ErrorMessage^Open^orgLookupError');
}else{
displayLookupData(pairs,lookupType);
}
});
}else{
DialogBox('Div_ErrorMessage^Open^orgLookupError');
}
$('#Div_LoadingOverlay').hide();
}
The ValidateNumericInputBox will return focus to text field that had an error. This is part of a library of code from another group in my company that I am "required" to use. I change the if(0==0) to confirm ValidateNumericInputBox was the reason for my issue . When I have if(0==0) I don't get the infinite loop. What's weird is this only happens in IE.
