twitter-bootstrap - PopOver 引导程序和登录表单

Question

我想使用 bootstrap-popover 创建一个登录表单。

我的代码是：

<ul class="nav">
   <li><a href="#" id="idLogin" rel="popover">Login</a></li>
</ul>

这是我的脚本：

<script>    
$("#idLogin").popover({
    placement:'bottom',
    html: true,
    content: '<form class="well form-inline" method="post" action="login.php"><input type="text" id="username" name="username" class="input-medium" placeholder="username">&nbsp<input type="password" class="input-medium" id="password" name="password" placeholder="password">&nbsp<label class="checkbox"><input type="checkbox">Ricordami</label>&nbsp<button type="submit" class="ui-button-primary ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">Accedi</button></form>',
    trigger: 'manual'
}).click(function(e) {
    $(this).popover('toggle');
    e.stopPropagation();
});
</script>

该代码可以正常工作，但是当用户输入用户名或密码错误时，我想在弹出窗口中插入一条错误消息。

这可能吗？

Answer 1

我建议使用 ajax 发布您的表单，然后您可以在服务器（'login.php'）发送响应后更新弹出内容。然后你可以使用弹出框的 .data() 来改变它的内容。就像是..

  $("form").submit(function(){

       $.ajax({
       type: "POST",
       url: url,
       data: $("form").serialize()
       success: function(data)
       {
           // handle response from the php script.

           // if username/password not valid update popover content
           $('#idLogin').data('popover').options.content = 'username was not valid..<form>..</form>;

       }
     });

     return false;
 });