asp.net mvc - jquery code working in every browser except ie8 -
this scenario. creating image upload using iframe. situation this, if hovers on iframe, div opens on has 2 buttons. 1 button select image clear image present in iframe.
this code of 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 code 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 code 2 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 hidden input type file
this controller code:
public actionresult clear() { system.io.file.delete(request.mappath("/css/html/imgs/ex1.jpg")); return redirecttoaction("index"); }
the problem works fine in other browsers except ie8.only hover code working in ie8. need make work in ie8. can that? thanks
note: in ie click event getting triggered because can see alert doesnt trigger @url.action method
the following may of interest:
it seems problem due click
no being triggered because file input display:none
or visibility:hidden
. try setting opacity:0
, filter:alpha(opacity = 0);
instead — input's click wont disabled — or better still use off-screen positioning adardesign suggests.
if doesn't work, other tricks i've seen used regards triggering click on file upload position input floats on top of desired button , has it's opacity faded out 0. means click of input still accessible user, gui of button shows through. it's quite illegant hack though really.
http://www.quirksmode.org/dom/inputfile.html
update
seeing above not problem, try modifying things , see if 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 @url.action("clear", "landingsetting")
renders correctly formatted url see no reason why above have issue. if view source
on page in-question should able scroll code responsible , find url being produced. if url exists , accessible ie8, issue else.
possible explanation
ah, ok seemed work. guess why seem ie8 has issue alerts
occuring directly after jquery ajax requests. guess alert
halts process, , after clicking alert away page have reloaded window.location.reload(true);
before request got chance reach server. reason other browsers work because allow ajax call occur despite alert, , has time communicate before reload.
... solution, in future use callback make ajax request has finished :)
Comments
Post a Comment