0

I got a simple MVC @HTML.BeginForm with the ID of SimpleSpinForm that does stuff. When I click on a submit button i'm showing a loading GIF that spinns while the form get submitted. It works perfectly on Chrome and FF but in IE it just stands still. Any suggestions how I can make it work on a simple way?

My DIV that holds the gif:

<div id="myLoadingElement" style="display: none">
    <img src="/Content/ajax-loader.gif" alt="Loading..." />
</div>

My Script that runs when button clicks:

<script>
    $("#SimpleSpinForm").submit(function (e) {
        $(".MainDiv").css("opacity", 0.9).fadeIn(300, function () {
            $("#myLoadingElement").show();
        });         
    });
</script>
krisal
  • 621
  • 6
  • 19
  • Might be an opacity in css problem .Check this out : http://stackoverflow.com/questions/1948176/opacity-css-not-working-in-ie8 – Rohit Arora Jun 03 '15 at 07:24
  • @RohitArora I've read that article and I also tried without the opacity thing, but the spinner wont spin at all. :( – krisal Jun 03 '15 at 07:31
  • For me it is working in IE 11, here is the JsFiddle - https://jsfiddle.net/b90ua5w7/2/. Can you tell us which version of IE it is not working. – ramiramilu Jun 03 '15 at 07:41
  • @ramiramilu I'm using IE 11, haven't tried on lower versions yet. Wierd that it works on your jsfiddle but not on my site. – krisal Jun 03 '15 at 07:47
  • So there might be some CSS specific to IE which might be blocking the loading image. check that, probably in layout. Also do check for Developer tools if there are any errors. – ramiramilu Jun 03 '15 at 07:48
  • @ramiramilu I don't get any errors, and I do see the image, but it just is there, no action at all. I'll investigate it alittle further, maybe need to update my jQuery version? I'm using version 1.10.2. – krisal Jun 03 '15 at 07:54
  • @ramiramilu A funny part is, the spinner works perfectly untill I but the display: none style on me div. I also tried to use `$("#myLoadingElement").css("display", "inline-block");` instead of `$("#myLoadingElement").show();` but with no success. – krisal Jun 03 '15 at 08:08
  • I think it is the problem with JQuery version, can you try with `Jquery 1.11.0`, it is working fine for me. When i try with `JQuery 1.10.1`, it is not working. – ramiramilu Jun 03 '15 at 08:10
  • @ramiramilu And now I've noticed that it stops to work as soon as I click on a submit button. Hmm. Wierd :( – krisal Jun 03 '15 at 08:10
  • Were you able to solve this with `JQuery 1.11.0`? – ramiramilu Jun 03 '15 at 08:19
  • @ramiramilu I tried with the jQuery version `1.11.0` but still nothing. I've also tried without any script and i removed the `display: none` styling and noticed that as soon as I submit the form the loading image just freezes and the site loads as normally. – krisal Jun 03 '15 at 08:20
  • with `JQuery 1.11.0`, is this the expected behavior - https://jsfiddle.net/b90ua5w7/4/ – ramiramilu Jun 03 '15 at 08:21
  • I didn't really managed to fix it, so I implemented [Spin.js](http://fgnass.github.io/spin.js/) and it works well :) – krisal Jun 03 '15 at 11:20
  • From experience (no citation...) IE has an issue with all animated GIFs when the content is redrawing/reloading. Add a delay (eg `Thread.Sleep(500)`) the post action to confirm this: while the page is posting (data being sent+processing) the animation works fine, but as soon as the browser starts receiving data, the animation stops. If it's a large response then this can take longer than the initial request and so appears to never animate. – freedomn-m Jun 03 '15 at 13:58
  • @freedomn-m Thank you for the useful information! But right now the Spin.js works well for us! – krisal Jun 04 '15 at 11:47

0 Answers0