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:
<!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'>&nbsp;</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>

Open in new window


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

Open in new window

mamusciaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
Try $.ajaxSetup (outside your function) and remove all show and hide from your code :

$(document).ready(function() {

$.ajaxSetup({ 
     beforeSend:function() { $('#spindiv').show(); }, 
     complete: function() { $('#spindiv').hide(); } 
});

})

Open in new window


    function addNewRCA() {
        var h = screenheight - 300;
        var w = screenwidth - 400;
        var formtitle = " Insert New RCA"; 
        // Get populated form from server for this Record
        $.ajax({
            url: "adminRCA_DB.php",
            type: "GET",
            async: false,
            data: {"action":"getInsertform"},
            error: (function (xhr, textStatus, errorThrown) {
                alert(errorThrown);
                $('#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 () {
                            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
            }
        }); // end ajax options
    }

Open in new window

0
mamusciaAuthor Commented:
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.
0
leakim971PluritechnicianCommented:
where to see that? what about the z-index and position of the spin?
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

mamusciaAuthor Commented:
I played with z-index and the spindiv definition.  Neither made a difference.  I read about z-index maximum values and I changed it to match a number just below max for all browsers. I am at wits end making this work.  It should be a simple thing.
0
leakim971PluritechnicianCommented:
please provide a link to see that or setup a simple page which reproduce this
0
mamusciaAuthor Commented:
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
0
mamusciaAuthor Commented:
I found the issue.  In Chrome and IE if you use Async=false, then it blocks the SpinDiv from showing a spinning GIF.  I just changed my code to say Async: TRUE and all works as needed.
Of course the logic has to support asynchronously calling the server program, and luckly the way I set it up it works fine.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mamusciaAuthor Commented:
After much digging and searching, I found the answer here:  http://forums.asp.net/t/1542861.aspx/1
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.