PopOver引導程序和登錄表

Question

我想創建一個使用引導程序彈出窗口的登錄表單。

我的代碼是：

<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; 
});