jquery code working in every browser except ie8

Question

This is my scenario. I am creating image upload using an iframe. The situation is like this, if someone hovers over that iframe, another div opens on it which has two buttons. One button is to select another image another is to clear the image present in iframe.

This is the code of the view:

   @using (Html.BeginForm("Index", "LandingSetting", FormMethod.Post, new { enctype = "multipart/form-data" }))
                            {
                                @Html.ValidationSummary(true)
    <div id="menu" class="tip_trigger">
        <iframe width="731" height="335" src="@ViewData[" htmlloc "]"></iframe>
        <div id="inner" class="hover-text">
            <table>
                <tr>
                    <td width="50%" align="center" valign="middle">
                        <img id="slctbtn" src="../../Images/Landing/s_btn.PNG" />
                    </td>
                    <td width="50%" align="center" valign="middle" style="padding-left: 200px">
                        <img id="clearbtn" src="../../Images/Landing/c_btn.PNG" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
}

Here is the code for hover:

 <script type="text/javascript">
        $(document).ready(function () {
            //Tooltips
            $(".tip_trigger").hover(function () {
                tip = $(this).find('.hover-text');
                tip.show(); //Show tooltip
            }, function () {
                tip.hide(); //Hide tooltip        
            });
            //    
        });
    </script>

and here is the code for the two buttons:

<script type="text/javascript">
        $(function () {
            $('#slctbtn').click(function () {
                $('#htmla').click();
            });
            $('#htmla').change(function () {
                $('form').submit();
            });
            $('#clearbtn').click(function () {
                $(this).load('@Url.Action("Clear", "LandingSetting")');
                alert('Content Cleared!');
                window.location.reload(true);
            });
        });
    </script>

Note: htmla is the hidden input type file

This is my controller code:

  public ActionResult Clear()
        {
            System.IO.File.Delete(Request.MapPath("/CSS/html/imgs/ex1.jpg"));
            return RedirectToAction("Index");
        }

The problem is this works fine in other browsers except IE8.Only the hover code is working in IE8. I need to make it specifically work in IE8. Can anybody help with that? Thanks

Note: In IE the click event is getting triggered because i can see the alert but it doesnt trigger @url.action method

I guess having a script not working in I.E. 8 is probably a correct / common behaviour :) — Seb T., Apr 05 '13 at 07:42
ya i even think so :) but we generally create the application so that it works in older browsers like IE because there is always a possibility that our clients might be still using it :) — nitinvertigo, Apr 05 '13 at 07:45
That's very brave from yourself. I had to face that kind of situation a while ago ... that's not a so funny story sometime. Good luck then :) — Seb T., Apr 05 '13 at 11:49

score 2 · Accepted Answer · edited May 23 '17 at 12:21

The following may be of interest:

Jquery trigger file input

It seems your problem is due to the click no being triggered because the file input is display:none or visibility:hidden. You could try setting opacity:0 and filter:alpha(opacity = 0); instead — however the input's click wont be disabled — or better still use off-screen positioning as adardesign suggests.

If this doesn't work, the other tricks I've seen used with regards to triggering a click on a file upload is to position the input so that it floats over the top of the desired button and then has it's opacity faded out to 0. This means the click of the input is still accessible to the user, but the GUI of the button shows through. It's quite an illegant hack though really.

http://www.quirksmode.org/dom/inputfile.html

update

Seeing as the above is not your problem, you could try modifying things slightly and see if you get anything improving:

$('#clearbtn').click(function(){
  $.ajax('@Url.Action("Clear", "LandingSetting")')
    .done(function(response){
      alert('response: '+response);
      alert('Content Cleared!');
      window.location.reload(true);
    })
    .fail(function(jqXHR, textStatus){
      alert('an error occured ' + textStatus);
    })
  ;
});

As long as @Url.Action("Clear", "LandingSetting") renders to a correctly formatted URL then I see no reason why the above would have an issue. If you view source on the page in-question you should be able to scroll to the code responsible and find the URL that is being produced. If this URL exists and is accessible to IE8, then the issue is something else.

possible explanation

Ah, ok so this seemed to work. My guess as to why is that it would seem IE8 has an issue with alerts occuring directly after jQuery ajax requests. My guess is that the alert halts the process, and then after clicking the alert away the page would have reloaded thanks to window.location.reload(true); before the request got a chance to reach the server. The reason the other browsers work is probably because they allow the ajax call to occur despite the alert, and so has some extra time to communicate before the reload.

... the solution, in future always use a callback to make certain an ajax request has finished :)

In IE, the click is working fine because i can see the input type file trigger as well as i am getting the alert also but it is not going to the url.action method — nitinvertigo, Apr 05 '13 at 07:18
@nitinvertigo ah ok. Where is your form HTML? If you could add that to the question that could help. — Pebbl, Apr 05 '13 at 07:22
@nitinvertigo thanks, it would also be useful to see what is actually getting generated in the browser side of things for the line `$(this).load('@Url.Action("Clear", "LandingSetting")');` if possible? — Pebbl, Apr 05 '13 at 07:30
my doubt is am i giving the correct way to trigger url.action method? because i guess IE might be having a problem with that. Also as you asked after clicking the clear button, other browsers trigger the actionresult and the page gets reloaded with the iframe becoming blank. In IE however the page reloads without any change. — nitinvertigo, Apr 05 '13 at 07:30
@nitinvertigo Well I'm not sure if you mean to be using `$().load`, considering your `ActionResult Clear` redirects to `RedirectToAction("Index")` which will return whatever that returns, and this will then replace your button. If you don't expect html results returned you could be better off using `$().ajax` - however as long as your `@Url.Action("Clear", "LandingSetting")` is working using a GET url rather than POST I don't see why it would have a problem yet. — Pebbl, Apr 05 '13 at 07:36
@nitinvertigo I've updated my code with a suggestion, however, it's just a guess I'm afraid. — Pebbl, Apr 05 '13 at 07:46
hey thanks :) after modifying the code with ur suggestion it is working perfectly — nitinvertigo, Apr 05 '13 at 07:50

jquery code working in every browser except ie8

1 Answers1

update

possible explanation