问题描述:

I have started using the popover feature of twitters bootstrap and I have a question.

I have a button which has the popup on it, and onclick it fires a javascript function. This function does an ajax call so takes a bit of time to complete (its not instant).

The result of this call defines the inner html of the header and body of the popup.

Now this works great, apart from the fact that the popup shows first with the default properties then changes when my javascript tells it too (after completing the ajax call).

How can I make the popover only show on the completion of the ajax call?

Currently I load the popup on document load (with a function to hide it after a couple of seconds)

 <script type="text/javascript">

$(document).ready(function () {

$('#Popup').popover().click(function () {

setTimeout(function () {

$('#Popup').popover('hide');

}, 5000);

});

});

</script>

This is the button

<button onclick="submitContent()" class="btn btn-lg btn-primary btn-block" type="submit" id="Popup" data-toggle="popover" data-placement="top" title="title goes here" data-content="body content goes here" role="button">Post</button>

Finally this is my javascript function with the ajax call

 function submitContent() {

var txtbox = document.getElementById("TextContent");

var message = { 'like': txtbox.value };

$.ajax({

type: 'GET',

url: '/Home/Post',

data: message,

dataType: 'json',

success: function (data) {

if (!data.error) {

document.getElementsByClassName("popover-title")[0].innerHTML = "Success!";

document.getElementsByClassName("popover-content")[0].innerHTML = "Your Like has been posted!";

UPDATE I have made a JSFiddle for this example

JSFiddle Example

Its pretty quick to see because there isn't much waiting time for the response from the AJAX call. However you can still see it. Imagine that increased with a slow internet connection

UPDATE 2

I am now having the same issue with the Modal control. the Modal is showing then after a second it shows the content. Its more pressing in this scenario because if the internet connection has died while on the page, the popup will show as blank but never load the content

网友答案:

how about defining the element as a popover after ajax has completed, then removing.

<input id="TextContent" name="TextContent" type="text"  value=""><button onclick="submitContent()" class="btn btn-lg btn-primary btn-block" type="submit" id="Popup" data-placement="bottom" role="button">Post</button>

function submitContent() { var txtbox = document.getElementById("TextContent");

var message = { 'like': txtbox.value };

$.ajax({
    type: 'GET',
    url: '/echo/json',
    data: message,
    dataType: 'json',
    success: function(data) {
        if (!data.error) {
            $('#Popup').attr('data-toggle', 'popover').attr('data-original-title', 'Success!').attr('data-content', 'This post was successful');
            $('#Popup').popover('show');
        } else {
            $('#Popup').attr('data-toggle', 'popover').attr('data-original-title', 'Also Successful!').attr('data-content', 'This post is Different');
            $('#Popup').popover('show');
        }
    },
    error: function(data, error) {
        $('#Popup').attr('data-toggle', 'popover').attr('data-original-title', 'Error!').attr('data-content', 'This post encountered an Error');
        $('#Popup').popover('show');

    }
});
$(document).ready(function () {
$('#Popup').popover().click(function() {
    setTimeout(function() {
        $('#Popup').popover('hide').removeAttr('data-toggle').removeAttr('data-original-title').removeAttr('data-content');
    }, 1000);
});})
相关阅读:
Top