Why adding dependency causes error in AngularJS? - javascript

Working on a web app i am implementing routes , i have added route CDN and when i added ngRoute as a dependency to myApp it is not working now.Before adding ngRoute viewproducts was working fine but now what i am seeing is :
{{product.name}} {{product.company}} and not the actual values.
Module CODE :
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider.
when('/addproduct', {
templateUrl:'addproduct.html',
controller:'myController'
})
});
Controller CODE :
myApp.controller("myController",function($scope,$http){
$scope.insertData = function(){
$http.post("addProduct.php",{'pname': $scope.productname,'company': $scope.company,'price': $scope.price,'quantity':$scope.quantity})
.success(function(data,status,headers,config){
$scope.successMessage = "Inserted Successfuly!";
});
}
});
HTML CODE:
<!DOCTYPE html>
<html ng-app="myApp">
<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>Dashboard</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:700, 600,500,400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="js/angular/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="main.js"></script>
<script src="angularkhan.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body ng-controller="myController">
<div class="header">
<div class="logo">
<i class="fa fa-tachometer"></i>
<span>Dashboard</span>
</div>
<span></span>
</div>
<div class="side-nav">
<div class="logo">
<i class="fa fa-tachometer"></i>
<span>Dashboard</span>
</div>
<nav>
<ul>
<li>
<a href="#">
<span><i class="fa fa-user"></i></span>
<span>Users</span>
</a>
</li>
<li>
<a href="addproduct.html">
<span><i class="fa fa-user"></i></span>
<span>Add Product</span>
</a>
</li>
<li>
<a href="viewproducts.html">
<span><i class="fa fa-envelope"></i></span>
<span>View Products</span>
</a>
</li>
<li class="active">
<a href="#">
<span><i class="fa fa-bar-chart"></i></span>
<span>Analytics</span>
</a>
</li>
<li>
<a href="#">
<span><i class="fa fa-credit-card-alt"></i></span>
<span>Payments</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="main-content">
<div class="title">
Add Product
</div>
<div class="main" ng-view>
<form style="padding:10px">
<div class="form-group">
<label for="ProductName">Product Name</label>
<input type="text" class="form-control" placeholder="Product Name" ng-model="productname">
</div>
<div class="form-group">
<label for="company">Company </label>
<input type="text" class="form-control" placeholder="company" ng-model="company">
</div>
<div class="form-group">
<label for="company">Price </label>
<input type="text" class="form-control" placeholder="price" ng-model="price">
</div>
<div class="form-group">
<label for="company">Quantity </label>
<input type="text" class="form-control" placeholder="quantity" ng-model="quantity">
</div>
<button type="submit" class="btn btn-default" ng-click="insertData()">Submit</button>
<h1>{{successMessage}}</h1>
</form>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</html>


It looks like you may be redifining your module.
Do you have the following code elsewhere in your project?
var myApp = angular.module('myApp', [...]);
If you do, the second module call with brackets would redefine the existing module. Try adding the ngRoute dependency to the first module definition and remove the brackets of the one in config. It should then look like below.
var myApp = angular.module('myApp');


The order of your scripts matters! The file where you create your angular module app:
var myApp = angular.module('myApp', ['ngRoute']);
This file should be after the angular-route file.
Fixed:
<script src="js/angular/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="main.js"></script>
<script src="angularkhan.js"></script>

Related

Uncaught ReferenceError: $ is not defined laravel

Hello i am new to laravel and i'm following this tutorial in order to build a student CMS, i have a datepicker and a bootstrap modal that are supposed to popup when i click form buttons, but nothing shows up even though everything seems okay.
I have a master page that contains all the styles and js references
master.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Creative - Bootstrap 3 Responsive Admin Template">
<meta name="author" content="GeeksLabs">
<meta name="keyword" content="Creative, Dashboard, Admin, Template, Theme, Bootstrap, Responsive, Retina, Minimal">
<link rel="shortcut icon" href="img/favicon.png">
<title>Dashboard</title>
<!-- Bootstrap CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- bootstrap theme -->
<link href="/css/bootstrap-theme.css" rel="stylesheet">
<!--external css-->
<!-- font icon -->
<link href="/css/elegant-icons-style.css" rel="stylesheet" />
<link href="/css/font-awesome.min.css" rel="stylesheet" />
<!-- full calendar css-->
<link href="/assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" />
<link href="/assets/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" />
<!-- easy pie chart-->
<link href="/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>
<!-- owl carousel -->
<link rel="stylesheet" href="/css/owl.carousel.css" type="text/css">
<link href="/css/jquery-jvectormap-1.2.2.css" rel="stylesheet">
<!-- Custom styles -->
<link rel="stylesheet" href="/css/fullcalendar.css">
<link href="/css/widgets.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<link href="/css/style-responsive.css" rel="stylesheet" />
<link href="/css/xcharts.min.css" rel=" stylesheet">
<link href="/css/jquery-ui-1.10.4.min.css" rel="stylesheet">
<!-- =======================================================
Theme Name: NiceAdmin
Theme URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
Author: BootstrapMade
Author URL: https://bootstrapmade.com
======================================================= -->
</head>
<body>
<section id="container" class="">
#include('layouts.header.header')
#include('layouts.sidebars.sidebar')
<section id="main-content">
<div class="wrapper">
#yield('content')
</div>
</section>
</section>
#yield('script')
<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui-1.10.4.min.js"></script>
<script src="/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.9.2.custom.min.js"></script>
<!-- bootstrap -->
<script src="/js/bootstrap.min.js"></script>
<!-- nice scroll -->
<script src="/js/jquery.scrollTo.min.js"></script>
<script src="/js/jquery.nicescroll.js" type="text/javascript"></script>
<!-- charts scripts -->
<script src="/assets/jquery-knob/js/jquery.knob.js"></script>
<script src="/js/jquery.sparkline.js" type="text/javascript"></script>
<script src="/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
<script src="/js/owl.carousel.js" ></script>
<!-- jQuery full calendar -->
<<script src="/js/fullcalendar.min.js"></script> <!-- Full Google Calendar - Calendar -->
<script src="/assets/fullcalendar/fullcalendar/fullcalendar.js"></script>
<!--script for this page only-->
<script src="/js/calendar-custom.js"></script>
<script src="/js/jquery.rateit.min.js"></script>
<!-- custom select -->
<script src="/js/jquery.customSelect.min.js" ></script>
<script src="/assets/chart-master/Chart.js"></script>
<!--custome script for all page-->
<script src="/js/scripts.js"></script>
<!-- custom script for this page-->
<script src="/js/sparkline-chart.js"></script>
<script src="/js/easy-pie-chart.js"></script>
<script src="/js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/js/jquery-jvectormap-world-mill-en.js"></script>
<script src="/js/xcharts.min.js"></script>
<script src="/js/jquery.autosize.min.js"></script>
<script src="/js/jquery.placeholder.min.js"></script>
<script src="/js/gdp-data.js"></script>
<script src="/js/morris.min.js"></script>
<script src="/js/sparklines.js"></script>
<script src="/js/charts.js"></script>
<script src="/js/jquery.slimscroll.min.js"></script>
</body>
</html>
I have another page that contains the form to add a course and the scripts for the datepicker and the modal
manageCourse.blade.php
#extends('layouts.master')
#section('content')
#include('courses.popup.academic')
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fa fa-file-text-o"></i>Courses</h3>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="icon_document_alt"></i>Course</li>
<li><i class="fa fa-file-text-o"></i>Manage Course</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<section class="panel panel-default">
<header class="panel-heading">
Manage Course
</header>
<form class="form-horizontal">
<div class="panel-body" style="border-bottom: 1px solid #ccc;">
<div class="form-group">
<div class="col-sm-3">
<label for="academic-year">Academic Year</label>
<div class="input-group">
<select class="form-control" name="academic_id" id="academic_id">
</select>
<div class="input-group-addon" >
<span class="fa fa-plus" id="add-more-academic"></span>
</div>
</div>
</div>
<div class="col-sm-4">
<label for="program">Course</label>
<div class="input-group">
<select class="form-control" name="program_id" id="program_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-5">
<label for="level">Course</label>
<div class="input-group">
<select class="form-control" name="level_id" id="level_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-3">
<label for="shift">Shift</label>
<div class="input-group">
<select class="form-control" name="shift_id" id="shift_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-4">
<label for="time">Time</label>
<div class="input-group">
<select class="form-control" name="time_id" id="time_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-3">
<label for="batch">Batch</label>
<div class="input-group">
<select class="form-control" name="batch_id" id="batch_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-2">
<label for="group">Group</label>
<div class="input-group">
<select class="form-control" name="group_id" id="group_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-3">
<label for="startDate">Start date</label>
<div class="input-group">
<select class="form-control" name="start_date" id="start_date">
</select>
<div class="input-group-addon">
<span class="fa fa-calendar"></span>
</div>
</div>
</div>
<div class="col-sm-4">
<label for="endDate">End date</label>
<div class="input-group">
<select class="form-control" name="end_date" id="end_date">
</select>
<div class="input-group-addon">
<span class="fa fa-calendar"></span>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<button type="submit" class="btn btn-default btn-sm">Create Course</button>
</div>
</form>
</section>
</div>
</div>
#endsection
#section('script')
<script type="text/javascript">
$('#start_date').datepicker({
changeMonth:true,
changeYear:true,
});
$('#add-more-academic').on('click', function(){
$('#academic-year-show').modal();
});
</script>
#endsection
and the page for the modal
<div class="modal fade" id="academic-year-show" tabindex="-1" role="dialog" aria-labelled-by="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Academic year</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<input type="text" name="academic_year" id="new-academic" class="form-control" placeholder="Academic year">
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button class="btn btn-success btn-save-academic" type="button">Save</button>
</div>
</div>
</div>
Nothing seems to work, everytime i get this error: Uncaught ReferenceError: $ is not defined. Can anyone tell me why the datepicker and the modal are not showing?

Your section #yield("script") needs to go after <script src="/js/jquery.js"></script> in master.blade.php. Currently, you're trying to run code that is depending on jQuery being available by extending the master layout and yielding a section to the extending template, but when this yield is happening is prior to jQuery being available.
<script src="/js/jquery.js"></script>
#yield('script')
<script src="/js/jquery-ui-1.10.4.min.js"></script>
...
</body>
or
...
<script src="/js/charts.js"></script>
<script src="/js/jquery.slimscroll.min.js"></script>
#yield('script')
</body>
Generally, whenever I do #yield for js, I do it after all other <script> tags in the master layout, but as long as you know your dependencies have been loaded before they're called, all is well.

AngularJS - Uncaught Error: [$injector:modulerr] when trying to combine modules

I'm trying learn angular by using multiple modules for a html page. One module for routing and the others for displaying content.
For example, here i have 3 modules in app.js. I have routeApp for the routes, comentUpp for displaying content. and combineApp to combine everything.
var routeApp = angular.module('routeApp',['ngRoute']);
routeApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl : 'views/comment.php',
});
});
var commentUpp = angular.module('commentUpp',['mainCtrl', 'commentService']);
var combineApp = angular.module('combineApp',['routeApp','commentUpp'])
and in index.php i have it like this:
<!DOCTYPE html>
<html ng-app="combineApp" >
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular and angular route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.min.js"> </script>
<script src="js/app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body >
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main" >
<div ng-view></div>
</div>
</body>
</html>
As you can see i'm trying to inject comment.php into index.php.
below is my comment.php
<html>
<div ng-controller="mainController">
<div class="col-md-8 col-md-offset-2">
<!-- PAGE TITLE =============================================== -->
<div class="page-header">
<h2>Laravel and Angular Single Page Application</h2>
<h4>Commenting System</h4>
</div>
<!-- NEW COMMENT FORM =============================================== -->
<form ng-submit="submitComment()"> <!-- ng-submit will disable the default form action and use our function -->
<!-- AUTHOR -->
<div class="form-group">
<input type="text" class="form-control input-sm" name="author" ng-model="commentData.author" placeholder="Name">
</div>
<!-- COMMENT TEXT -->
<div class="form-group">
<input type="text" class="form-control input-lg" name="comment" ng-model="commentData.text" placeholder="Say what you have to say">
</div>
<!-- SUBMIT BUTTON -->
<div class="form-group text-right">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</form>
<!-- LOADING ICON =============================================== -->
<!-- show loading icon if the loading variable is set to true -->
<p class="text-center" ng-show="loading"><span class="fa fa-meh-o fa-5x fa-spin"></span></p>
<div class="comment" ng-hide="loading" ng-repeat="comment in comments">
<h3>Comment #{{ comment.id }} <small>by {{ comment.author }}</h3>
<p>{{ comment.text }}</p>
<p>Delete</p>
</div>
</div>
</div>
</html>
for some reason it shows
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.3/$injector/modulerr?p0=combineApp&p1=Error…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.3%2Fangular.min.js%3A22%3A179)
any idea on how to fix this? thanks

You don't need a separate Module to have mainCtrl and commentService injected, you need to inject the commentService to your mainCtrl,
var commentUpp = angular.module('commentUpp',[]);
then
var combineApp = angular.module('combineApp',['routeApp','commentUpp'])

Uncaught TypeError: $(...).datepicker error on datepicker

So I want to have a text field where a calendar pops up and a user can easily pick a date. However, I am getting Uncaught TypeError: $(...).datepicker is not a function error when I try to debug why the calendar is not popping out.
Below is my code, kindly advice. I have searched even on this forum but can not solve it.
<!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>date</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<!-- Styles -->
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
</head>
<body id="app-layout" class="fuelux">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li>Sisimsha Booking Engine</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-5 col-xs-12">
<div class="form-group{{ $errors->has('date') ? ' has-error' : '' }}">
<label for="Event Date">Event Date</label>
<input name="date" type="text" class="form-control" id='datepicker' placeholder="Date"
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12">
Back
<input type="submit" class="btn btn-primary pull-right" value="Next">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker().datepicker( "option", "dateFormat", 'yy-mm-dd');
});
</script>
</body>
</html>
Kindly, would anyone let me know that which I am doing wrong?
Thank you.

You included three different copies of jQuery.js, including one after the jQuery-ui.js include so when you use $ you'll be getting the third instance with no jQuery-UI.
Your code works if you remove the second and third of those includes, as you can see if you expand and run this snippet:
<!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>date</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<!-- Styles -->
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
</head>
<body id="app-layout" class="fuelux">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li>Sisimsha Booking Engine</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-5 col-xs-12">
<div class="form-group{{ $errors->has('date') ? ' has-error' : '' }}">
<label for="Event Date">Event Date</label>
<input name="date" type="text" class="form-control" id='datepicker' placeholder="Date"
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12">
Back
<input type="submit" class="btn btn-primary pull-right" value="Next">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker().datepicker( "option", "dateFormat", 'yy-mm-dd');
});
</script>
</body>
</html>

You're loading jQuery not one, but three times. jQuery UI is loaded after the second instance, but before the third, so it's attached to the second instance. However, since the third instance is loaded last, its $ variable, which does not have jQuery UI attached, shadows the others, so you can't use jQuery UI.
The solution is simple: just remove two of the jQuery versions, and your code should work fine!
(You also included Bootstrap twice; you need to be more careful about not including your scripts and stylesheets more than once, since they may interfere with each other in unexpected ways.)

Please use this running code.i hope it's help you.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
</script>
<input id="datetimepicker" type="text">

Uncaught ReferenceError: handlebars is not defined

Hi saw that there was another post with the same title "https://stackoverflow.com/questions/27645823/referenceerror-handlebars-is-not-defined" as this but the problem does not look to be the same. I'm trying to build a single page app but I keep getting the "Uncaught ReferenceError: handlebars is not defined" error in the console. The network tab on the console looks to show that the handlebars.min.js is being loaded.

You are invoking handlebars before it is getting loaded. Move your script that compiles handlebars to body like below.
<!DOCTYPE html>
<html>
<head>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="bower_components/materialize/bin/materialize.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="style.css" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<script type="text/x-handlebars-template" id="main-template">
<h1>Loaded main template</h1>
</script>
<button class="clear-screen">Click Me</button>
<nav>
<div class="nav-wrapper" id="nav-color">
Logo
<i class="mdi-navigation-menu"></i>
<ul class="side-nav" id="mobile-demo">
<li><i class="mdi-action-home left"></i>Home</li>
<li><i class="mdi-content-add left"></i>Add Card</li>
<li><i class="mdi-navigation-close left"></i>Remove Card</li>
<li><i class="mdi-action-stars left"></i>Get Premium</li>
<li><i class="mdi-action-settings left"></i>Settings</li>
</ul>
</div>
</nav>
<ul class="collapsible popout" data-collapsible="accordion">
<li>
<div class="collapsible-header" id="flybuys"><span id="flybuys-text">FlyBuys</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="airpoints"><span id="airpoints-text">Airpoints</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="onecard"><span id="airpoints-text">OneCard</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="summitclub"><span id="summit-text">Kathmandu Summit Club</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="clubcard"><span id="new-world-text">New World ClubCard</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
</ul>
<!-- Modal Trigger -->
<a id="btn-color" class="waves-effect waves-light btn modal-trigger" href="#modal1">Add More</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Get Premium</h4>
<p>To have more than 5 card you need Premium, this gives you the ability to have unlimited card! Get it now for only $1.</p>
</div>
<div class="modal-footer">
Not now
Get Premium
</div>
</div>
<div class="content">
init content
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js">
</script>
<script type="text/javascript" src="bower_components/handlebars/handlebars.min.js"></script>
<script type="text/javascript" src="bower_components/materialize/bin/materialize.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
var template = handlebars.compile( $('#main-template').html() );
$(document).on('click','.clear-screen', function(){
$('.content').html( template() );
});
</script>
</body>
</html>

Textarea doesn't get updated when I click generate

Trying to use a custom build example to generate and load code pages only when the user clicks on check boxes and submits. However the textarea does not seem to update at all.
I am attempting to get my code working like this example
http://gregfranko.com/jquery.selectBoxIt.js/customDownload.html
Here is the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/black-tie/jquery-ui.css" rel="stylesheet">
<link href="css/styles.css" type="text/css" rel="stylesheet" />
<link href="css/docs.css" type="text/css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Enter Project Name Here</a>
<div class="nav-collapse">
<ul class="nav">
<li>Home</li>
<li class="active">Custom Download</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<header class="jumbotron subhead" id="overview">
<h1>Customize and download</h1>
<p class="lead">Download the full repository or customize your entire <em>Enter Project Name Here</em> build by selecting only the components that you need.</p>
<div class="subnav">
<ul class="nav nav-pills">
<li>1. Choose and Generate CSS components</li>
<li>2. Choose and Generate JavaScript components</li>
<li>3. Be Happy</li>
</ul>
</div>
</header>
<hr>
<p class="well note">
<strong>Note:</strong> This example page uses the jQuery plugin, SelectBoxIt, to demonstrate how to create custom builds with Downloadbuilder.js.
</p>
<section class="custom-downloads" id="css-downloads">
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
<h1>
1. Choose and Download CSS components
<small>Get just the CSS you need</small>
</h1>
</div>
<div class="row">
<div class="span3">
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.css"> SelectBoxIt CSS</label>
</div>
</div>
<br />
<a class="btn" data-bind="css-downloads" id="css-generate">Generate CSS</a>
<a class="btn btn-primary download-button" id="css-download" download="jquery.selectboxit.css">Download CSS</a>
<br /><br />
<textarea class="source-area default sourceView" id="generated-css-source">// Minified source</textarea>
</section>
<section class="custom-downloads" id="javascript-downloads">
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
<h1>
2. Choose and Download JavaScript components
<small>Get just the JavaScript you need</small>
</h1>
</div>
<div class="row">
<div class="span3">
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.core.min.js" disabled> SelectBoxIt Core</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.ariaAccessibility.min.js"> Aria Accessibility</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.destroy.min.js"> Destroy method</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.disable.min.js"> Disable method</label>
</div>
</div><!-- /row -->
<br />
<a class="btn" href="#" data-bind="javascript-downloads" id="javascript-generate">Generate JavaScript</a>
<a class="btn btn-primary download-button" id="javascript-download" download="jquery.selectboxit.js">Download JavaScript</a>
<br /><br />
<textarea class="source-area default sourceView" id="generated-javascript-source">// Minified source</textarea>
</section>
</div>
</div><!--/.fluid-container-->
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Downloads</h3>
</div>
<div class="modal-body">
<a class="btn btn-large" href="#" target="_blank" data-lang="css" download="jquery.selectboxit.css">Download CSS</a>
<a class="btn btn-large" href="#" target="_blank" data-lang="javascript">Download JavaScript</a>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.tocify.min.js"></script>
<script src ="js/base64.js"></script>
<script src="js/javascripts/DownloadBuilder.js"></script>
<script>
$(function() {
$("a[href='#']").click(function(event) {
event.preventDefault();
});
$(".toggle-all").on("click", function() {
$(this).parent().parent().find('input[type="checkbox"]').not(":disabled").each(function() {
$(this).attr("checked", !$(this).attr("checked"));
});
});
var builder = new DownloadBuilder();
$("#css-generate").on("click", function() {
builder.buildURL($("#css-downloads input[type='checkbox']:checked"), "jquery.selectboxit.css", "css", function(data) {
$("#generated-css-source").text(data.content);
if(!data.content) {
$("#css-download").fadeOut("slow");
}
if(data.url) {
$("#css-download").attr("href", data.url).fadeIn("slow");
}
});
});
$("#javascript-generate").on("click", function() {
builder.buildURL($("#javascript-downloads input[type='checkbox']:checked"), "jquery.selectboxit.js", "javascript", function(data) {
$("#generated-javascript-source").text(data.content);
if(!data.content) {
$("#javascript-download").fadeOut("slow");
}
if(data.url) {
$("#javascript-download").attr("href", data.url).fadeIn("slow");
}
});
});
});
</script>
</body>
</html>

Use $("#generated-javascript-source").val(data.content);
instead of
$("#generated-javascript-source").text(data.content);
replace all .text(data.content); with .val(data.content);;

Categories

Resources