Search code examples
javascriptandroidhtmlasp.netwindows-phone-8

onsubmit() fires but makes no changes to element style on mobile

I'm trying to show a modal window on top of the screen when user submits the form. I want to disable form (show some loading icon) to show that button was clicked and action is being processed, because sometimes on mobile it's not so clear for our users

On PC browsers (Firefox, IE, Opera) everything works fine, but on Android or WP 8.1 div overlay is not shown after submitting the form.

Do you have any idea how to resolve this issue? Maybe some other approach?

My sample code:

<script type="text/javascript">
        function ShowLoadingPanel() {
            document.getElementById('loadingPanel').style.display = 'block';
            document.getElementById('overlay').style.display = 'block'
        }
 </script>

<body>
 <div id="loadingPanel" class="loadingPanelStyle"></div>
 <div id="overlay" class="blackOverlay">    </div>
 <form id="form1" runat="server" onsubmit="return ShowLoadingPanel();">
    //some content
     <asp:Button runat="server" ID="xNext" Text="Next" OnClick="xNext_Click" />
 </form>
</body>

And some CSS for modal window

.loadingPanelStyle
{
    display: none;
    position: fixed;
    background:url(../img/load2.gif) no-repeat center center;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    font-size: small;
    z-index: 1002;
    overflow: auto;
}

.blackOverlay
{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=80);
}
Solution

  • After some hints from @Velimir Tchatchevsky I found solution which is working.

    function ShowLoadingPanel() {
        document.getElementById('loadingPanel').style.display = 'block';
        document.getElementById('overlay').style.display = 'block';

        setTimeout(function(){ 
            document.getElementById('form1').submit();
        }, 100);
        return false;
}

    But it's weird that on WP8.1 (Internet Explorer) and Android 4 (Default browser) it's mandatory to use setTimeout() function, to postpone submit action. Is it some mobile optimization or what? Thank you all for help!