2012-11-01 14 views
6

Attualmente chiamo uno script per aggiungere in modo dinamico il contenuto al mio popover ma non è necessario effettuare questa chiamata quando un utente fa nuovamente clic per chiuderlo. È possibile ottenere lo stato e chiuderlo quando è visibile?È possibile ottenere lo stato corrente di un popover di bootstrap twitter?

Questo è quello che ho finora:

$('.knownissue').on('click', function() { 

    var info = $(this).attr('id').substr(5).split(':'); 
    var el = $(this); 

    // How do I check to see if the popover is visible 
    // so I can simply close it and exit? 

    $.post('functions/get_known_issues.php?tcid='+info[0]+'&tcdate=' + info[1], function(data) { 
     if (data.st) { 
      el.attr('data-content', data.issue); 
      el.popover('toggle'); 
     } 
    }, "json"); 

}); 
+0

È possibile trovare un indizio se si guarda [come il plug-in verifica (github)] (https://github.com/twitter/bootstrap/blob/v2.2.1/js/bootstrap-tooltip.js#L240) – Sherbrow

risposta

0

Bootstrap aggiunge e rimuove il markup per la popover in modo dinamico, quindi non vi resta che verificare l'esistenza dell'elemento.

Se si va alla pagina di esempio Bootstrap: http://twitter.github.com/bootstrap/javascript.html#popovers, è possibile alternare il loro esempio popover con il grande pulsante rosso visualizzato lì che dice "Fare clic per scegliere popover"

Questo selettore jQuery è scritto per selezionare l'elemento popover se esiste $ ('# popover'). find ('h3') .eq (5) .next(). find ('. popover')

Per verificare lo stato (esistente o no), controllare se la lunghezza del set di elementi restituiti è 0.

Quindi premere il pulsante per alternare il loro esempio di popover, quindi eseguire il comando seguente ing nella console:

TOGGLE Popover ON

console.log( 
    $('#popovers').find('h3').eq(5).next().find('.popover').length === 0 
); // false 

TOGGLE Popover OFF

console.log( 
    $('#popovers').find('h3').eq(5).next().find('.popover').length === 0 
); // true 

PS - Spero che possiate scrivere un selettore meglio dal momento che già sai che stai andando ad avere bisogno di controllare esiste la popover sulla pagina o non

EDIT: link to jsfiddle HERE

+0

Immagino di non vedere come funzionerà. Controllo l'esistenza dell'elemento e restituisce 0 per entrambi gli stati di commutazione ... – user1216398

+0

Vai qui e fai clic sul popup: http://jsfiddle.net/eLjQG/7/ Ho passato il condizionale per verificare che la lunghezza non sia uguale, quindi avverte il vero quando è aperto, falso quando non lo è. –

6
if($('.popover').hasClass('in')){ 
    // popover is visable 
} else { 
    // popover is not visable 
} 
+0

Puoi avere molti popover, fallirà se viene mostrato qualche altro popover. – Vedmant

7

Per evitare la ricerca di markup inserito dinamicamente si può fare questo:

In Bootstrap 2:

var $element = $('.element-you-added-popup-to') 
$element.data().popover.tip().hasClass('in') 
// Or if you used '.tooltip()' instead of '.popover()' 
$element.data().tooltip.tip().hasClass('in') 

In Bootstrap 3:

$element.data()['bs.popover'].tip().hasClass('in') 
$element.data()['bs.tooltip'].tip().hasClass('in') 
+5

Causa Uncaught TypeError: Impossibile leggere la proprietà 'popover' di undefined in Chrome 45. Risolto tramite $ element.data() ['bs.popover']. Tip(). HasClass ('in') –

1

gli eventi nascosti e mostrati sono disponibili nel popover bootstrap come predefinito.

$('#myPopover').on('shown.bs.popover', function() { 
 
    // do something… 
 
})

i seguenti eventi per popover bootstrap sono disponibili

show.bs.popover \t 
 
shown.bs.popover 
 
hide.bs.popover \t 
 
hidden.bs.popover

Si prega di fare riferimento alla documentazione bootstrap popovers per ulteriori dettagli

Problemi correlati