Laravel 8 - scripts for datatable not working - javascript

I am using AdminBSB template for practice, and Jquery datatable plugin JS not working in my blade template
I want to make datatable looks like this:
but exportable, search, and pagination function in mytable not working like this:
this is sample of my code for script:
posts/index.blade.php:
<x-admin-master>
#section('content')
<!-- T A B E L --->
<div class="container-fluid">
<div class="block-header">
<h2>
JQUERY DATATABLES USER
<small>Taken from datatables.net</small>
</h2>
</div>
<!-- Exportable table Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
All Post
</h2>
</div>
<div class="body">
<div class="table-responsive">
<table id="tableCategory" class="table table-bordered table-striped table-hover dataTable js-exportable">
<thead>
<tr>
<th>XXX</th>
<th>XXX</th>
<th>XXX</th>
</tr>
</thead>
<tfoot>
<tr>
<th>XXX</th>
<th>XXX</th>
<th>XXX</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>XXX</th>
<th>XXX</th>
<th>XXX</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- #END# Basic Examples -->
</div>
<!-- END - T A B E L --->
#endsection
#section('scripts')
<!-- Jquery DataTable Plugin Js -->
<script src="{{asset('plugins/jquery-datatable/jquery.dataTables.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/buttons.flash.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/jszip.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/pdfmake.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/vfs_fonts.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/buttons.html5.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/buttons.print.min.js')}}"></script>
#endsection
</x-admin-master>
admin-master.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>Welcome To | Bootstrap Based Admin Template - Material Design</title>
<!-- Favicon-->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<!-- Bootstrap Core Css -->
<link href="{{asset('plugins/bootstrap/css/bootstrap.css')}}" rel="stylesheet">
<!-- Waves Effect Css -->
<link href="{{asset('plugins/node-waves/waves.css')}}" rel="stylesheet" />
<!-- Animation Css -->
<link href="{{asset('plugins/animate-css/animate.css')}}" rel="stylesheet" />
<!-- Morris Chart Css-->
<link href="{{asset('plugins/morrisjs/morris.css')}}" rel="stylesheet" />
<!-- Custom Css -->
<link href="{{asset('css/style.css')}}" rel="stylesheet">
<!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
<link href="{{asset('css/themes/all-themes.css')}}" rel="stylesheet" />
<!-- JQuery DataTable Css -->
<link href="{{asset('plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css')}}" rel="stylesheet">
<!-- Bootstrap DatePicker Css -->
<link href="{{asset('plugins/bootstrap-datepicker/css/bootstrap-datepicker.css')}}" rel="stylesheet" />
<!-- Wait Me Css -->
<link href="{{asset('plugins/waitme/waitMe.css')}}" rel="stylesheet" />
<!-- Bootstrap Select Css -->
<link href="{{asset('plugins/bootstrap-select/css/bootstrap-select.css')}}" rel="stylesheet" />
<!-- Dropzone Css -->
<link href="{{asset('plugins/dropzone/dropzone.css')}}" rel="stylesheet">
<!-- Toastr Css -->
<link href="{{asset('css/toastr.min.css')}}" rel="stylesheet">
</head>
</head>
<body class="theme-red">
<!-- Page Loader -->
<div class="page-loader-wrapper">
<div class="loader">
<div class="preloader">
<div class="spinner-layer pl-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<p>Please wait...</p>
</div>
</div>
<!-- #END# Page Loader -->
<!-- Overlay For Sidebars -->
<div class="overlay"></div>
<!-- #END# Overlay For Sidebars -->
<!-- Search Bar -->
<div class="search-bar">
<div class="search-icon">
<i class="material-icons">search</i>
</div>
<input type="text" placeholder="START TYPING...">
<div class="close-search">
<i class="material-icons">close</i>
</div>
</div>
<!-- #END# Search Bar -->
<!-- Top Bar -->
<x-admin.top-nav.admin-top-navbar></x-admin.top-nav.admin-top-navbar>
<!-- #Top Bar -->
<section>
<!-- Left Sidebar -->
<x-admin.left-nav.admin-left-navbar></x-admin.left-nav.admin-left-navbar>
<!-- #END# Left Sidebar -->
<!-- Right Sidebar -->
<x-admin.right-nav.admin-right-navbar></x-admin.right-nav.admin-right-navbar>
<!-- #END# Right Sidebar -->
</section>
{{-- <section class="content"> --}}
<div class="container-fluid">
<section class="content">
#yield('content')
</section>
</div>
{{-- </section> --}}
<!-- Jquery Core Js -->
<script src="{{asset('plugins/jquery/jquery.min.js')}}"></script>
<!-- Bootstrap Core Js -->
<script src="{{asset('plugins/bootstrap/js/bootstrap.js')}}"></script>
<!-- Select Plugin Js -->
<script src="{{asset('plugins/bootstrap-select/js/bootstrap-select.js')}}"></script>
<!-- Slimscroll Plugin Js -->
<script src="{{asset('plugins/jquery-slimscroll/jquery.slimscroll.js')}}"></script>
<!-- Waves Effect Plugin Js -->
<script src="{{asset('plugins/node-waves/waves.js')}}"></script>
<!-- Jquery CountTo Plugin Js -->
<script src="{{asset('plugins/jquery-countto/jquery.countTo.js')}}"></script>
<!-- Morris Plugin Js -->
<script src="{{asset('plugins/raphael/raphael.min.js')}}"></script>
<script src="{{asset('plugins/morrisjs/morris.js')}}"></script>
<!-- ChartJs -->
<script src="{{asset('plugins/chartjs/Chart.bundle.js')}}"></script>
<!-- Flot Charts Plugin Js -->
<script src="{{asset('plugins/flot-charts/jquery.flot.js')}}"></script>
<script src="{{asset('plugins/flot-charts/jquery.flot.resize.js')}}"></script>
<script src="{{asset('plugins/flot-charts/jquery.flot.pie.js')}}"></script>
<script src="{{asset('plugins/flot-charts/jquery.flot.categories.js')}}"></script>
<script src="{{asset('plugins/flot-charts/jquery.flot.time.js')}}"></script>
<!-- Sparkline Chart Plugin Js -->
<script src="{{asset('plugins/jquery-sparkline/jquery.sparkline.js')}}"></script>
<!-- Custom Js -->
<script src="{{asset('js/admin.js')}}"></script>
<script src="{{asset('js/pages/index.js')}}"></script>
<!-- Demo Js -->
<script src="{{asset('js/demo.js')}}"></script>
#yield('scripts')
</body>
</html>

I got this issue before. I changed
#section('scripts') ... #endsection
to
#push('scripts') ... #endpush
In admin-master.blade.php, I changed:
#yield('script') to #stack('script')

Related

jQuery Datatables error (Uncaught TypeError: $ is not a function)

Im trying to get datatables to work for a basic table
This is my error
Below is my layouts file, where i include the script tags and css tags / they are noted
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- font awesome icon kit - check favourite tabs in chrome to get more -->
<script src="https://kit.fontawesome.com/69e69f8319.js" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{config('app.name', 'Coffee')}}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="../css/app.css">
<!-- ck editor cdn-->
<script src="https://cdn.ckeditor.com/4.15.1/standard/ckeditor.js"></script>
<!-- Datatables link -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
</head>
<body style="background-color: lightgrey !important;">
#include('inc.admin_navbar')
<div class="container">
#yield('content')
#if(session('success_message'))
<div class="alert alert-success">
{{session('success_message')}}
</div>
#endif
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- datatables js link -->
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
#include('sweetalert::alert')
</body>
</html>
Here is my file that includes the targeted table and the javascript. This file extends from the layouts file where the datatable links are nested
<table id="datatable" class="table table-striped table-hover">
<htead>
<th>ID</th>
<th>Name</th>
<th>Date Joined</th>
<th></th>
</htead>
<tbody>
#foreach($posts as $post)
<tr>
<th>{{$post->id}}</th>
<th>{{$post->title}}</th>
<th>{{$post->created_at}}</th>
<th>
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editModal">Edit</button>
</div>
<div class="col">
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#delete">Delete</button>
</div>
</div>
</th>
</tr>
#endforeach
</tbody>
</table>
Here is the js at the bottom on the file
<script type="text/javascript">
$(document).ready(function () {
//linked to our main table - js function
var table = $('#datatable').DataTable();
})
</script>
please include Jquery before datatable load
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Include jQuery into your code, right after body tag ends </body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

Resources are not loaded in Chrome

I am using EJS to render HTML. But the same HTML thing gets loaded for one route and when tried with another route chrome shows the status of CSS files as cancelled and js files with status code 404. I am unable to get what is going wrong. It works for the '/' route but does not work for the '/admin/students' route. Please help. In the table, I am printing the data sent through route.
In '/' route I am just sending a text as a data and everything else is the same as giving the code below.
app.get('/',(req,res)=>{
res.render('layout',{data:"IT is working"});
});
app.get('/admin/students',(req,res)=>{
Student.find({},function(err,result){
if(err)
console.log(err);
else
res.render('student',{st:result});
})
})
<!DOCTYPE HTML>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Favicon -->
<link rel="shortcut icon" href="img/fav.png" />
<!-- Author Meta -->
<meta name="author" content="colorlib" />
<!-- Meta Description -->
<meta name="description" content="" />
<!-- Meta Keyword -->
<meta name="keywords" content="" />
<!-- meta character set -->
<meta charset="UTF-8" />
<!-- Site Title -->
<title>Blog Home</title>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900|Roboto:400,400i,500,700"
rel="stylesheet" />
<!--
CSS
=============================================
-->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<!-- ================ Start Header Area ================= -->
<header class="default-header">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="img/logo.png" alt="" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="lnr lnr-menu"></span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-items-center"
id="navbarSupportedContent">
<ul class="navbar-nav">
<li>Home</li>
<li>Admin</li>
<li>User</li>
</ul>
</div>
</div>
</nav>
</header>
<section class="banner-area" style="background: url('img/home.png')" >
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-12 banner-right">
<h1 class="text-white">
Blog Home
</h1>
<p class="mx-auto text-white mt-20 mb-40">
In the history of modern astronomy, there is probably no one greater leap forward than the
building.
</p>
<div class="link-nav">
<span class="box">
Home
<i class="lnr lnr-arrow-right"></i>
Blog Home
</span>
</div>
</div>
</div>
</div>
</section>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Reg.No.</th>
<th scope="col">Name</th>
<th scope="col">Branch</th>
<th scope="col">Handle</th>
</tr>
</thead>
<body>
<% st.map(rec=>{ %>
<tr style="color:black">
<th scope="row"><%=rec._id%></th>
<td><%=rec.sname%></td>
<td><%=rec.branch%></td>
<td><form action="/students/<%=rec._id%>/edit}"></form></td>
</tr>
<% }) %>
</tbody>
</table>
<footer class="footer-area section-gap">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved |
This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</footer>
<!-- ================ End footer Area ================= -->
<script src="js/vendor/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/hexagons.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You should use absolute paths of static files instead of relative ones. Example:
<script src="js/main.js"></script>
should be:
<script src="/js/main.js"></script>
Similarly, you should fix the paths for all static files (css, js, etc.) in your EJS files.
You can read more about absolute and relative paths here.

Bootstrap popper won't function for the life of me

I need to add popover/tooltip functionality to my page and I can't get it to work. I don't get any console errors, the popup just does not show up. I've tried reordering my scripts and putting them every part of my code. I tried basically every form of the activation script I could find as you will see here. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="au theme template">
<meta name="author" content="Hau Nguyen">
<meta name="keywords" content="au theme template">
<!-- Title Page-->
<title>Company</title>
<!-- New Tab Favicon -->
<link rel="icon" href="images/favicon_tranparent.png">
<script src="/jquery-3.4.1.min.js" language="JavaScript" type="text/javascript"></script>
<!-- <script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script> -->
<script>
$(function(){
$("#generatedTable").load("<%= table %>");
});
</script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<script>
$(function () {
$('#popover').popover({
container: 'body'
})
})
</script>
<script>
$(function () {
$('.popover').popover({
container: 'body'
})
$('.popover-dismiss').popover({
trigger: 'focus'
})
})
</script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<script>
jQuery(document).ready(function () {
jQuery('[data-toggle="tooltip"]').tooltip();
});
</script>
<p id="noSpaceName" hidden><%= noSpaceName %><p>
<p id="CSV" hidden><%= CSV %><p>
<script>
function dynamic_file() {
var folder = document.getElementById("noSpaceName").innerHTML
var file = document.getElementById("CSV").innerHTML
console.log("data/" + folder + "/" + file)
return "data/" + folder + "/" + file;
}
function download_file(name) {
var dlink = document.createElement('a');
var currentTime = new Date();
dlink.download = document.getElementById("noSpaceName").innerHTML.concat("-" + currentTime.toDateString().split(' ').join('-'));
dlink.href = name;
dlink.onclick = function(e) {
// revokeObjectURL needs a delay to work properly
var that = this;
setTimeout(function() {
window.URL.revokeObjectURL(that.href);
}, 1500);
};
dlink.click();
dlink.remove();
}
</script>
<!-- Fontfaces CSS-->
<link href="/font-face.css" rel="stylesheet" media="all">
<link href="/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all">
<link href="/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
<!-- Bootstrap CSS-->
<link href="/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all">
<!-- Vendor CSS-->
<link href="/animsition/animsition.min.css" rel="stylesheet" media="all">
<link href="/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all">
<link href="/wow/animate.css" rel="stylesheet" media="all">
<link href="/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all">
<link href="/slick/slick.css" rel="stylesheet" media="all">
<link href="/select2/select2.min.css" rel="stylesheet" media="all">
<link href="/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all">
<!-- Main CSS-->
<link href="/theme.css" rel="stylesheet" media="all">
<link href="/custom.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="#" />
<script src="/jquery-3.2.1.min.js"></script>
<script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script>
<script src="/bootstrap-4.1/bootstrap.min.js"></script>
</head>
<body class="animsition">
<div class="page-wrapper">
<!-- MENU SIDEBAR-->
<aside class="menu-sidebar d-none d-lg-block">
<div class="logo">
<a href="">
<img src="temp_logo.png" alt="Company Name" />
</a>
</div>
<div class="menu-sidebar__content js-scrollbar1">
<nav class="navbar-sidebar">
<ul class="list-unstyled navbar__list">
<li>
<a class="js-arrow" href="/">
<i class="fas fa-table"></i>Arrest Records</a>
</li>
<li>
<a href="/analytics">
<i class="fas fa-chart-bar"></i>Analytics
</a>
</li>
</ul>
</nav>
</div>
</aside>
<!-- END MENU SIDEBAR-->
<!-- PAGE CONTAINER-->
<div class="page-container">
<!-- HEADER DESKTOP-->
<header class="header-desktop">
<div class="section__content section__content--p30">
<div class="container-fluid">
<div class="header-wrap">
<div></div>
<div class="custom_title">
<h2><font color="#666666"><%= fullName %></font></h2>
</div>
<div class="flex-box">
<!-- <a id="csv" href="" download=""> -->
<a id="popover" data-trigger="hover" data-toggle="popover">Popover</a>
<button onclick='download_file(dynamic_file())' class="btn btn-download"><i class="fa fa-download"></i> Download</button>
<script> $('[data-toggle="tooltip"]').tooltip()</script>
<!-- </a> -->
<!-- Log Out User -->
<form class="form-header" action="/logout?_method=DELETE" method="POST">
<button type="submit" class="btn btn-lightish"><i class="zmdi zmdi-power"></i> Log Out</button>
</form>
</div>
</div>
</div>
</div>
</header>
<!-- END HEADER DESKTOP-->
<!-- MAIN CONTENT-->
<div class="main-content">
<div class="section__content section__content--p30">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="table-responsive table--no-card m-b-30">
<div id="generatedTable"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="copyright">
<p>Copyright © 2020 Company. All rights reserved.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Jquery JS-->
<!-- <script src="/jquery-3.2.1.min.js"></script> -->
<!-- Bootstrap JS-->
<!-- <script src="/bootstrap-4.1/popper.min.js"></script> -->
<script src="/bootstrap-4.1/bootstrap.min.js"></script>
<script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script>
<!-- Vendor JS -->
<script src="/slick/slick.min.js">
</script>
<script src="/wow/wow.min.js"></script>
<script src="/animsition/animsition.min.js"></script>
<script src="/bootstrap-progressbar/bootstrap-progressbar.min.js">
</script>
<script src="/counter-up/jquery.waypoints.min.js"></script>
<script src="/counter-up/jquery.counterup.min.js">
</script>
<script src="/circle-progress/circle-progress.min.js"></script>
<script src="/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="/chartjs/Chart.bundle.min.js"></script>
<script src="/select2/select2.min.js">
</script>
<!-- Main JS-->
<script src="/main.js"></script>
</body>
</html>
<!-- end document-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Going from ng-app to a manual bootstrap is not working, getting blank page

In order to run hybrid angular 1 and angular 2, I am following these guidelines: https://angular.io/guide/upgrade#upgrading-with-ngupgrade
One issue I have run into is switching from using ng-app to bootstrap to a manual bootstrap method as manual bootstrap is required from the upgrade to work. The below ng-app bootstrapping method works just fine:
<!DOCTYPE html SYSTEM "about:legacy-compat">
<html ng-app="c2c" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<title>c2c</title>
<link href='https://fonts.googleapis.com/css?family=Michroma' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Prompt:100,200,300,400,500,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,700,900' rel='stylesheet' type='text/css'>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<!-- run `gulp inject` to automatically populate bower styles dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<!-- css files will be automatically insert here -->
<!-- endinject -->
<!-- endbuild -->
</head>
<body ng-controller="UserController as mainApp">
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="container-fluid">
<div class="row">
<div class="c2c-header"></div>
</div>
<div class="row" ng-if="emailClass!='email'">
<div class="c2c-navbar"></div>
</div>
<div class="row">
<!--<div ng-if="emailClass!='email'" class="talent-aside col-xs-3 col-sm-3 col-md-2 col-lg-2" ng-if="mainApp.hasPermission('DealPoint.VIEW')"></div>-->
<div class="talent-aside col-xs-3 col-sm-3 col-md-2 col-lg-2"></div>
<div class="talent-content body-bg col-xs-9 col-sm-9 col-md-10 col-lg-10">
<div class="ui-view"></div>
</div>
</div>
</div>
<!-- <div class="pageloader" ng-if="loader">
<img src="app\assets\images\balls.gif" width="100" height="100" class="loaderImage" />
<span class="loaderText" ng-if="loadingText.length>0">{{loadingText}}</span>
</div>
-->
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<!-- run `gulp inject` to automatically populate bower script dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!--<script src="../bower_components/angular-filter/dist/angular-filter.min.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>-->
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<!-- js files will be automatically insert here -->
<!-- endinject -->
<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->
</body>
</html>
But when I switch to the manual bootstrapping method, I get a blank page with no console errors:
<!DOCTYPE html SYSTEM "about:legacy-compat">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<title>c2c</title>
<link href='https://fonts.googleapis.com/css?family=Michroma' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Prompt:100,200,300,400,500,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,700,900' rel='stylesheet' type='text/css'>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<!-- run `gulp inject` to automatically populate bower styles dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<!-- css files will be automatically insert here -->
<!-- endinject -->
<!-- endbuild -->
</head>
<body ng-controller="UserController as mainApp">
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="container-fluid">
<div class="row">
<div class="c2c-header"></div>
</div>
<div class="row" ng-if="emailClass!='email'">
<div class="c2c-navbar"></div>
</div>
<div class="row">
<!--<div ng-if="emailClass!='email'" class="talent-aside col-xs-3 col-sm-3 col-md-2 col-lg-2" ng-if="mainApp.hasPermission('DealPoint.VIEW')"></div>-->
<div class="talent-aside col-xs-3 col-sm-3 col-md-2 col-lg-2"></div>
<div class="talent-content body-bg col-xs-9 col-sm-9 col-md-10 col-lg-10">
<div class="ui-view"></div>
</div>
</div>
</div>
<!-- <div class="pageloader" ng-if="loader">
<img src="app\assets\images\balls.gif" width="100" height="100" class="loaderImage" />
<span class="loaderText" ng-if="loadingText.length>0">{{loadingText}}</span>
</div>
-->
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<!-- run `gulp inject` to automatically populate bower script dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!--<script src="../bower_components/angular-filter/dist/angular-filter.min.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>-->
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<!-- js files will be automatically insert here -->
<!-- endinject -->
<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->
<script>
angular.module('c2c', [])
.controller('UserController', ['$scope', function ($scope) {
$scope.greetMe = 'World';
}]);
angular.element(function() {
angular.bootstrap(document, ['c2c']);
});
</script>
</body>
</html>
Any help would be great! Thanks!
You need to wait for the document to be ready to bootstrap AngularJS.
Change
angular.element(function() {
angular.bootstrap(document, ['c2c']);
});
To
angular.element(document).ready(function(){
angular.bootstrap(document, ['c2c']);
});
angular.element(function() {
angular.bootstrap(document, ['c2c']);
});
The anonymous function here is not returning anything; in fact, I don't believe you need the angular.element wrapper either. Try just using
angular.bootstrap(document, ['c2c']);

Angular Injector error

I keep getting an error trying to inject angular into my application. I get an error that says Error: $injector:modulerr Module Error. Below is my code:
admin-index.html:
<!DOCTYPE html>
<html lang="en" ng-app="app" class="no-js" ng-jq> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>AdminLTE 2 | Dashboard</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- Bootstrap 3.3.2 -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- Font Awesome Icons -->
<link href="../components/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<!-- Ionicons -->
<link href="../bower_components/ionicons/css/ionicons.min.css" rel="stylesheet" type="text/css"/>
<!-- Theme style -->
<link href="../bower_components/adminlte/dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css"/>
<!-- AdminLTE Skins. We have chosen the skin-blue for this starter
page. However, you can choose any other skin. Make sure you
apply the skin class to the body tag so the changes take effect.
-->
<link href="../bower_components/adminlte/dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css"/>
<!--<link rel="stylesheet" href="../bower_components/html5-boilerplate/css/normalize.css">-->
<!--<link rel="stylesheet" href="../bower_components/html5-boilerplate/css/main.css">-->
<link rel="stylesheet" href="admin-app.css">
<link rel="stylesheet" href="reportview/report-view.css">
<script src="../bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<script>
var locale = 'zh-CN';
document.write('<script src="../bower_components/angular-i18n/angular-locale_'+locale+'.js"><\/script>');
</script>
<![endif]-->
</head>
<body class="skin-blue">
<div class="wrapper">
<!-- Main Header -->
<header class="main-header">
<!-- Logo -->
<a ng-click="$event.stopPropagation()" class="logo"><b>ZAN Admin</b></a>
<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="left-side main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- search form (Optional) -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..."/>
<span class="input-group-btn">
<button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- Sidebar Menu -->
<ul class="sidebar-menu">
<li class="header">Header</li>
<!-- Optionally, you can add icons to the links -->
<li class="treeview">
<i class="fa fa-circle-o"></i>Report Views<i class="fa fa-angle-left pull-right"></i>
<ul class="treeview-menu" ng-cloak>
<li ng-repeat="dsm in dsmeta">
<a ng-href="admin-index.html#/admin/reportview/{{dsm.name}}">{{dsm.name}}</a>
</li>
</ul>
</li>
</ul><!-- /.sidebar-menu -->
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" ng-view>
<!-- Content Header (Page header) -->
</div><!-- /.content-wrapper -->
<!-- Main Footer -->
<footer class="main-footer" ng-controller="AdminSyncConsole">
<!-- To the right -->
<!-- <div class="pull-right hidden-xs">
Anything you want
</div> -->
<!-- Default to the left -->
<!-- <strong>Copyright © 2015 Company.</strong> All rights reserved. -->
<!-- Apply any bg-* class to to the info-box to color it -->
<div class="info-box bg-green">
<span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span>
<div class="info-box-content">
<span class="info-box-text">Current Sync Status</span>
<span class="info-box-number">{{syncStatus}}</span>
<!-- The progress section is optional -->
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div><!-- /.info-box-content -->
</div><!-- /.info-box -->
<div class="box box-solid box-default">
<div class="box-header">
<h3 class="box-title">Sync Sessions</h3>
</div>
<div class="box box-default collapsed-box">
<div class="box-header with-border">
<h3 class="box-title">Expandable</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div class="box-body">
The body of the box
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
</footer>
</div><!-- ./wrapper -->
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 2.1.3 -->
<script src="../bower_components/adminlte/plugins/jQuery/jQuery-2.1.3.min.js"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../bower_components/adminlte/plugins/fastclick/fastclick.min.js"></script>
<!-- build:js ../minjs/angular.js -->
<!-- angular dependencies -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/angular-translate/angular-translate.min.js"></script>
<script src="../bower_components/angular-translate-loader-partial/angular-translate-loader-partial.min.js"></script>
<script src="../bower_components/angular-touch/angular-touch.min.js"></script>
<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
<!-- endbuild -->
<!-- AdminLTE App -->
<script src="../bower_components/adminlte/dist/js/app.js" type="text/javascript"></script>
<script src="../bower_components/angular-translate/angular-translate.js"></script>
<script src="../bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<!-- build:js ../minjs/z-ui.js -->
<script src="../js/z-ui.js"></script>
<!-- endbuild -->
<script src="../bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="reportview/reportview.js"></script>
<script src="../translation/translate.js"></script>
<script src="admin-app.js"></script>
<script src="../components/util/report-view-service.js"></script>
</body>
</html>
admin-app.js:
'use strict';
var baseSyncUrl = "../api/rest/{{path.version}}/syncsessions";
var getSyncSessionsReq = {method: "GET", url: baseSyncUrl, params: {targetSystemType:{}, pageSize: ""}, path: {version: "v1"}};
// Declare app level module which depends on views, and components
var app = angular.module('app', ['z.components']);
app.controller('AdminSyncConsole', ['$scope', '$http', 'RESTCaller', function ($scope, $http, RESTCaller) {
$scope.syncStatus = "Completed";
$scope.syncSessions;
//REST API to get the sync sessions
$scope.getSyncSessions = function() {
var req = getSyncSessionsReq;
var targetSystem = {'id': '1', 'type': 'SPOTLIGHT', 'description': 'Spotlight'};
req.params.targetSystemType = targetSystem;
//Page size is not necessarily required
// req.params.pageSize =
var data = RESTCaller.getConfig(req);
data.then(function(result){
if(result) {
console.log("Result: ", result);
}
});
}
//Getting the sync sessions
console.log("Hi");
$scope.syncSessions = $scope.getSyncSessions();
//Call REST API to get the sync status
}]);
I'm confused as to why this is happening. I don't have any other problems injecting angular.min.js into my other files, and I can't seem to pinpoint where the error is coming from because it just complains about angular.min.js. I have checked and my ng-app seems to be correct and z.components comes from another module that comes from a file that I have already included called ../js/z-ui.js. RESTCaller also comes from z-ui.js file. Any help would be appreciated. Thanks!
I think that you should retrieve this module not create but I don't know what you do
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.
Additionally:
Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module
As you said:
I have checked and my ng-app seems to be correct and z.components comes from another module that comes from a file that I have already included called ../js/z-ui.js.
Do you use all of these files?
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/angular-translate/angular-translate.min.js"></script>
<script src="../bower_components/angular-translate-loader-partial/angular-translate-loader-partial.min.js"></script>
<script src="../bower_components/angular-touch/angular-touch.min.js"></script>
<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>

Categories

Resources