Monaca Onsen UI Discord Chat Github Repo

Hybrid android application break



  • I’ve developed web application with onsenui, it is working fine on ios but due to some reason unexpected behaviour on android device.

    My code is simple as below:

    <!doctype html>

    <head>

    <!-- <script src=“lib/onsen/js/onsenui.js”></script> -->

    <link rel=“stylesheet” href=“https://unpkg.com/onsenui/css/onsenui.css”>
    <link rel=“stylesheet” href=“https://unpkg.com/onsenui/css/onsen-css-components.min.css”>
    <script src=“https://unpkg.com/onsenui/js/onsenui.min.js”></script>

    <script src=“lib/jquery-1.11.3.min.js”></script>
    <script src=“lib/raty/jquery.raty.js”></script>
    <script src=“lib/jquery.form-validator.min.js”></script>

    <script src=“js/config.js?ver=1.0”></script>

    <script src=“js/app.js?ver=1.0”></script>

    </head>

    <body>

    <ons-modal var=“loader”>
    <div class=“myloader”></div>
    </ons-modal>

    <ons-modal var=“loaderSearch”>
    <div class=“myloader”></div>
    </ons-modal>

    <ons-modal var=“loaderLang”>
    <div class=“myloader”></div>
    </ons-modal>

    <ons-navigator id=“kSettingsNavigator” page=“signup.html”>
    </ons-navigator>

    <script type=“text/ons-template” id=“signup.html”>
    <ons-page id=“page-signup”>

    <ons-toolbar>
    <div class=“left”><ons-back-button></ons-back-button></div>
    <div class=“center white”><span id=“search-text” class=“trn” data-trn-key=“register”>Register</span></div>
    </ons-toolbar>

    <form id="frm-signup" class="frm-signup" method="post"> 
    <input type="hidden" name="next_steps" class="next_steps">
       
    <div class="wrapper">
       <div class="field-wrapper">
       <input type="text" name="first_name" id="first_name" class="first_name text-input text-input--underbar has_validation" 
       placeholder="First Name" value="" data-validation="required" data-validation-error-msg="This field is mandatory!" >
       </div>
    
       <div class="field-wrapper">
       <input type="text" name="last_name" id="last_name" class="last_name text-input text-input--underbar has_validation" 
       placeholder="Last Name" value="" data-validation="required" data-validation-error-msg="This field is mandatory!"  >
       </div>   
       
       <div class="field-wrapper">
           <input type="text" name="email" id="email" class="email_address text-input text-input--underbar has_validation" 
           placeholder="Email address" value="" data-validation="required" data-validation-error-msg="This field is mandatory!" >
       </div>
      
       <span id="emailerror" style="color:red; display: block;font-size: 12px;text-align: left;"></span>
    </div>
    
    <button class="button green-btn button--large trn" onclick="signup();">
    

    Sign Up
    </button>
    </form>

    </ons-page>
    </script>

    <script type=“text/ons-template” id=“wristband.html”>
    <ons-page id=“page-wristband”>

     <ons-toolbar>        
      <div class="left"><ons-back-button></ons-back-button></div>             
      <div class="center white"><span id="search-text" class="trn" data-trn-key="register">WRISTBAND ID</span></div>                  
     </ons-toolbar>
         
     
     <form id="frm-wristband" class="frm-wristband" method="post">   
      <input type="hidden" name="next_steps" class="next_steps">
         
      <div class="wrapper">
        <div class="field-wrapper">
        </div>       
     </div>
     <div class="wrapper">
      <div class="field-wrapper">
      </div>       
     </div>
    
    
      <div class="wrapper">
         <div class="field-wrapper">
         <input type="text" name="wristband_Id" Id="wristband_Id" maxlength="14" class="wristband_Id text-input text-input--underbar has_validation"  
          placeholder="Wristband ID(Top ID, 14 digits)" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
         
         
         </div>        
        
      </div>
      
      <button class="button green-btn button--large trn" onclick="wristband();" data-trn-key="wristband">
     Save Details
     </div>
      </button>
      <span class="spanwristband"></span>
      </form> 
    

    </ons-page>
    </script>

    </body>

    on form submit:

    function signup() {

    $.validate({
    	form: '#frm-signup',
    	borderColorOnError: "#FF0000",
    	onError: function (err) {
    		
    	},
    	onSuccess: function () {
    
    		//For emailvalidation
    		var emailId = $("#email").val();
    		var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    		if (!regex.test(emailId)) {
    			$("#emailerror").html('Email format is not valid!')
    			return false;
    
    		}
    
    		var params = $("#frm-signup").serialize();
    
    		var mac = getQueryStringValue('mac');
    		params += "&device_id=" + mac;
    
    		//callAjax("Signup", params, true);
    
    		setStorage("mac", mac);
    		setStorage("firstname", $("#first_name").val());
    		setStorage("lastname", $("#last_name").val());
    		setStorage("email", $("#email").val());
    
    		var options = {
    			animation: 'slide',
    			onTransitionEnd: function () {
    				initSlideMenu();
    			}
    		};
    		document.getElementById('kSettingsNavigator').resetToPage('wristband.html');
    		return false;
    		
    		
    	}
    });
    

    }

    where i’m calling reset to page to redirect page to another page and it only works on ios as expected,
    tested on android 8.1 page just reload and can’t redirect to another page.

    thanks in advance.


  • administrators

    Can you provide a working example of this in the playground please? https://onsen.io/playground/

    Or if that’s not possible, please host the code somewhere so I can run it on an Android device.

    It can’t be run as currently posted because some libraries are missing. Once I can run it, I should be able to see what the problem is.