hello guys i am new to web developping so the problem may be obvious , the popover won't show inside a form when i click on input , it works fine in the exemple but in my code it doesn't
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="text" name="name" data-toggle="popover" data-placement="right" title="Popover Header" data-trigger="focus">name</input>
enter image description here
i'm using another version of jquery for the range slider i think that might be the problem
Related
I am facing some issues. I am trying to open the confirmation box using javascript click event but getting the following error.
Uncaught TypeError: this.getUID is not a function
at Confirmation.init (VM8904 bootstrap-confirmation.js:151)
at new Confirmation (VM8904 bootstrap-confirmation.js:16)
at HTMLSpanElement.<anonymous> (VM8904 bootstrap-confirmation.js:427)
at Function.each (VM8902 jquery.js:2)
at m.fn.init.each (VM8902 jquery.js:2)
at m.fn.init.$.fn.confirmation (VM8904 bootstrap-confirmation.js:419)
at getConirmation (VM8906:19)
at HTMLDivElement.onclick (VM8987:14)
I am explaining my code below.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div onclick="getConirmation();">
<p>Envelope icon: <span class="glyphicon glyphicon-envelope" data-toggle="confirmation" data-placement="top"></span></p>
</div>
<script>
function getConirmation() {
$('[data-toggle=confirmation]').confirmation({
rootSelector: '[data-toggle=confirmation]',
// other options
});
}
</script>
</body>
</html>
Here I need when user will click on that icon the confirmation box will open on the top of that icon. Here is my plunkr code. Please help me to resolve this issue.
It seems you are using bootstrap version 3.0 + and bootstrap-confirmation doesn't support 3.0 version. So you can either downgrade your bootstrap version or use another library from here.
Bug description here.
Reading I've been testing your Plunker code, and the main problem is with the jQuery and Bootstrap versions you're using. According to boostraps-confirmation documentation, you need...
jQuery >= 1.9
Bootstrap Popover >= 3.2 (included in bootstrap.js)
I've changed to this...
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
... and works without problems.
On the other hand, to use this plugin you don't need to create the onClick event in the element where you want to apply it. Just execute the plugin to apply it to all elements that have data-toggle='confirmation'.
Putting all together...
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope" data-toggle="confirmation" data-placement="bottom"></span></p>
</div>
<script>
$(document).ready(function() {
$('[data-toggle=confirmation]').confirmation({
rootSelector: '[data-toggle=confirmation]',
});
});
</script>
</body>
</html>
NOTE: I leave the CDN just to show the versions I've used. Of course, you can download the libraries to your project if you prefer it.
TL;DR Changing the order (or removing) the Bootstrap JS affects which module works properly.
I have been looking high and low for an answer to this specific question, but nothing has quite remedied the situation..here goes.
On my page, I have the 'hamburger' dropdown menu on the left-hand side and a sign up button (to call a modal) on the right hand side using Bootstrap. Here's the JS order I call at the bottom of my footer.php:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="https://apis.google.com/js/api.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/main.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/bootstrap.min.js"></script>
By changing the order of the JS, I can get one of the two modules working. Lemme explain:
Situation #1 (using the order above): I click the mobile 'hamburger' menu and the menudrops down BUT when clicked again, it refuses to go back up (you can see it move slightly but it still stays down). I read that this is a multiple jQuery/js issue. So I went ahead and checked my header and footer.php and no other bootstrap javascripts were being called. HOWEVER, when I delete the bootstrap.min.jsthe menu toggle works like a charm. Note: The modal popup works perfectly as well.
Situation #2: By moving the bootstrap.min.jsto the top of the scripts, the menu works as expected, BUT now the signup button, when clicked, will display the modal briefly and then disappear. These issues can be resolved by removing the bootstrap.min.js again....
So my question is, is the bootstrap.js being called by any one of these other scripts? B/c the problem ceases to exist once that file is removed!
Thanks everyone for you help.
Try switching the order of your last two script files to this. Seems like bootstrap is overriding your custom script file because it is declared below it. once your remove bootstrap it seems to work like a charm
<script src="<?php bloginfo('template_directory'); ?>/assets/js/bootstrap.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/main.js"></script>
Secondly, you are using bootstrap-css for their classes but you are using main.js for toggling menu.
so both of the script are colliding with each other
either you should change your class that you're calling in main.js or you should use bootstrap.js entirely
like in bootstrap it calls the button with class="navbar-toggle" to toggle the menu
if you are using somethig like $(".navbar-toggle") in your main.js then they would interfere with each other.
For you modal problem: Since it is working for short time, it may be the case tha the modal-toggle is being called by two scripts simultaneously.
Find the modal portion in bootstrap.js and comment it out.
I have got the same issue when all my menu changed colour when I started using a new jquery / bootstrap modal. To sort this issue I have change the order and put all together at menu.php page.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap Menu Stuff-->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!--Bootstrap Modal Stuff-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<link href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" rel="stylesheet"/>
For days, I'm trying to get Datepicker functionality in my web application (based on Laravel 5.2). Can't get it to work.
In the head section of my layout file I add:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.css">
and at the bottom I have
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(function() {
$('.datepicker').datepicker();
});
</script>
In the view file I have
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
I'm seeing the date field but when I click on it, it simply tries to open the dateselector, but it appears empty (so no dates inside)
Suggestions welcome!
Note: screenshot here
As said above, it looks like you need to add bootstrap CSS to your app.
If you intend to use datepicker (or any other bootstrap elements) in more than 1 view then I would add it to your layout view, it will make life a lot easier than adding it to each file.
If you have added the files locally to your project to public/assets/css then call them with the below.
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/bootstrap.min.css')}}"/>
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/bootstrap-responsive.min.css')}}"/>
OR
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
You might need to add bootstrap.css as well. The styling of the elements in the calendar takes from that stylesheet.
Include bootstrap styles and javascript files. they are required to use bootstrap-datepicker.
I couldn't find anything that seemed to answer why my DatePicker would not work more than once on the same page. Below is the code I'm using, with most of the body content removed for clarity's sake and ease of reading:
<html>
<head>
<!-- Load jQuery from Google's CDN -->
<!-- Load jQuery UI CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<!-- Load jQuery JS -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!-- Load jQuery UI Main JS -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Load SCRIPT.JS which will create datepicker for input field -->
<script src="script.js"></script>
<link rel="stylesheet" href="runnable.css" />
</head>
<body>
<p>Pick a Date: <input type="text" id="datepicker" /></p>
<p>Pick a Date: <input type="text" id="datepicker" /></p>
<p>Date:<input type="text" id="datepicker" /></p>
</body>
Can anyone tell me why it's only working for the first instance but not the following 2?
Thanks!
You have multiple instances with an id of datepicker, and this is invalid HTML. id should be a unique field.
If you want to apply to multiple ones, make it a class:
<input type="text" class="datepicker" />
and then apply it using the class selector:
$('.datepicker').datepicker();
This will solve both the invalid HTML and multiple instances problems.
As a little extra information, the reason it works for only the first instance is because the ID selector in jQuery stops looking in the DOM for elements after it finds the first (and what should be only) match.
I'm using a time picker but I can't get to make the buttons show. Here's how the timepicker looks.
Here's how I render it.
<input type="text" class="form-control timepicker appt_time" style="width:200px;">
<script>
$('.timepicker').timepicker();
</script>
Here's how I set them in my header
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap.css">
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap-datepicker.css">
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap-timepicker.css">
<script type="text/javascript" src="/content/script/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/content/script/bootstrap.min.js"></script>
<script type="text/javascript" src="/content/script/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/content/script/bootstrap-timepicker.js"></script>
I got the css files and the js files for the timepicker
Here.
Any ideas what's causing this? Thanks!
You have got css and js files but you've missed to capture the glyphicons.
The glyphicons are responsible for showing the buttons on the timepicker.
If you can inspect your developer tools on your buttons you can see that the images seems to be missing.
Here is what i've found on the site that you have picked timepicker
Include the glyphicons png file on your site to get the images work perfect.
Hope this helps
Try script as...
<script type="text/javascript">
$("input[id$='timepicker']").timepicker({
minuteStep: 5,
showInputs: false,
disableFocus: true
});
</script>
Give an id , say id="timpick" and in call as $('#timpick').timepicker(options);