1

I need to read a data value conteined into a from a bootstrap popver.

Details:

There is a popover associated to a panel. Into the popover there is a link that fires (by onClick) a function that have to read the value of the attribute data-info contained into the panel div.

HTML code:

<div class="panel panel-success redim" data-info="informations" data-content="&lt;div onClick=&quot;modifica_appuntamento()&quot; class=&quot;text-center&quot;&gt;&lt;a href=&quot;#&quot;&gt;Get info&lt;/a&gt;&lt;/div&gt;" data-original-title="Get data from popover">
      <div class="panel-heading">Heading</div>
      <div class="panel-body">Body</div>
</div>

Jquery:

$(function() {
popoverOptions = {
html: true,
animation: true
};
$('.panel').popover(popoverOptions);
});

function modifica_appuntamento() {
  alert($(this).parent().data('info'));
}

JSFiddle: https://jsfiddle.net/fabioravizzotti/3h4vu8Ly/

Can you help me to find a solution?

Thanks.

Fabio
  • 243
  • 1
  • 3
  • 13

1 Answers1

1

First problem:

Your element selector is wrong, as .parent() in that case is actually the main .popover div and the element you're trying to get data-info from is .prev(). So you should use:

$(this).closest('.popover').prev().data('info');

Second problem:

You cannot use $(this) inside your function. Using inline onclick attribute you should pass the element to the function : 

onClick='modifica_appuntamento(this);'

then:

function modifica_appuntamento(elem) {
    $(elem)....
}

On a side note.
It's not a good practice to use javascript attributes
I'd suggest you to add a class="data-info" to the popover links and delegate click event with jQuery:

$(document).on('click', '.data-info', function(){
    alert($(this).closest('.popover').prev().data('info'));
});

JSFiddle Demo

Community
  • 1
  • 1
Artur Filipiak
  • 9,027
  • 4
  • 30
  • 56
  • Hi Artur, it works, sorry but I'm a newbie on javascript. I don't understand how you can use _.popover_ selector in closest function. A class called "popover" there is not into HTML. You get it from bootstrap template? Thanks. – Fabio Jun 15 '16 at 16:19
  • `.popover` is created dynamically by bootstrap when a *popover* appears (it's the main popover DIV) – Artur Filipiak Jun 15 '16 at 16:22