How to redirect back to ons-template from JS function



  • I’m trying to redirect to my home page after successful login from ajax post. I tried using ons-navigator but I’m getting “Uncaught TypeError: Cannot read property ‘pushPage’ of null”. How can this be implemented?

    <ons-template id="home.html">
    <ons-navigator id="homeNav" ng-controller="MapController">
    //the navigator
    
    success: function(data) {
            document.getElementById('#homeNav').pushPage('home.html');
    //calling home.html with error
    }


  • @AspiringWizard Can you post a bit more of your code? This error means that the navigator has not been pushed to the DOM yet, which indicates you may have a work flow issue. I would assume you are loading home.html by default and if onload they are not logged in, pushing the login page or such. Are you going a different route?



  • I am loading login.html file by default. And on login I want to direct the page to home.html. So the login button calls the login() function when login button is pressed:

        <ons-button id="signInButton" onclick="DriverLogin()">SIGN IN</ons-button>
    

    Here is my home.html:

      <ons-template id="home.html">
       <ons-navigator id="homeNav" ng-controller="MapController">
    <ons-page class="pageColor">
      <ons-toolbar id="seaGreen">
        <div class="left">
          <ons-toolbar-button ng-click="split.toggle()">
            <ons-icon icon="ion-navicon, material:md-menu" style="color:white"></ons-icon>
          </ons-toolbar-button>
          <img src="img/blank.png" width="40" style="padding-right:16px;">
        </div>   
      <div class="center">
        <img src="img/mulaBanner.png" width="130" height="24" style="padding-top:8px;">
      </div>        
    </ons-toolbar>
      
      <ons-list>
        <ons-list-item class="menuListColor" modifier="longdivider">
          <label>On Duty</label>
          <div class="right"><ons-switch></ons-switch></div>
        </ons-list-item>
      </ons-list>
    
        <div id="map_canvas"></div>        
    
    </ons-page>
    </ons-navigator>
    </ons-template>
    

    and here is the login() function that was called, this is done using ajax:

    $.ajax({
        
        url: domainName + "DriverLogin" + suffixUrl + "&Email=" + email  + "&Password=" + password, 
        method: "POST",
        dataType:"html",
        success: function(data) { 
            var xmlDoc = $.parseXML(data);
            var $xml = $(xmlDoc);
            var result;
            $xml.find('boolean').each(function(){
                  result = $(this).text();
                  console.log(result);
                });            
            
            if(result == "true")
            {
                homeNav
                .pushPage("home.html", options);
            }
    

    And hence the error that was faced pops up “Uncaught TypeError: Cannot read property ‘pushPage’ of null”. Is there any way to call home.html from here?



  • @AspiringWizard You have a workflow issue. You need the navigator outside of the template so it can receive the push. I made a quick example here: https://codepen.io/munsterlander/pen/RpPNWz

    Edit: Personally, I would go a different route by having using the replacePage method so the loginPage is not in the navigation stack, but you requested pushPage so I used that.

    Edit2: I updated the example to do just that and by doing so, you can see how the back button does not show up due to the navigation stack being empty. This would prevent a user from backing into the login page.



  • Unfortunately using ons-navigator breaks button functions.

    Login.Html

    <ons-navigator id="homeNav" page="login.html"></ons-navigator>
     <ons-template id="login.html">
    <ons-page class="pageColor">
        <ons-toolbar id="seaGreen">
            <div class="left">
            <img src="img/seaGreen.png" width="115">
            </div>
              <div class="center">
                LOGIN
            </div>  
        </ons-toolbar>
        
        <br /><br /><br />
        
        <div style="text-align:center">
            <div style="padding-bottom:10px;">
                <input id="email" type="text" placeholder="Email Address" size="25" 
                style="border-radius:10px; height:28px;">
            </div>
            
            <div style="padding-bottom:10px;">
                <input id="pwd" type="password" placeholder="Password" size="25" 
                style="border-radius:10px; height:28px;">
            </div>
        <ons-button id="signInButton" onclick="Login()">SIGN IN</ons-button>
        </div>
        
        <div class="forgotPassword">
            <a href="#" ng-click="split.load('resetPassword.html')">
                Forgot Password?        
            </a>
        </div>
        
        <br/>
        
        <div style="color:white; text-align:center; font-size:16px; font-weight:bold;">
            <img src="img/line.png" width="70">
            Or sign In with
            <img src="img/line.png" width="70">
        </div>
        
        <br/>
        
        <div style="text-align:center;"><img src="img/fb-art.png" width="50" height="50">&nbsp;&nbsp;&nbsp;
        <img src="img/WeChat-Icon.png" width="50" height="50"></div>
        
        <br/>
        
        <p style="color:white; text-align:center; font-size:14px;">Don't have an account?        
            <span class="regButton">
                <a href="#" ng-click=split.load('agreement.html')>REGISTER</a>
            </span>
        </p>        
    </ons-page>   
    </ons-template>
    

    Login()

    function Login(){
    var email    = $('#email').val();
    var password = $('#pwd').val(); 
    
    if(!email || !password)
    {
        ons.notification.alert({
            message: "Please fill in all the required fields",
            title: "Field Missing",
            cancelable: false
        });       
        
        return;
    }
                
    $.ajax({
        
        url: domainName + "DriverLogin" + suffixUrl + "&driverCode=" + email  + "&driverPwd=" + password, 
        method: "POST",
        dataType:"html",
        success: function(data) { 
            var xmlDoc = $.parseXML(data);
            var $xml = $(xmlDoc);
            var result;
            $xml.find('boolean').each(function(){
                  result = $(this).text();
                  console.log(result);
                });            
            
            if(result == "true")
            {
                homeNav
                .pushPage("home.html", options);
                document.getElementById('homeNav').replacePage('home.html');
            }
            else
            {
                console.log(email);
                console.log(password);
                alert("Invalid Login");              
            }
        },    
        error: function( jqxhr, status, errorThrown ){
            ons.notification.alert({
                message: "You're not online",
                title: "Not Connected",
                cancelable: false
            });     
        }
    });    
    }
    

    all buttons no longer work with unless ons-navigator is removed



  • In this case can I just use splitter .load function to call home.html instead of using ons-navigator?

    Edit: I just managed to get this done using content.load(‘home.html’)


Log in to reply