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 ->
Related
This question already has answers here:
TypeError: $(...).modal is not a function with bootstrap Modal
(14 answers)
Closed 1 year ago.
Possibly I did wrong script order,I am trying make a dynamic pop up modal, which will fetch data on click. my scripts are :
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css"
rel="stylesheet">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome Intigration -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"/>
<link rel="stylesheet" type="text/css" href="{{asset('css/style.css')}}">
<link rel="stylesheet" href="{{asset('css/responsive.css')}}">
<link rel="stylesheet" href="{{asset('css/fundraisers.css')}}">
<!-- <link rel="stylesheet" href="{{asset('css/support.css')}}"> -->
#yield('head-script')
<!-- must include -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
{{-- for sweetalert2 --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"
integrity="sha512-
AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<script type="text/javascript" src="{{asset('js/languageChange.js')}}"></script>
<script src="{{ asset('js/share.js') }}"></script>
<script src="{{ asset('js/main.js') }}"></script>
<title>Mortfund</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-
iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
/>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap"
rel="stylesheet">
Laravel Body tag goes here ------
<script src="{{ url('js/authentication.js') }}"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js">
</script>
<script src="{{asset('js/script.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js">
</script>
<script src="{{asset('js/jquery.countup.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
<script>
I excluded html and body tags to reduce the amount of code, which is not good for a posting in stack overflow. If you have any question please ask me.
Because you loaded JQuery thrice :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
You need to load JQuery once in a page, If you loaded JQuery more than once then you will face error, Why do I need to load jquery twice
I'm migrating my laravel project to ionos hosting, but js it's not working, I think I have it all ok.
in my localhost is working fine.
not working local files and CDN
I am stuck.
and I have these errors:
Could you help me, please?
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Sertek</title>
<!-- Favicon -->
<link href="{{ asset('argon') }}/img/brand/favicon.png" rel="icon" type="image/png">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<!-- Icons -->
<link href="{{ asset('argon') }}/vendor/nucleo/css/nucleo.css" rel="stylesheet">
<link href="{{ asset('argon') }}/vendor/#fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
<!-- Argon CSS -->
<link type="text/css" href="{{ asset('argon') }}/css/argon.css?v=1.0.0" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/dataTables.semanticui.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css">
</head>
<body class="{{ $class ?? 'bg-default' }}">
<script src="{{ asset('argon') }}/vendor/jquery/dist/jquery.min.js"></script>
<script src="{{ asset('argon') }}/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/esm/popper.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<!-- Argon JS -->
<script src="{{ asset('argon') }}/js/argon.js?v=1.0.0"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/dataTables.uikit.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script>
window.onload = function exampleFunction() {
console.log('The Script will load now.'); //this works
}
</script>
#stack('js')
</body>
</html>```
I solved, my local jquery not working fine. I changed
<script src="{{ asset('argon') }}/vendor/jquery/dist/jquery.min.js" defer></script>
to
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
I am doing a view and when I send the information that, I want to show to that view send the error that I show above and the view is displayed with html only. This error doesn't happen when I did not send information to the view. I don't know, how to solve it.
Says exactly like thisGET http://127.0.0.1:8000/entradas/1/comprar/1/detalle_ventaEntrada/200000/css/bootstrap.min.css net::ERR_ABORTED 404 (Not Found) and GET http://127.0.0.1:8000/entradas/1/comprar/1/detalle_ventaEntrada/200000/js/jquery.stellar.min.js net::ERR_ABORTED 404 (Not Found) in the console with every js or css in the stylesheet and scripts
Below I will let the code of my scripts, the links in the head and also the information I want to show
<link stylesheet="" href=""> and script ind head tag
<head>
<title>ACAVUCAB</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/ionicons.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="css/jquery.timepicker.css">
<link rel="stylesheet" href="css/flaticon.css">
<link rel="stylesheet" href="css/icomoon.css">
<link rel="stylesheet" href="css/style.css">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
scripts
<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/scrollax.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="js/google-map.js"></script>
<script src="js/main.js"></script>
things i want to show in the view
#foreach ($detalle_venta_entrada as $item)
<td class="image-prod"><div class="img" style="background-image:url(ticket_event.jpg);"></div></td>
<td class="product-name">
<h3>{{$item->numero_entrada}}</h3>
<p>Esta entrada es de uso unico y exclusivo para este evento</p>
</td>
<td class="price">{{$item->precio}}}</td>
<td>{{$item->fecha}}</td>
<td class="total">{{$item->precio}}</td>
</tr><!-- END TR-->
#endforeach
http://127.0.0.1:8000/entradas/1/comprar/1/detalle_ventaEntrada/200000/css/bootstrap.min.css
Here you can see your .css file is trying to load from this url, which is not correct.
Use laravel built in asset() function.
https://laravel.com/docs/master/helpers#method-asset
Which will point to public folder of your application so:
use asset('expamleFolder/bootstrap.js'),
it will look for your bootstrap.js inside public/expamleFolder.
Note: always keep assets in public folder.
Replace this with old code
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('js/jquery.stellar.min.js') }}">
this is solution for that 2 error
Use asset helper
<script src="{{asset('js/main.js')}}"></script>
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"
],
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');