jQuery .Show() not working in IE or Chrome, working in FF
I am trying to show an in-progress spinning wheel and it works great in Firefox but doesn't show in Chrome or Internet explorer. When I go into debug mode in Chrome, it appears to work, but when in normal page mode it doesn't show the SPINDIV. Can anybody explain this behavior?
The HTML:
The Javascript:
The HTML:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>RCA Administration</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Robots" content="NOINDEX" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<link rel="shortcut icon" href="favicon.ico" >
<script language='javascript' src='../javascript/zcommon.js' type='text/javaScript'></script>
<script language='javascript' src='javascript/adminRCA.js' type='text/javaScript'></script>
<script language='javascript' src='../javascript/jquery-1.10.2.min.js' type='text/javaScript'></script>
<script language='javascript' src='../javascript/jquery-ui-1.10.3.custom.min.js' type='text/javaScript'></script>
<script language='javascript' src='../javascript/grid.locale-en.js' type='text/javaScript'></script>
<script language='javascript' src='../javascript/jquery.jqGrid.min.js' type='text/javaScript'></script>
<link rel="stylesheet" type="text/css" href="css/pagelayout.css" />
<link rel="stylesheet" type="text/css" href="css/localstyles.css" />
<link rel="stylesheet" type="text/css" href="css/sitenavmenu.css" />
<link rel="stylesheet" type="text/css" href="../css/redmond/jquery-ui-1.10.3.custom.min.css" />
<link rel="stylesheet" type="text/css" href="../css/ui.jqgrid.css" />
<!--[if gte IE 5]> <style type="text/css"> #blanket {filter:alpha(opacity=65);}</style><![endif]-->
</head>
<body onload="initializePage()">
<div id='blanket' style='display:none;'></div>
<div id="header">
<span class='headtext1'>Page Heading</span>
<span style='float:right;padding-right:5%;'><img src='images/ibm-logo.gif' width='60' height='25' /></span>
<br />
<span class='headtext2'>Page Sub-heading</span><br /><br />
<table width='96%'>
<tr>
<td class='headtext3' width='48%' align='left' valign='top'>User Name</td>
<td class='headtext3' align='right' width='48%' valign='top'> </td>
</tr>
</table>
</div> <!-- end of header -->
<div id='contentplain'>
<div class="indentdiv">
<button id="btnAdd" onclick="addNewRCA();">Add New</button>
<div id="spindiv" style="display:none;width: 75px; height:75px;z-index:99999999;position: absolute;left: 635px;top: 237px;">
<img src="../images/ajax-loader.gif" width="32" height="32" style="border: 0" alt="Processing..." />
</div> <!-- end of spin div -->
</div> <!-- end of indent div -->
<div id="formdiv" style="display:none;"></div>
</div><!-- end of content column -->
</body>
</html>The Javascript:
function addNewRCA() {
var h = screenheight - 300;
var w = screenwidth - 400;
var formtitle = " Insert New RCA";
$('#spindiv').show();
// Get populated form from server for this Record
$.ajax({
url: "adminRCA_DB.php",
type: "GET",
async: false,
data: {"action":"getInsertform"},
beforeSend: function() {
$('#spindiv').show();
},
error: (function (xhr, textStatus, errorThrown) {
alert(errorThrown);
$('#spindiv').hide();
}),
//complete: (function () {
// $('#spindiv').hide();
// }),
success: function(data) {
$("#formdiv").html(data).dialog({modal: true, width:w, height:h, draggable: true, autoOpen: false,
title: formtitle, position:['middle',20],
open: function(event, ui){
$('#spindiv').hide();
$('#errormsgs').hide();
$("#accordion").accordion({ collapsible: true, active: false });
$("#accordion").accordion("option","active",0); // open first section
$("#request_date").datepicker({changeMonth: true, changeYear: true,
dateFormat: "yy-mm-dd", showOn:"both", buttonImage: '../images/cal1.png', buttonImageOnly: true});
$("#due_date").datepicker({changeMonth: true, changeYear: true,
dateFormat: "yy-mm-dd", showOn:"both", buttonImage: '../images/cal1.png', buttonImageOnly: true});
$("#actual_delivery_date").datepicker({changeMonth: true, changeYear: true,
dateFormat: "yy-mm-dd", showOn:"both", buttonImage: '../images/cal1.png', buttonImageOnly: true});
$("#target_delivery_date").datepicker({changeMonth: true, changeYear: true,
dateFormat: "yy-mm-dd", showOn:"both", buttonImage: '../images/cal1.png', buttonImageOnly: true});
$("#root_cause").change(function() {
var rootcause=$(this).val();
$.ajax ({
type: "GET",
url: "adminRCA_DB.php",
data: {"action":"getSubcauses","rootcause":rootcause},
cache: false,
dataType: "html",
success: function(html) {
$("#sub_cause").html(html);
}
}); // end ajax call
} ); // end rootcause change
}, // end dialog open
buttons: {
"Save": function () {
$('#spindiv').show();
var validation = validateRCAForm($('#editform'));
//alert("FORM SHOULD SUBMIT HERE");
if(!validation[0]) { // validation array position 0 = false
$('#errormsgs').show();
$('#errormsgs').html(validation[1]);
$('#spindiv').hide();
}else{
// make the ajax call to save the form data
var serializedData = $('#editform').serialize();
request = $.ajax({
url: "adminRCA_DB.php?action=insertRCA",
type: "post",
data: serializedData
});
// callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
// log a message to the console
//console.log("Hooray, it worked!");
//console.log(response);
});
// callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// log the error to the console
//console.error(
// "The following error occured: "+
// textStatus, errorThrown
//);
});
// callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
// reenable the inputs
$('#spindiv').hide();
});
// end ajax call to save the form data
$(this).dialog("close");
$("#gridtable").trigger("reloadGrid");
}
},
"Cancel": function() {
$(this).dialog("close");
}
} // end dialog buttons
}).dialog('open'); // end dialog definition, now open it
$('#spindiv').hide();
}
}); // end ajax options
$('#spindiv').hide();
}ASKER
Now it's not working in any browser. When I go into debug mode, the code is executing with no errors, but the spinner does not show up.
where to see that? what about the z-index and position of the spin?
ASKER
please provide a link to see that or setup a simple page which reproduce this
ASKER
This is an intranet site so I can't provide a link to working copy. I am going to strip it way down and build it one step at a time. Could the modal windows be getting in the way? I won't be checking this post again today, but will pick it up again next week. I'd appreciate anything you can come up with in the meantime that I could do to test it out. Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
After much digging and searching, I found the answer here: http://forums.asp.net/t/1542861.aspx/1
Open in new window
Open in new window