Bootstrap Popover not displaying - javascript

Currently I have a popover set up that is not initialing. My code is as follows:
HTML:
<div data-toggle="popover" data-placement="bottom" data-content="xyz">...</div>
JavaScript:
$(function () {
$('[data-toggle="popover"]').popover()
})
I've included everything I need to CSS and library wise and managed to replicate the issue here in a fiddle: https://jsfiddle.net/W3R3W0LF666/33rmse7m/
So far I've tried moved the initialization text to various places in the JS file to rule out any hierarchy issues

Initialize
$('[data-toggle="popover"]').popover()
Pop it
$('[data-toggle="popover"]').popover('show');

Check this one this will help you..
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link href="style.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<body>
Toggle popover
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>

I have updated your code, Check code below JSFiddle :
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'bottom'
});
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button data-toggle="popover" class="btn btn-primary" data-content="xyz">Click Me</button>

You forgot to load the external resources.
From the docs:
How popover is triggered - click | hover | focus | manual. You may
pass multiple triggers; separate them with a space. manual cannot be
combined with any other trigger.
You need to define the trigger data-trigger="hover":
<div data-trigger="hover" data-toggle="popover" data-placement="bottom" data-content="xyz">...</div>
Have a look at this fiddle.
PS: Yours actually works, but it only triggers on-click.

Just wrapped your jQuery script like this:
jQuery(function ($) {
$('[data-toggle="popover"]').popover();
});
Or if you want to load the script on document ready, then use this:
jQuery(document).ready(function($){
$('[data-toggle="popover"]').popover();
});
Reason: $ causes name-conflict between jQuery and plain-js/other-libraries hence why you have to call it differently so the browser knows that jQuery and not some other library is using it.
Here's a jsfiddle with above codes: https://jsfiddle.net/AndrewL32/33rmse7m/7/

Related

on click of folders should be inserted into the text box using node.js and jQuery

I'm trying to create a file browser app.Here on click of a folder should be inserted into the text box provided.
Suppose if I click on app folder,I want the /app folder to be inserted into the provided text box.I've followed this URL in order to make this file browser app.
My template.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>File Browser</title>
<link rel="stylesheet" href="/lib/bootstrap.min.css">
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/lib/app.css">
</head>
<body>
<div id="panelDiv">
<div class="panel-heading">
<button type="button" id="butDiv" >Browse</button>
<input type="text" name="location"/>
<span class="up">
<i class="fa fa-level-up"></i> Up
</span>
</div>
<div id="showDiv" class="panel-body">
<table class="linksholder">
</table>
</div>
</div>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/bootstrap.min.js"></script>
<script src="/lib/datatable/js/jquery.datatables.min.js"></script>
<script src="/lib/app.js"></script>
<script>
$(document).ready(function(){
$("#butDiv").click(function(){
$("#showDiv").toggle();
});
});
</script>
</body>
</html>
Can anyone please suggest me regarding this issue ...
Since you're using jquery already I would say the easiest would set the jquery event click for the folders to select the text input element and use the .val () function to set your new value so it would look something like this
$(".folder selector").click (function (){
$(".textbox selector").val ("/"+this.text());
});
I'm not sure if the value function works on input elements but if not you could change it to a <textarea></textarea>

twitter bootstrap - JS not working

this is probably really stupid question.
I love boostrap and using it CSS styling for pretty long time, how ever when i try to use any of their JS things it's not working for me.
I always make sure I have this in my tag but still
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
It looks i am completly blind or i don't know what I am always doing wrong. Is there a chance somebody can help me with that?
Thanks.
Example code:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Audatex History</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</body>
</html>
You are missing JQuery
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
Note: Include it before the bootstrap JS.
And you must initialize
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
Note: Include it before the end tag head.
Bootstrap relies on jQuery. Include it before you include the bootstrap JS.

bootstrap javascript requires jquery error

This is my .cshtml code
<!DOCTYPE Html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>welcome</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.0.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
</head>
<body>...</body>
</html>
Whenever I execute my code it gives the bootstrap requires jquery error. Please suggest what should I do to remove this error.
Make sure that the path is correct and points to jQuery version greater than 1.9
You are using 1.8 which is not compatible with bootstrap
Source:
https://github.com/twbs/bootstrap/blob/v3.1.1/bower.json
Just as Amit Joki said, make sure you link points directly to the jquery file and
the file name is spelt accordingly.
Also ensure that you link jquery js script before you link to the bootstrap js script
<script src="path_to_script/jquery-1.8.0.min.js"></script>
<script src="path_to_script/bootstrap.js"></script>
<link href="path_to_script/bootstrap.css" rel="stylesheet" />

Cannot get Bootstrap.min.js to function correctly

I'm at my wits end right now trying to get bootstrap.min.js to work. I have bootstrap.min.js hosted on my server in bootstrap-3.1.1-dist/js/
In my header I have
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Rochester Michigan Computer Repair and Web Design">
<title>Tony Weed - Michigan IT Services</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<link href="bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
I'm trying to call a tooltip using
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
but I just cannot get it to work. I've been staring at this for the past few hours and I'm thinking it's something that I'm overlooking. I'm hoping a second set of eyes will help.
Would my web host have anything to do with this perhaps? I'm running through ipage
From the bootstrap tooltip docs:
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
You will need to call:
$('[data-toggle="tooltip"]').tooltip();
Also you should initiate the tooltip after the DOM is loaded.
Wrap your JS code in jQuery.ready
You are calling initialization of plugin before any of these targeted elements is available in the DOM. You could just wrap it inside document ready handler:
$(function () {
$('li[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
});
});
You should really have provided more context in your question, this would have been fixed in few seconds...
I'm not sure if it will fix the problem but the script should be at the bottom of the page instead of in the the <head>

window.onbeforeunload not working in second page

Hi I have two html pages in my mobile application as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Index
</div>
</div>
</body>
</html>
my example.html is like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Test
</div>
<script type="text/javascript">
window.onbeforeunload = function(evt) {
console.log ("*****************");
}
</script>
</div>
</body>
</html>
Now suppose on click of Index button I goes to example.html page. on click of back button in example.html it again goes to index.html. everything is fine, but it does not print console.log ("********"); If i press one more back on index.html then it prints it, what I want is it should print that on click of back button when I am on example.html.
Whats wrong in above code? and why it behave like this? Any suggestion will be appreciated thanks in advance.
In Jquery Mobile standard use you basically stay on the same page during your hole experience on the site. "Changing" page basically adds content dynamically to the current document, meaning it will not trigger your onbeforeunload event.
You can however use jquery mobile events, which one depends on exactly what kind of action you want to take. Most probably you would be looking at pagebeforehide or pagehide
What you can do is add an event to the back button.
If you have a button :
<button id="backButton"> Go Back </button>
you can add via jquery following event
$("#backButton).click(function(){
console.log ("*****************");
});
Keep in mind, if you click a button, a post will happen and the page will be refreshed. So you should add the log function inthe document ready of the other page.
So if the example.html page loads, you just fire this event
$(function(){
//All code that starts when the page is fully loaded.
console.log ("*****************");
});

Categories