I'm having some trouble getting the typeahead working in Bootstrap, and I've boiled the problem down to this short example. (I'm new to Bootstrap.) When I type in the input, no typeahead suggestions appear. Any ideas why this isn't working?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<label for="primaryCustName">Name:</label>
<input type="text" data-provide="typeahead" data-source="['Bob','Jim','Sue']" class="form-control" id="primaryCustName">
</div>
</body>
</html>
The typeahead function was removed from Bootstrap in v3. According to #mdo it was dropped "in favor of folks using Twitter's typeahead. Twitter's typeahead has more features than the old bootstrap-typeahead.js and less bugs."
Your two options from here are:
Use a port of Bootstrap v2 Typeahead, you can find one here.
Use Twitter Typeahead which can be found here.
Related
I am looking at working with Foundation controls in ASP.Net Core. The controls which use JavaScript don't work - they don't produce errors but they don't do things like move or drop down. The other controls work fine.
Here is the source of one of them. I have added all the JavaScript libraries though some may be referenced by others. The control is displayed but does not move.
I don't know what is missing unless the code needs to be wrapped in other tags.
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/Content/foundation.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
</head>
<body>
<div class="slider" data-slider data-initial-start="50" data-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden">
</div>
<script src="/Scripts/jquery-3.4.1.js"></script>
<script src="/Scripts/foundation.js"></script>
<script src="/Scripts/plugins/foundation.core.js"></script>
<script src="/Scripts/plugins/foundation.slider.js"></script>
<script src="/Scripts/plugins/foundation.util.motion.js"></script>
<script src="/Scripts/plugins/foundation.util.triggers.js"></script>
<script src="/Scripts/plugins/foundation.util.keyboard.js"></script>
<script src="/Scripts/plugins/foundation.util.touch.js"></script>
<script src="/Scripts/plugins/foundation.accordionMenu.js"></script>
<script src="/Scripts/plugins/foundation.util.nest.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
fixed. The issue was that I should have just linked to foundation.js. However, the "no-js" is not needed but you have to add the "$(document).foundation();" into your source file just before the tag as I have above.
I'm working on a simple cms app but I can't get the Full Calendar plugin to display the calendar. I've followed the steps that I found online and nothing has worked. I've been trying to solve this problem for a week and can't figure it out. I've checked the console for errors and it looks good.
So I wanted to reach out. My app is built in PHP, my code is included below. I've linked to everything and the jquery is working.
The code for the calendar I've included in the head section.
<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="">
<meta name="author" content="">
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.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/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="css/admin-main.css">
<title>CMS</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
weekends: true
});
});
</script>
</head>
In the HTML on the calendar page I have this included.
<div id="calendar"></div>
Any help would be greatly appreciated! Thanks!
I know this question is old and you may have already found the solution, however, i will give my answer to help anyone else that may be running into the same issue.
I found that when the console is giving you the error that fullcalendar is not a function and your code seems to be correct, its for the following reason.
If you are using bootstrap, you need to remove the Jquery link provided in the bootstrap starter template. You have already loaded jquery in the header, by doing it again in the body, it is creating the error.. I hope it helps!
You have an extra ) on .fullCalendar(), should be:
$('#calendar').fullCalendar({
//options
});
Example below:
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
weekends: true
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.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/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<div id="calendar"></div>
i try to learn angular js.
i try a simple code in the html like this
<!DOCTYPE html>
<html lang="en" ng-app="">
<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>Title Page</title>
<link rel="stylesheet" href="bootstrap.min.css" >
</head>
<body>
<input type="text" ng-model="name">
<div>hello{(name)}</div>
<!-- jQuery -->
<script src="https://cdnjs.com/libraries/angular.js/"></script>
</body>
</html>
the result when i run it on web browser is an error. it didnt work
the error on console is like this
Uncaught ReferenceError: System is not defined on line 2
how come i get error like this?
You cannot include all the https://cdnjs.com/libraries/angular.js/ page, you need to choose which script you want to include, something like:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
Also, it is {{name}} (two curly braces), not {(name)}
<!DOCTYPE html>
<html lang="en" ng-app="">
<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>Title Page</title>
</head>
<body>
<input type="text" ng-model="name">
<div>hello {{name}}</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</body>
</html>
This is pointing to the AngularJS CDN page:
<script src="https://cdnjs.com/libraries/angular.js/"></script>
You should select a version. For example Minified AngularJS version 1.5.8:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
Notice that you should exclude the https.
Also check that to print out a variable in AngularJS you should use {{ name }} instead of {(name)}.
There are at least two points that need to be highlighted here.
Your import. The other answers are describing perfectly why it does not work. Fix it.
Angular itself. Angular works with applications and controllers (for its simplest part). What you need to do is to make a file which will contain your controller. For example, create a file called myapp.js and import it into your web page:
<script src="path/to/myapp.js"></script>
Then, once you initialized your application (var myApp = angular.module('myApp',[]); will do the trick perfectly) and controller (check the AngularJS documentation about it), you'll be able to intialize your data with your scope:
$scope.name = 'John';
Call your application in your HTML page:
<html ng-app="myApp">
And you'll be able to see the magic working there:
hello {{ name }} // and not {( name )}
Your web browser should actually display:
hello John
I have a page that uses jquery and is working perfectly. The JQuery is located inside two files: control.js and lightgallery.js. The minute I add in AngularJS all of my jquery stops working. I need to find a way to have my jquery work without learning how to rewrite all of the functions in angular. Any suggestions?
None of the html I've added with the ngInclude is using angular. It's just simple html.
<!DOCTYPE html>
<html ng-app="">
<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>H</title>
<!-- STYLESHEETS -->
<link rel="stylesheet" href="/assets/common/css/split.css">
<link rel="stylesheet" href="/assets/common/css/control.css">
<!-- JQUERY -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/assets/common/js/bootstrap.min.js" type="text/javascript"> </script>
<script src="/assets/common/js/control.js" type="text/javascript"></script>
<!-- ANGULAR -->
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body id="home">
<div ng-include="'../assets/includes/left-panel.html'"></div>
<!-- / START TEMPLATE -->
<div ng-include="'../assets/includes/template.html'"></div>
</body>
</html>
Here is what is happening:
Your jQuery code probably runs on document ready:
$(function(){
//your initialization code here
});
The problem is that the elements in your templates that your jQuery plugins are targeting are not yet added to the DOM when this function runs. This is because Angular has not yet inserted these templates into the DOM.
You can verify this by removing the ng-includes and replacing them with the markup contained in the templates themselves (bypassing ng-include).
This is a classic "mistake" when using Angular along with jQuery plugins.
The only "correct" way to integrate jQuery plugins with Angular is to wrap the plugins in a directive.
i'm using sublime text 3 and i've tested other jQuery UI elements but decided to try using date picker today with a small project i'm putting together. I notice that when I wanted to try it out I first saved the default code from the example on jQuery's site locally in it's own .html file, then I tried to load it up.
default code from example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date:
<input type="text" id="datepicker">
</p>
</body>
</html>
unfortunately, this brings up an input field but, on clicking into the field, i get no ability to select a date. In fact the date selection dropdown doesn't show up at all but I can tell that the input field has been selected. I thought perhaps I had left something out when copying the code over to my test file so I loaded up JSBin and pasted the code there. Magically, it works. JSBin exampleI'm assuming i'm somehow not linking to the appropriate style sheet or the CDN for the jQuery UI. Is that assumption correct or why isn't this working locally?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
P.S- I have removed link to css file as it might have been your local css file. You can add that back.