Cómo actualizar bootstrap ventana emergente de texto?

Estoy usando bootstrap-ventana emergente para mostrar un mensaje al lado de un elemento.

Si quiero mostrar distintos tipos de texto en la ventana emergente después de la primera vez, el texto no cambia. Volver a instancias de la ventana emergente con el texto nuevo no sobrescribir.

Ver este js violín para un ejemplo en vivo:

http://jsfiddle.net/RFzvp/1/

(El mensaje de la alerta y el mensaje en el dom es incoherente después de que el primer clic)
La documentación es un poco de luz sobre cómo desenlazar: http://twitter.github.com/bootstrap/javascript.html#popovers

Estoy utilizando esta mal? Las sugerencias sobre cómo evitar?

Gracias

InformationsquelleAutor Chris | 2012-04-19

7 Kommentare

  1. 55

    Hola por favor consulte trabajo demo aquí: http://jsfiddle.net/4g3Py/1/

    He hecho los cambios para obtener el resultado deseado. 🙂

    Creo que usted ya sabe lo que están haciendo, pero algunos ejemplos de recomendaciones de mi parte como de la siguiente manera por ejemplo: http://dl.dropbox.com/u/74874/test_scripts/popover/index.html# – compartir este enlace para dar una idea para diferentes vínculo con diferentes pop-over si usted va a ver el origen de aviso atributo data-content pero lo que quiero es trabajar por los cambios siguientes.

    Tener una buena y espero que esto ayude. D’uh no olvide hasta de votar y aceptar la respuesta 🙂

    Código Jquery

    var i = 0;
    $('a#test').click(function() {
        i += 1;
    
        $('a#test').popover({
            trigger: 'manual',
            placement: 'right',
            content: function() {
               var message = "Count is" + i;
                 return message;
            }
        });
        $('a#test').popover("show");
    
    });​

    HTML

    <a id="test">Click me</a>
    
    • 😛 @Chris usted bruv son una leyenda innit :), me alegro de que ayudó a!
    • La MAGIA! Me he registrado en ASÍ que después de mucho tiempo :) para este comentario, NO te preocupes hombre! Me alegro de que te ayudó bruv! lol
    • Me alegro de que ayudó a :)
    • Gracias ayudó mucho, tuve un problema con $('#search').popover('destroy'); no funciona, y parece que la razón fue el uso de $('#search').popover('toggle'); en lugar de $('#search').popover('hide'); y trigger: 'manual', sin embargo a pesar de su demo funciona, en mi caso sólo funcionaba con un $('#search').popover('destroy'); llamada
    • Tenga en cuenta que usted no puede usar esto con un contenido predeterminado a través de los datos de atributo, se tomará siempre el contenido predeterminado.
  2. 78

    Puede acceder a las opciones directamente usando el jquery datos de cierre del diccionario como este:

    $('a#test').data('bs.popover').options.content = 'new content';

    Este código debería funcionar bien, incluso después de la primera inicialización de la ventana emergente.

    • uno agradable. Tuve que hacer también un $(this).popover('show'); para una ventana emergente que ya era visible para actualizar
    • En bootstrap 3 el espacio de nombres es cambiado: se tiene que: $(‘#a prueba’).de datos(‘bs.ventana emergente’).opciones.contenido = ‘nuevo contenido’;
    • habría sido agradable si había mantenido el antiguo espacio de nombres y acaba de agregar una nueva. parece BS2 simplemente no tenía espacio de nombres, por lo que es .data('popover'),options.content = "new content"
    • Esto también es muy útil pero supongo que cuando bootstrap en sí permite la colocación de función en lugar de una referencia estática, entonces ¿por qué usar un hack??
    • YZ: ¿a Qué te refieres exactamente? por favor, puedes sugerir una alternativa?
    • Considere la posibilidad de la aceptación de la respuesta. En que la solución es el uso de una función que devuelve algo que obligaría a bootstrap ventana emergente para cargar dinámicamente los datos en la ventana emergente contenido en vez de usar el conexión de conseguir una cadena estática. La forma en que usted sugiere es manipular data- atributos que funciona perfectamente, pero no estándar cuando bootstrap proporciona funciones en la ventana emergente de contenido.
    • YZ: veo que no hay problema, para el OP el caso de una función es la adecuada, pero mi solución es a veces mucho más simple en algunos otros casos de uso.
    • Usted es el rey @RabihKodeih !
    • YZ: Al revisar tu comentario, ahora me admitir que yo no entiendo lo que quieres decir. Por favor, puedes elaborar más y si es posible, sugerimos una solución? ¿Crees que toda respuesta es perjudicial? Apenas estoy aprendiendo a no juzgar. Gracias.

  3. 23

    sólo en caso de que alguien la está buscando una solución que no se trata de re-crear instancias de la popover y sólo desea cambiar el contenido html, eche un vistazo a esto:

    $('a#test').data('popover').$tip.find(".popover-content").html("<div>some new content yo</div>")

    Actualización: En algún momento entre esta respuesta está escrita y Bootstrap 3.2.0 (sospecho que en el 3.0?) esto cambió un poco, a:

    $('a#test').data('bs.popover').tip().find ............
    • Esto me ayudó porque yo necesitaba actualizar una ventana emergente durante un evento keyup que la respuesta en esta página no la dirección. Gracias!
    • tenga en cuenta que tan pronto como se cierre y vuelva a abrir la ventana emergente el contenido seguirá siendo el original. Para asegurarse de que el contenido será uno nuevo cada vez que la ventana emergente que se abre, usted debe también incluir la sugerencia de @user698585
    • Cuando he cambiado el contenido y, a continuación, mostrar la ventana emergente, todavía me mostró el original. He cambiado el orden. Me mostró la ventana emergente y, a continuación, cambiar el contenido, me mostró el nuevo. Alguna idea de por qué?
  4. 16

    Vieja pregunta, pero ya me doy cuenta de que la respuesta no ofrece de manera correcta, y esta es una pregunta común, me gustaría actualizarlo.

    Utilizar el $("a#test").popover("destroy");-método. El violín aquí.

    Esto va a destruir la vieja ventana emergente y le permiten conectarse a uno nuevo de nuevo de la forma habitual.

    Aquí un ejemplo en el que puede hacer clic en un botón para establecer una nueva ventana emergente en un objeto que ya tiene una ventana emergente adjunta. Ver violín para más detalles.

    $("button.setNewPopoverContent").on("click", function(e) {
        e.preventDefault();
    
        $(".popoverObject").popover("destroy").popover({
            title: "New title"
            content: "New content"
        );
    });
    • Gracias, ha sido la búsqueda de horas para esto.
    • Mi versión de bootstrap no tiene «destruir» método. Quizás lo que ha cambiado?
  5. 8

    La cuestión es más de un año de edad, pero tal vez esto sería útil para los demás.

    Si el contenido es sólo para cambiar la ventana emergente que está oculto, la forma más sencilla que he encontrado es usar una función y un poco de código JS.

    Específicamente, mi HTML parece:

    <input id="test" data-toggle="popover"
           data-placement="bottom" data-trigger="focus" />
    <div id="popover-content" style="display: none">
      <!-- Hidden div with the popover content -->
      <p>This is the popover content</p>
    </div>

    Tenga en cuenta que no hay datos de contenido se especifica. En JS, cuando la ventana emergente se crea una función que se utiliza para el contenido:

    $('test').popover({
        html: true,
        content: function() { return $('#popover-content').html(); }
    });

    Y ahora usted puede cambiar en cualquier lugar de la ventana emergente-div de contenido y la ventana emergente se actualizará la próxima vez que se muestra:

    $('#popover-content').html("<p>New content</p>");

    Supongo que esta idea también se trabajará el uso de texto sin formato en lugar de HTML.

    • Esto realmente funciona para mí. También tuve otro caso en el que quiero hacer algo en el objeto primario ANTES de mostrar la ventana emergente, así que lo hice usando una técnica similar. En mi caso, he utilizado una antigua función JS que hace todo el trabajo pesado, por ejemplo, el contenido: getDeleteMissionNodeContent. La función de este objeto que representa el botón pulsado, así que he usado $(this). para conseguir que el botón y $(this).más cercano(‘selector’) para encontrar a su padre y a manipularlos. Las grandes obras.
  6. 3

    Siempre se puede modificar directamente el DOM:

    $('a#test').next(".popover").find(".popover-content").html("Content");

    Por ejemplo, si desea una ventana emergente que va a cargar algunos datos de una API y mostrar que en la ventana emergente del contenido en hover:

    JS:

        $("#myPopover").popover({
            trigger: 'hover'
        }).on('shown.bs.popover', function () {
            var popover = $(this);
            var contentEl = popover.next(".popover").find(".popover-content");
            //Show spinner while waiting for data to be fetched
            contentEl.html("<i class='fa fa-spinner fa-pulse fa-2x fa-fw'></i>");
    
            var myParameter = popover.data('api-parameter');
            $.getJSON("http://ipinfo.io/" + myParameter)
            .done(function (data) {
              var result = '';
              if (data.org) {
                result += data.org + '<br>';
              }
              if (data.city) {
                result += data.city + ', ';
              }
    
              if (data.region) {
                result += data.region + ' ';
              }
              if (data.country) {
                result += data.country;
              }
              if (result == '') {
                result = "No info found.";
              }
              contentEl.html(result);
            }).fail(function (data) {
              result = "No info found.";
              contentEl.html(result);
            });
        });

    HTML:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <a href="#" id="myPopover" data-toggle="popover" data-title="IP Details" data-api-parameter="151.101.1.69">Hover here for details on IP 151.101.1.69</a>

    Esto supone que confiar en los datos proporcionados por la API. Si no, usted tendrá que escapar de los datos devueltos para mitigar los ataques de XSS.

    • Me gusta tu concepto de @alexw; pero no está trabajando con Bootstrap 4. Cualquier idea de lo que necesita ser actualizado? jsfiddle.net/jrcafk6w
    • El cambio de la línea 5 a: var contentEl = $(«.ventana emergente»).find(«.ventana emergente de cuerpo»); parece, a continuación, trabajar para el Bootstrap 4
  7. 0

    He encontrado Bootstrap ventana emergente contenido no se puede modificar de forma dinámica que introduce la setContent función. Mi código (esperemos útil a alguien) es por lo tanto:

    (Teniendo en cuenta que jquery datos() no es tan bueno en la configuración como se está haciendo)

    //Update basket
    current = $('#basketPopover').data('content');
    newbasket = current.replace(/\d+/i,parseInt(data));
    
    $('#basketPopover').attr('data-content',newbasket);
    $('#basketPopover').setContent();
    $('#basketPopover').$tip.addClass(popover.options.placement);

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Recent Articles

Python «set» con duplicados/elementos repetidos

Hay una forma estándar de representar un "conjunto" que puede contener elementos duplicados. Como yo lo entiendo, un conjunto tiene exactamente un cero o...

Python: generador de expresión vs rendimiento

En Python, ¿hay alguna diferencia entre la creación de un generador de objetos a través de un generador de expresión versus el uso de...

Cómo exportar/importar la Masilla lista de sesiones?

Hay una manera de hacer esto? O tengo que tomar manualmente cada archivo de Registro? InformationsquelleAutor s.webbandit | 2012-10-23

no distingue mayúsculas de minúsculas coincidentes en xpath?

Por ejemplo, para el xml a continuación <CATALOG> <CD title="Empire Burlesque"/> <CD title="empire burlesque"/> <CD...