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')가 응답을 보내면 팝업 내용을 업데이트 할 수 있습니다. 그런 다음 popover의 .data()를 사용하여 'content'를 변경할 수 있습니다. 뭔가 같은 ..

$("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; 
});