Bootstrap Popover скрыт до завершения функции javascript

Я начал использовать функцию popover twitter bootstrap, и у меня есть вопрос.Bootstrap Popover скрыт до завершения функции javascript

У меня есть кнопка, на которой есть всплывающее окно, и onclick он запускает функцию javascript. Эта функция выполняет вызов ajax, поэтому требуется некоторое время для завершения (ее не мгновение).

Результат этого вызова определяет внутренний html заголовка и тела всплывающего окна.

Теперь это отлично работает, кроме того, что всплывающее окно сначала показывает свойства по умолчанию, а затем изменяется, когда мой javascript также сообщает об этом (после завершения вызова ajax).

Как я могу сделать popover только показом по завершении вызова ajax?

В настоящее время я загружаю всплывающее окно документа нагрузки (с помощью функции, чтобы скрыть его через пару секунд)

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#Popup').popover().click(function() { 
       setTimeout(function() { 
        $('#Popup').popover('hide'); 
       }, 5000); 
      }); 
     }); 
    </script>

Это кнопка

<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>

Наконец это моя Java-функция на основе AJAX вызова

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 Я сделал JSFiddle для этого примера

JSFiddle Example

Его довольно быстро, чтобы увидеть, потому что там не так много времени ожидания ответа от вызова AJAX. Однако вы все еще можете это увидеть. Представьте себе, что увеличение с медленным подключением к Интернету

UPDATE 2

я теперь имею тот же вопрос с контролем модального. Модаль показывает, что через секунду он показывает содержимое. Это более актуально в этом сценарии, потому что, если интернет-соединение умерло на странице, всплывающее окно будет отображаться как пустое, но никогда не загружает содержимое

источник

2014-01-17 MichaelMcCabe

Можете ли вы показать демонстрацию в скрипке? –

Добавлен пример в JSFiddle – MichaelMcCabe

Вы можете запустить ajax при нажатии кнопки, а затем создать всплывающее окно, когда у вас уже есть данные. Однако это может показаться невосприимчивым, когда есть более высокие времена загрузки - тогда вы можете просто создать popover с анимацией spinner или «Please wait ...» без текста «ошибка», предварительно заполненного и заменяющего его данными, когда у вас есть Это. – xjedam

как насчет определения элемента как popover после завершения ajax, а затем удаления.

<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>

функция submitContent() { вар 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); 
});})

источник

2014-01-28 22:37:41

Bootstrap Popover скрыт до завершения функции javascript

ответ

Смежные вопросы