Search code examples
meteoriron-router

Meteor Html pages appearing in single window


I am trying to use iron router to route the html pages on click events.But as I run the application, all pages appear in the main page itself, whereas the click event doesn't route the page needed.The JS code as below

    Template.Login.events({
    'submit form': function(){
    event.preventDefault();
    var username = $('[name=userId]').val();
    var password = $('[name=password]').val();
    if(username == '' && password ==''){
        alert("Please fill all fields...!!!!!!");
    }
    else if( username =='deal' && password ==''){
        alert("You are logged in as a Deal manager");
        Meteor.Router.to("/dashboard");

    }
    else if( username =='practice' && password ==''){
        alert("You are logged in as a Practice manager");
        Meteor.Router.to("/pracDashboard");
    }
    }  
    });

As in the above is a login page with conditions as 'deal' or 'practice' to route to different pages.The moment I place the dashboard.html in the folder, both the login and dashboard page appear in the same window.


Solution

  • For displaying a page we should convert the html page in template form. Let say login.html is as follows

    <html>
        <title>Sample title</title>
        <body>Sample Text</body>
    </html>
    

    for meteor the html page should be like this

    <template name="login">
         Sample Text
    </template>
    

    Then for displaying login page we need to implement Route like this

    Router.route('/login', function (){
        this.render('login.html');
    });
    

    So set Router first then in events during submit redirect.

    Router.route('/dashboard', function (){
        this.render('dashboard.html');
    });
    
    Router.route('/pracDashboard', function (){
        this.render('pracDashboard.html');
    });
    
    Router.route('/login', function (){
        this.render('login.html');
    });
    
    Template.login.events({
        'submit form': function(){
            event.preventDefault();
            var username = $('[name=userId]').val();
            var password = $('[name=password]').val();
            if(username == '' && password =='') {
                alert("Please fill all fields...!!!!!!");
            } else if( username =='deal' && password =='') {
                alert("You are logged in as a Deal manager");
                Router.go("/dashboard");
            } else if( username =='practice' && password ==''){
                alert("You are logged in as a Practice manager");
                Router.go("/pracDashboard");
            }
        }  
    });