locked
Required Validator makes the mobile.loader stop working RRS feed

  • Question

  • User351619809 posted

    I have the following script on my ASP.net page:

    <script>
        $(document).bind( 'mobileinit', function(){
            $.mobile.loader.prototype.options.html =    '<div class="cssload-container">\n' +
                '           <ul class="cssload-loader">\n' +
                '               <li></li><li></li><li></li><li></li><li></li><li></li>\n' +
                '           </ul>\n' +
                '       </div>\n' +
                '       <div class="modal-overlay"></div>';
        });
        </script>
        <script src="Javascripts/jquery.mobile-1.4.5.js"></script>

    The script runs fine when I don't have any asp:RequiredValidators on my page. As soon as I put the asp:RequiredValidators on my page, the above script stops working. Below is the required validator that I have on my page. I have seven required validators. Below is one of them.

    asp:RequiredFieldValidator Display="None"  ID="Validator1" runat="server" ErrorMessage="First Name is required" ControlToValidate="firstName"></asp:RequiredFieldValidator>

    Any Help will be highly appreciated.

    Monday, June 15, 2020 4:47 AM

Answers

  • User-474980206 posted

    Webform validation uses jquery validation under the covers. It is not compatible with jquery mobile. You can probably fix it up. In the Jquery mobile form  turn Ajax off. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 4, 2020 11:49 PM

All replies

  • User1535942433 posted

    Hi anjaliagarwal@yahoo.com,

    Accoding to your codes,I suggest you could move the Jquery reference from Head section to end of page or after form tag.

    Since you don't post your codes,I create a demo.

    More details,you could refer to below codes:

    <body>
        <form id="form1" runat="server">
             <div data-role="page" id="index">
                <div data-theme="a" data-role="header">
                    <h3>
                        First Page
                    </h3>
                    <a href="#second" class="ui-btn-right">Next</a>
                </div>
    
                <div data-role="content">
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"  ErrorMessage="NULL" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
                    <input id="Submit1" type="submit" value="submit" />
                </div>
    
                <div data-theme="a" data-role="footer" data-position="fixed">
    
                </div>
            </div> 
        </form>
          <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
            <style>
                .ui-loader-default {
                    opacity: 1 !important;      
                }        
            </style>
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
        <script>
                $(document).bind('mobileinit', function(){
                    $.mobile.loader.prototype.options.html = '<div class="cssload-container">\n' +
                '           <ul class="cssload-loader">\n' +
                '               <li></li><li></li><li></li><li></li><li></li><li></li>\n' +
                '           </ul>\n' +
                '       </div>\n' +
                        '       <div class="modal-overlay"></div>';
                    $.mobile.ajax
                }); 
            </script>       
            <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
            <script>
                $(document).on('pageshow', '#index', function(){        
                    $.mobile.loading( 'show');          
                }); 
            </script>
    </body>

    Best regards,

    Yijing Sun

    Monday, June 15, 2020 8:29 AM
  • User351619809 posted

    The loader keeps running. Its not stopping at all even if the page completes the loading.

    Thursday, September 3, 2020 6:40 PM
  • User-474980206 posted

    Webform validation uses jquery validation under the covers. It is not compatible with jquery mobile. You can probably fix it up. In the Jquery mobile form  turn Ajax off. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 4, 2020 11:49 PM