单击“提交”按钮时,它将使用“ Meteor”动态加载**的同一窗口**导航到新页面



我尝试在单击表单上提交按钮它导航到新页面,带有相同窗口,但它并未加载它详细信息,但它导航到该页面。我正在发送我的代码,请帮助我。

html页

<head>
  <title>sample</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
    {{> header}}    
    {{> body}}        
    {{> footer}}
</div>
<div class="row-fluid">
   {{render-Router}}
</div>
</body>
<template name="header">
    <header>
        <div class="header"> 
        <a  href="http://localhost:3000/"><img  src="./logo.png" style="height:100px;width:200px;"/></a>
    </div>
    </header>
</template> 
<template name="body">
  <div class="bgbody">
     <div align="center">
    <form id="login-form" action="/admindetails">
        <table>
        <p class="admin">Admin Login</p>
        <tr>
           <td><p for="username">Admin Name</p></td>
           <td><input type="text"  id="username" name="username"  placeholder="UserName"></td>
        </tr>
        <tr>
               <td><p for="password">Password</p></td>
           <td><input type="password" id="pwd" name="password"  placeholder="password"></td>
        </tr>
            <td></td><td><input class="btn btn-success" type="submit" value="Log In"></td>
        <td><input class="btn btn-capsule" type="button" value="New User"></td>
        </table>
    </form>
     </div>
  </div>
</template>
<template name="footer">
    <div class="footer">
        <div style="padding:20px;">
        <div class="footerlinks"><a href="#"><p>AboutUs</p></a></div>
        <div class="footerlinks">|</div>
        <div class="footerlinks"><a href="#"><p>ContactUs</p></a></div>
        <div class="copyright"><p>Copyright@Healt_Care</p></div>
        </div>
    </div>
</template>

客户端代码:

if (Meteor.isClient) {
  Meteor.Router.add({
    '/admindetails':'admindetails'
    })
  Template.body.events
  ({
    'submit #login-form' : function (e,t)
 {
      /* template data, if any, is available in 'this'*/
      if (typeof console !== 'undefined')
        console.log("You pressed the button");
         e.preventDefault();
  /*retrieve the input field values*/
         var email = t.find('#username').value
         , password = t.find('#pwd').value;
           console.log(email);
   Meteor.loginWithPassword(email, password, function (err)
    {
    if (err) 
    {
      console.log(err);
      alert(err.reason);
      Session.set("loginError", true);
     }
     else
     {
       console.log(" Login Success ");
       Meteor.Router.to("/admindetails");
     }
    });
    }
  });
}

您自己管理提交事件,因此无需设置表单的action参数。设置该参数会导致浏览器在提交时加载目标页面。只需删除参数,事物应按预期工作。

最新更新