Getting RangeError: using angular.js and php - javascript

i am getting the following error while routing the page using angular.js.
Error:
RangeError: Maximum call stack size exceeded
at $ (http://oditek.in/Gofast/js/angularjs.js:73:115)
at K (http://oditek.in/Gofast/js/angularjs.js:62:39)
at h (http://oditek.in/Gofast/js/angularjs.js:54:410)
at http://oditek.in/Gofast/js/angularjs.js:53:480
at http://oditek.in/Gofast/js/angularjs.js:55:397
at r (http://oditek.in/Gofast/js/angularjs.js:60:200)
at x (http://oditek.in/Gofast/js/angularroute.js:6:364)
at link (http://oditek.in/Gofast/js/angularroute.js:7:92)
at $ (http://oditek.in/Gofast/js/angularjs.js:73:89)
at K (http://oditek.in/Gofast/js/angularjs.js:62:39) <!-- ngView: -->
I am explaining my code below.
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="Channabasavashwara">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>
<!-- PACE LOAD BAR PLUGIN - This creates the subtle load bar effect at the top of the page. -->
<link href="css/pace.css" rel="stylesheet">
<script src="js/pace.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/angularjs.js" type="text/javascript"></script>
<script src="js/angularroute.js" type="text/javascript"></script>
<script src="controller/loginRoute.js" type="text/javascript"></script>
<!-- GLOBAL STYLES - Include these on every page. -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic' rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel="stylesheet" type="text/css">
<link href="icons/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.png">
<!-- PAGE LEVEL PLUGIN STYLES -->
<!-- THEME STYLES - Include these on every page. -->
<link href="css/style.css" rel="stylesheet">
<link href="css/plugins.css" rel="stylesheet">
<link href="css/chosen.css" rel="stylesheet">
<!-- THEME DEMO STYLES - Use these styles for reference if needed. Otherwise they can be deleted. -->
<link href="css/demo.css" rel="stylesheet">
<!-- PAGE LEVEL PLUGIN STYLES -->
<!-- THEME STYLES - Include these on every page. -->
<link href="css/load.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<!-- THEME DEMO STYLES - Use these styles for reference if needed. Otherwise they can be deleted. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div ng-view>
</div>
<!-- GLOBAL SCRIPTS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.popupoverlay.js"></script>
<script src="js/defaults.js"></script>
<!-- Logout Notification Box -->
<!-- /#logout -->
<!-- Logout Notification jQuery -->
<script src="js/logout.js"></script>
<!-- HISRC Retina Images -->
<!-- THEME SCRIPTS -->
<script src="js/flex.js"></script>
<script src="js/dashboard-demo.js"></script>
<script src="js/chosen.jquery.js" type="text/javascript"></script>
<script src="js/prism.js" type="text/javascript"></script>
<script src="js/shortcut.js"></script>
<!-- HISRC Retina Images -->
<!-- THEME SCRIPTS -->
<link rel="stylesheet" type="text/css" href="calendar/tcal.css" />
<script type="text/javascript" src="calendar/tcal.js"></script>
<script src="js/newbill.js"></script>
<script src="controller/loginController.js" type="text/javascript"></script>
<script src="controller/dashboardController.js" type="text/javascript"></script>
</body>
</html>
Here i have a login page first going to bind.When user will logged in successfully the dashboard page should display but its throwing the above error.
loginRoute.js:
var Admin=angular.module('Channabasavashwara',['ngRoute']);
Admin.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'dashboardview/login.html',
controller: 'loginController'
})
.when('/dashboard',{
templateUrl: 'dashboardview/dashboard.html',
controller: 'dashboardController'
});
})
loginController.js:
var loginAdmin=angular.module('Channabasavashwara');
loginAdmin.controller('loginController',function($scope,$http){
$scope.user_name = '';
$scope.user_pass = '';
$scope.user_login=function(){
if($scope.user_name==''){
alert('user name filed should not keep blank');
}else if($scope.user_pass==''){
alert('password filed should not keep blank');
}else{
var userData={'user_name':$scope.user_name,'user_pass':$scope.user_pass};
console.log('user',userData);
$http({
method: 'POST',
url: "php/Login/login.php",
data: userData,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
console.log('response',response);
alert(response.data['msg']);
location.href='#dashboard';
},function errorCallback(response) {
alert(response.data['msg']);
});
}
}
});
Here i am getting the login page first.After finishing the successfully login it should redirect to dashboard page but this error is coming.Please help me to resolve this error.


Add $location in your controller.
loginAdmin.controller('loginController',function($scope,$http, $location){
and replace location.href='#dashboard'; with
$location.path('/dashboard');

Related

Laravel DataTables is not a function

I'm using Laravel and want to use DataTables in my view.
Here's my head tag
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!--Font Awsome-->
<link rel="stylesheet" href="{{asset('vendor/fontawesome-free/css/all.min.css')}}">
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{asset('vendor/css/sb-admin-2.min.css')}}">
<link href="{{asset('vendor/datatables/dataTables.bootstrap4.min.css')}}" rel="stylesheet">
Here are my scripts
<script src="{{asset('vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('vendor/jquery/jquery.min.js')}}"></script>
<!-- Core plugin JavaScript-->
<!-- Custom scripts for all pages-->
<script src="{{asset('vendor/js/sb-admin-2.min.js')}}"></script>
<script src="{{asset('vendor/jquery-easing/jquery.easing.min.js')}}" defer></script>
<!--Data Tables JavaScript-->
<script src="{{asset('vendor/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('vendor/datatables/dataTables.bootstrap4.min.js')}}"></script>
<script>
$(document).ready( function () {
$('#dataTable').DataTable();
} );
</script>
Here is the table
<table id="dataTable" class="table table-bordered" width="100%" cellspacing="0">
...
</table>
Here i encounter this problem
Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument. (agenda:268)
at e (jquery.min.js:2)
at t (jquery.min.js:2)
I already use defer, switching the jquery position, removing the jquery-easing nothing works. Please help.

use the same sequence from the data table
https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js
test with CDN if everything work fine then import locally
<!-- footer section ->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js">
</script>
<script>
$(document).ready( function () {
$('#dataTable').DataTable();
} );
</script>
< /!-- footer section ->
<-- header section ->
<link rel="stylesheet" type="text/css" href="http://laravel.test/laravel-paud-master/public/vendor/datatables/dataTables.bootstrap4.min.css">
< /!-- header section ->

laravel full calendar not working with theme JQuery and Bootstrap

I am using laravel full calender package maddhatter/laravel-fullcalendar. This package is not picking up my theme jquery, bootstrap and moment.
I have included all these in master blade and extends in this blade.
I if change query and bootstrap then calendar works but all others things which are working on theme jquery and bootstrap stops working.
Including these in master blade:
< link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet" >
< script src="{{"app-assets/assets/plugins/jquery/jquery.min.js"}}"></script >
< script src="{{"app-assets/assets/plugins/moment/moment.js"}}"></script >
It shows me console error that
Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: $ is not defined
Blade:
#extends('layouts.master')
#section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
<div class="row">
<div class="col-md-12 ">
<div class="panel panel-default">
<div class="panel-heading">Full Calendar Example</div>
<div class="panel-body">
{!! $calendar->calendar() !!}
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
{!! $calendar->script() !!}
#endsection
My Controller:
public function weddingHallDashboardView()
{
$events = [];
$data = Booking::all();
if($data->count()) {
foreach ($data as $key => $value) {
$events[] = Calendar::event(
$value->booking_type,
true,
new \DateTime($value->date_from),
new \DateTime($value->date_to),
null,
// Add color and link on event
[
'color' => '#f05050',
'url' => 'pass here url and any route',
]
);
}
}
$calendar = Calendar::addEvents($events);
return view('dashboards.wedding-hall-dashboard')
->with(['calendar' => $calendar]);
}
master blade
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="{{"app-assets/assets/images/favicon.png"}}">
<title>#yield('site_title') | 3orrsy</title>
<!-- Bootstrap Core CSS -->
<link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
<!--alerts CSS -->
<link href="{{"app-assets/assets/plugins/sweetalert/sweetalert.css"}}" rel="stylesheet" type="text/css">
<!-- chartist CSS -->
<link href="{{"app-assets/assets/plugins/chartist-js/dist/chartist.min.css"}}" rel="stylesheet">
<link href="{{"app-assets/assets/plugins/chartist-js/dist/chartist-init.css"}}" rel="stylesheet">
<link href="{{"app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css"}}"
rel="stylesheet">
<!--This page css - Morris CSS -->
<link href="{{"app-assets/assets/plugins/c3-master/c3.min.css"}}" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
<link href="{{"app-assets/assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css"}}" rel="stylesheet">
<!-- Date picker plugins css -->
<link href="{{asset('app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />
<!-- Custom CSS -->
<link href="{{"app-assets/css/style.css"}}" rel="stylesheet">
<!-- You can change the theme colors from here -->
<link href="{{"app-assets/css/colors/blue.css"}}" id="theme" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/SlimImageCropper/slim.css')}}">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
<div>
// Side Menu
</div>
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="{{"app-assets/assets/plugins/jquery/jquery.min.js"}}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="{{"app-assets/assets/plugins/bootstrap/js/popper.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/bootstrap/js/bootstrap.min.js"}}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="{{"app-assets/js/jquery.slimscroll.js"}}"></script>
<!--Wave Effects -->
<script src="{{"app-assets/js/waves.js"}}"></script>
<!--Menu sidebar -->
<script src="{{"app-assets/js/sidebarmenu.js"}}"></script>
<!--stickey kit -->
<script src="{{"app-assets/assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/sparkline/jquery.sparkline.min.js"}}"></script>
<!--Custom JavaScript -->
<script src="{{"app-assets/js/custom.min.js"}}"></script>
<script src="{{asset('app-assets/SlimImageCropper/slim.kickstart.min.js')}}"></script>
<!-- Plugin JavaScript -->
<script src="{{"app-assets/assets/plugins/moment/moment.js"}}"></script>
<script src="{{"app-assets/assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js"}}"></script>
<!-- Sweet-Alert -->
<script src="{{"app-assets/assets/plugins/sweetalert/sweetalert.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/sweetalert/jquery.sweet-alert.custom.js"}}"></script>
<script src="{{"app-assets/assets/plugins/datatables/jquery.dataTables.min.js"}}"></script>
<!-- start - This is for export functionality only -->
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============web================================================== -->
<!-- chartist chart -->
{{--<script src="{{"app-assets/assets/plugins/chartist-js/dist/chartist.min.js"}}"></script>--}}
{{--<script src="{{"app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.min.js"}}"></script>--}}
<!--c3 JavaScript -->
<!-- Date Picker Plugin JavaScript -->
<script src="{{'app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js'}}"></script>
<script src="{{"app-assets/assets/plugins/d3/d3.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/c3-master/c3.min.js"}}"></script>
<!-- Chart JS -->
{{--<script src="{{"app-assets/js/dashboard1.js"}}"></script>--}}
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src="{{"app-assets/assets/plugins/styleswitcher/jQuery.style.switcher.js"}}"></script>
</body>
</html>

Please do ctrl+u and check order of jquery.min.js is first or not. If not add this script at top.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
In your master file.
#stack('links') //after all link.
#stack('script') //after all script
In your blade file.
#push('script')
< script src="{{"app-assets/assets/plugins/jquery/jquery.min.js"}}"></script >
< script src="{{"app-assets/assets/plugins/moment/moment.js"}}"></script >
#endpush
#push('links')
< link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet" >
#endpush
master.blade
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="{{"app-assets/assets/images/favicon.png"}}">
<title>#yield('site_title') | 3orrsy</title>
<!-- Bootstrap Core CSS -->
<link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
<!--alerts CSS -->
<link href="{{"app-assets/assets/plugins/sweetalert/sweetalert.css"}}" rel="stylesheet" type="text/css">
<!-- chartist CSS -->
<link href="{{"app-assets/assets/plugins/chartist-js/dist/chartist.min.css"}}" rel="stylesheet">
<link href="{{"app-assets/assets/plugins/chartist-js/dist/chartist-init.css"}}" rel="stylesheet">
<link href="{{"app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css"}}"
rel="stylesheet">
<!--This page css - Morris CSS -->
<link href="{{"app-assets/assets/plugins/c3-master/c3.min.css"}}" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<link href="{{"app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
<link href="{{"app-assets/assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css"}}" rel="stylesheet">
<!-- Date picker plugins css -->
<link href="{{asset('app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />
<!-- Custom CSS -->
<link href="{{"app-assets/css/style.css"}}" rel="stylesheet">
<!-- You can change the theme colors from here -->
<link href="{{"app-assets/css/colors/blue.css"}}" id="theme" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/SlimImageCropper/slim.css')}}">
#stack('links')
</head>
<body>
<div>
// Side Menu
</div>
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="{{"app-assets/assets/plugins/jquery/jquery.min.js"}}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="{{"app-assets/assets/plugins/bootstrap/js/popper.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/bootstrap/js/bootstrap.min.js"}}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="{{"app-assets/js/jquery.slimscroll.js"}}"></script>
<!--Wave Effects -->
<script src="{{"app-assets/js/waves.js"}}"></script>
<!--Menu sidebar -->
<script src="{{"app-assets/js/sidebarmenu.js"}}"></script>
<!--stickey kit -->
<script src="{{"app-assets/assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/sparkline/jquery.sparkline.min.js"}}"></script>
<!--Custom JavaScript -->
<script src="{{"app-assets/js/custom.min.js"}}"></script>
<script src="{{asset('app-assets/SlimImageCropper/slim.kickstart.min.js')}}"></script>
<!-- Plugin JavaScript -->
<script src="{{"app-assets/assets/plugins/moment/moment.js"}}"></script>
<script src="{{"app-assets/assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js"}}"></script>
<!-- Sweet-Alert -->
<script src="{{"app-assets/assets/plugins/sweetalert/sweetalert.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/sweetalert/jquery.sweet-alert.custom.js"}}"></script>
<script src="{{"app-assets/assets/plugins/datatables/jquery.dataTables.min.js"}}"></script>
<!-- start - This is for export functionality only -->
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============web================================================== -->
<!-- chartist chart -->
{{--<script src="{{"app-assets/assets/plugins/chartist-js/dist/chartist.min.js"}}"></script>--}}
{{--<script src="{{"app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.min.js"}}"></script>--}}
<!--c3 JavaScript -->
<!-- Date Picker Plugin JavaScript -->
<script src="{{'app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js'}}"></script>
<script src="{{"app-assets/assets/plugins/d3/d3.min.js"}}"></script>
<script src="{{"app-assets/assets/plugins/c3-master/c3.min.js"}}"></script>
<!-- Chart JS -->
{{--<script src="{{"app-assets/js/dashboard1.js"}}"></script>--}}
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src="{{"app-assets/assets/plugins/styleswitcher/jQuery.style.switcher.js"}}"></script>
#stack('script')
</body>
</html>
Blade file
#extends('layouts.master')
#section('content')
#push('links')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
#endpush
<div class="row">
<div class="col-md-12 ">
<div class="panel panel-default">
<div class="panel-heading">Full Calendar Example</div>
<div class="panel-body">
{!! $calendar->calendar() !!}
</div>
</div>
</div>
</div>
#push('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
{!! $calendar->script() !!}
#endpush
#endsection

How to fix external js jquery script from a html website template into an angular project

Am using a html website template to build an angular project, but am having issues with a custom js script. menu button(to toggle navigation) and some other stuffs in custom.js is not working
i tried linking the scripts files link in index.html, and referenced it in angular.json config file
here is github link to the file https://github.com/donprecious/crtx
here is the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CREXT | DRD</title>
<!--
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
<link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<link href="../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<link href="../vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
<link href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<link href="../build/css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<app-root></app-root>
</div>
<!-- jQuery -->
<!-- <script src="assets/vendors/"></script> -->
<script src="assets/vendors/jquery/dist/jquery.min.js"></script>
<script src="assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/vendors/fastclick/lib/fastclick.js"></script>
<script src="assets/vendors/nprogress/nprogress.js"></script>
<script src="assets/vendors/Chart.js/dist/Chart.min.js"></script>
<script src="assets/vendors/echarts/dist/echarts.min.js"></script>
<script src="assets/vendors/gauge.js/dist/gauge.min.js"></script>
<script src="assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<script src="assets/vendors/iCheck/icheck.min.js"></script>
<script src="assets/vendors/skycons/skycons.js"></script>
<script src="assets/vendors/Flot/jquery.flot.js"></script>
<script src="assets/vendors/Flot/jquery.flot.pie.js"></script>
<script src="assets/vendors/Flot/jquery.flot.time.js"></script>
<script src="assets/vendors/Flot/jquery.flot.stack.js"></script>
<script src="assets/vendors/Flot/jquery.flot.resize.js"></script>
<script src="assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
<script src="assets/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="assets/vendors/flot.curvedlines/curvedLines.js"></script>
<script src="assets/vendors/DateJS/build/date.js"></script>
<script src="assets/vendors/jqvmap/dist/jquery.vmap.js"></script>
<script src="assets/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="assets/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<script src="assets/vendors/moment/min/moment.min.js"></script>
<script src="assets/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/site.js"></script>
</body>
</html>
Angular.json
"scripts": [
"src/assets/vendors/jquery/dist/jquery.min.js",
"src/assets/vendors/bootstrap/dist/js/bootstrap.min.js",
"src/assets/vendors/fastclick/lib/fastclick.js",
"src/assets/vendors/nprogress/nprogress.js",
"src/assets/vendors/Chart.js/dist/Chart.min.js",
"src/assets/vendors/echarts/dist/echarts.min.js",
"src/assets/vendors/gauge.js/dist/gauge.min.js",
"src/assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js",
"src/assets/vendors/iCheck/icheck.min.js",
"src/assets/vendors/skycons/skycons.js",
"src/assets/vendors/Flot/jquery.flot.js",
"src/assets/vendors/Flot/jquery.flot.pie.js",
"src/assets/vendors/Flot/jquery.flot.time.js",
"src/assets/vendors/Flot/jquery.flot.stack.js",
"src/assets/vendors/Flot/jquery.flot.resize.js",
"src/assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js",
"src/assets/vendors/flot-spline/js/jquery.flot.spline.min.js",
"src/assets/vendors/flot.curvedlines/curvedLines.js",
"src/assets/vendors/DateJS/build/date.js",
"src/assets/vendors/jqvmap/dist/jquery.vmap.js",
"src/assets/vendors/jqvmap/dist/maps/jquery.vmap.world.js",
"src/assets/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js",
"src/assets/vendors/moment/min/moment.min.js",
"src/assets/vendors/bootstrap-daterangepicker/daterangepicker.js",
"src/assets/js/custom.js",
"src/assets/js/site.js"
]
},
custom.js file
var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
$BODY = $('body'),
$MENU_TOGGLE = $('#menu_toggle'),
$SIDEBAR_MENU = $('#sidebar-menu'),
$SIDEBAR_FOOTER = $('.sidebar-footer'),
$LEFT_COL = $('.left_col'),
$RIGHT_COL = $('.right_col'),
$NAV_MENU = $('.nav_menu'),
$FOOTER = $('footer');
this code does not work when i integate the website template, but works when i just click run the template browser
$MENU_TOGGLE.on('click', function() {
console.log('clicked - menu toggle');
if ($BODY.hasClass('nav-md')) {
$SIDEBAR_MENU.find('li.active ul').hide();
$SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
} else {
$SIDEBAR_MENU.find('li.active-sm ul').show();
$SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
}
$BODY.toggleClass('nav-md nav-sm');
setContentHeight();
});
it seems that the javascript are rendered,
but when i click on button to toggle menu or any control that as to work with jquery it doesnt work

Scripts doesn't work in angular2 app

I made a dashboard with Angular.
I included all my scripts in my index.html, but every time I click a link, only the html and css are executed.
The Javascripts' actions are not executed such as graphs that i implemented.
I have to reload the page for everything to work normally.
That is my index.html source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="assets/materialize/css/materialize.min.css" media="screen,projection" />
<!-- Bootstrap Styles-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FontAwesome Styles-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- Morris Chart Styles-->
<link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
<!-- Custom Styles-->
<link href="assets/css/custom-styles.css" rel="stylesheet" />
<!-- Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="assets/js/Lightweight-Chart/cssCharts.css">
</head>
<body>
<app-root></app-root>
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/materialize/js/materialize.min.js"></script>
<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="assets/js/morris/raphael-2.1.0.min.js"></script>
<script src="assets/js/morris/morris.js"></script>
<script src="assets/js/easypiechart.js"></script>
<script src="assets/js/easypiechart-data.js"></script>
<script src="assets/js/Lightweight-Chart/jquery.chart.js"></script>
<!-- Custom Js -->
<script src="assets/js/custom-scripts.js"></script>
<!-- Tabs -->
<!-- jQuery Js -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/materialize/js/materialize.min.js"></script>
<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="assets/js/morris/raphael-2.1.0.min.js"></script>
<script src="assets/js/morris/morris.js"></script>
<script src="assets/js/easypiechart.js"></script>
<script src="assets/js/easypiechart-data.js"></script>
<script src="assets/js/Lightweight-Chart/jquery.chart.js"></script>
<!-- DATA TABLE SCRIPTS -->
<script src="assets/js/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function() {
$('#dataTables-example').dataTable();
});
</script>
<!--Pizza-->
<script src="assets/js/highcharts.js"></script>
<script src="assets/js/exporting.js"></script>
<script src="assets/js/pizza.js"></script>
</body>
</html>

Case angular-cli and latest version, copy path of your scripts in angular-cli.json.
Ex.:
"scripts": [
"assets/js/dataTables/jquery.dataTables.js"
],

How to keep browser scroll bar at the top while changing routes in AngularJS?

I have a situation if user scroll down in browser on home page and perform action on any event that takes him to another page or route , the scroll bar position is same as home page. How can i keep Scroll bar at top whenever user redirected to different pages ? I tried autoscroll in below code but that does not seems to be working Any suggetion will be appreciated. Thanks
index.html
<!DOCTYPE html>
<html ng-app="riskAssessmentApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Risk Assessment</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- bootstrap.css contains normalize, so it needs to go first -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="bower_components/orcit-theme/dist/styles/bootstrap.css">
<link rel="stylesheet" href="bower_components/orcit-theme/dist/styles/kendo.bootstrap.css">
<link rel="stylesheet" href="bower_components/orcit-theme/dist/styles/kendo.common-bootstrap.css">
<link rel="stylesheet" href="bower_components/orcit-theme/dist/styles/orcit.css">
<link rel="stylesheet" href="bower_components/bac-multiselect/bacMultiselect.css">
<link rel="stylesheet" href="styles/site.css">
<link rel="stylesheet" href="styles/bootstrap-override.css">
<link rel="stylesheet" href="styles/kendo-override.css">
<link rel="stylesheet" href="styleNew/multiselect-treeview.css">
<link rel="stylesheet" href="styleNew/main.css">
<link rel="stylesheet" href="styles/style.css">
<!-- endbuild -->
</head>
<body>
<div ui-view autoscroll="false"></div>
<!-- build:js scripts/scripts.js -->
<script src="bower_components/orcit-bower/src/jquery/dist/jquery.js"></script>
<script src="bower_components/orcit-bower/src/angular/angular.js"></script>
<script src="bower_components/orcit-bower/src/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/orcit-bower/src/angular-off-click/offClick.js"></script>
<script src="bower_components/orcit-bower/src/angular-resource/angular-resource.js"></script>
<script src="bower_components/orcit-bower/src/spin.js/spin.js"></script>
<script src="bower_components/orcit-bower/src/angular-spinner/angular-spinner.js"></script>
<script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/accordion/accordion.js"></script>
<script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/bindHtml/bindHtml.js"></script>
<script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/collapse/collapse.js"></script>
<script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/modal/modal.js"></script>
<script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/position/position.js"></script>
<script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/tooltip/tooltip.js"></script>
<script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/transition/transition.js"></script>
<script src="bower_components/orcit-bower/src/angular-ui-router/angular-ui-router.js"></script>
<script src="bower_components/orcit-bower/src/angular/angular.min.js"></script>
<script src="bower_components/orcit-bower/src/kendo/js/kendo.web.min.js"></script>
<script src="bower_components/orcit-bower/src/kendo/js/kendo.all.min.js"></script>
<script src="bower_components/bac-multiselect/bacMultiselect.js"></script>
<script src="bower_components/kendo-multiselect-treeview/kendo-multiselect-treeview.js"></script>
</body>
</html>
scroll.js
angular.module('riskAssessmentApp').run(function($rootScope, $anchorScroll) {
/* scroll to the top of the page after the route successfully changes */
$rootScope.$on('$routeChangeSuccess', function() {
$anchorScroll();
});
});

You can use $anchorScroll to scroll to top of the page everytime the route is changed.
angular.module('YOUR_APP')
.run(function($rootScope, $anchorScroll) {
/* scroll to the top of the page after the route successfully changes */
$rootScope.$on('$routeChangeSuccess', function() {
$anchorScroll();
});
})
.config(function($uiViewScrollProvider) {
$uiViewScrollProvider.useAnchorScroll();
});

Below code resolved my issue..
angular.module('Your-App').run(function($rootScope,$window) {
/* scroll to the top of the page after the route successfully changes */
$rootScope.$on('$viewContentLoaded', function(){
$window.scrollTo(0, 0);
});
});

Categories

Resources