0

I am pretty new in Twitter BootStrap and I have the following problem.

I am trying to implement this example into a JSP page: http://www.w3schools.com/bootstrap/bootstrap_popover.asp

So I have simply added this code into the JSP page:

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

And thene I have added this JQuery function into a JavaScript file imported into the previous JSP page:

$('[data-toggle="popover"]').popover();

The problem is that it can't work and when I click on the button the popover window is not shown, in the URL I have http://localhost:8080/WIFIPNSD/validazione# and the page is scrolled to the top.

Why? What am I missing? How can I fix this issue and show this popover window?

AndreaNobili
  • 40,955
  • 107
  • 324
  • 596
  • Do you have any errors in your console? Also, the reason it jumps to the top is that the href is `#`. – DavidG Oct 02 '15 at 14:15
  • @DavidG no error...no error when the page is loaded, no error when the button is clicked. Simply seems that the Jquery script defined is not performed – AndreaNobili Oct 02 '15 at 14:34

1 Answers1

0

That link is inaccessible because it's pointing to your local network. Please use JSFiddle or similar or post your whole code so we can see exactly what's going wrong.

Possible issues / solutions:

  1. Your code is executing before the DOM is ready. Try wrapping it in $(function() { /* YOUR CODE HERE */ });
  2. You didn't include the resources. Make sure that you have jQuery and bootstrap tags in the of your document so you can utilize these tools. Also be sure to include the bootstrap stylesheet. See the example from the page you listed to see what you should include in the ([1]: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h "link")
  3. The popover is displaying behind your other elements. Be sure the z-index for the popover element is higher than the other elements on your page.
Adam Mazzarella
  • 763
  • 1
  • 7
  • 14
  • I can't add my code because it is a very big JSP page and a very big .js file. By the way: 1) The code is performed into the function defined into the ready() that I use for all the other JQuery code. 2) The .js file is correctly included (the other scripts works fine). 3) What wxactly do you mean? I have no z-index setted in my page – AndreaNobili Oct 02 '15 at 14:32
  • @AndreaNobili Try opening your developer console to see if the script has any unhandled errors. It's possible the code you are trying to execute is not reached by the compiler because it is erroring-out beforehand. The developer console can usually be reached by pressing 'F12' and clicking the "Console" tab in the inline window that opens. Here is a simple fiddle that shows it working: http://jsfiddle.net/y2f2qxey/ – Adam Mazzarella Oct 02 '15 at 14:50
  • i done but I have no error message. Simply it dont' perform the method. It seems that the selector don't work – AndreaNobili Oct 02 '15 at 14:52
  • It is very strange !!! If I select using an ID and if I remove the href it works fine !!! Some idea about why? – AndreaNobili Oct 02 '15 at 14:56