I have integrated reactjs in my laravel application and it works well in order to fetching data using api's. But the layout of the view has been broken. I am using a template which was working fine before adding react js. Here it looks like:
A big space from top is appearing in every page even where i haven't use react component. My codes are:
master.blade.php
<!DOCTYPE html>
<html class="no-js h-100" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{{ config('app.name', 'BVend') }}</title>
<meta name="description" content="">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> -->
<link rel="stylesheet" id="main-stylesheet" data-version="1.1.0" href="{{asset('template/styles/shards-dashboards.1.1.0.min.css')}}">
<link rel="stylesheet" href="{{asset('template/styles/extras.1.1.0.min.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('template/styles/app.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/app.css')}}" type="text/css">
</head>
<body class="h-100">
<div class="container-fluid">
<div class="row">
<!-- Main Sidebar -->
#yield('sidebar')
<!-- End Main Sidebar -->
<main class="main-content col-lg-10 col-md-9 col-sm-12 p-0 offset-lg-2 offset-md-3">
<!-- Main Navbar -->
#include('layouts.nav')
<!-- / .main-navbar -->
<div class="main-content-container container-fluid px-4">
<div class="page-header row no-gutters py-4">
<div class="col-12 col-sm-4 text-center text-sm-left mb-0">
<span class="text-uppercase page-subtitle">#yield('subtitle')</span>
<h3 class="page-title">#yield('title')</h3>
</div>
</div>
#yield('content')
</div>
</main>
</div>
</div>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/shards-ui#latest/dist/js/shards.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sharrre/2.0.1/jquery.sharrre.min.js"></script>
<script src="{{asset('template/scripts/extras.1.1.0.min.js')}}"></script>
<script src="{{asset('template/scripts/shards-dashboards.1.1.0.min.js')}}"></script>
<script src="{{asset('template/scripts/app/app-blog-overview.1.1.0.js')}}"></script>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
content.blade
#section('content')
<div class="row">
<div class="col">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="{{ route('show_machines') }}">All Machines</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="{{ route('create_machine') }}">Create Machine</a>
</li>
</div>
<div class="card-body p-0 pb-3 text-center">
<div id='app'></div>
</div>
</div>
</div>
</div>
#endsection
app (React)
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Locker extends Component {
constructor() {
super();
this.state = {
lockers: [
{
"id": 1,
"machine_id": 1,
"product_id": 0
},
{
"id": 2,
"machine_id": 1,
"product_id": 0
},
{
"id": 3,
"machine_id": 1,
"product_id": 0
},
]
}
}
render() {
return (
<div>
<table className="table mb-0">
<thead className="bg-light">
<tr>
<th scope="col" className="border-0">Locker No.</th>
<th scope="col" className="border-0">Product</th>
</tr>
</thead>
<tbody>
{this.state.lockers.map((locker, key) =>
(
<tr key={key}>
<td>{locker.id}</td>
<td>{ locker.product_id }</td>
</tr>
)
)}
</tbody>
</table>
</div>
);
}
}
if (document.getElementById('app')) {
ReactDOM.render(<Locker />, document.getElementById('app'));
}
after aside main is misplaced
Ok i have figured it out. I have included css from reactjs preset which also include bootstrap.css which i have included before. so removed the following line from master.blade.php and all set:
<link rel="stylesheet" href="{{asset('template/styles/app.css')}}" type="text/css">
Related
I'm trying to build my web portfolio and I want a card format which includes an image thumbnail and text below it. The problem I have is that can't control the size of the initial image and that makes the cards misaligned.
I'm wondering if there's way to fix it so it adjusts to any image size. Here's my code
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
<title>Pattern</title>
</head>
<body>
<nav class="navbar bg-dark navbar-dark">
<div class="container">
<i class="fas fa-code"></i> BODY OF WORK
</div>
</nav>
<section id="header" class="jumbotron text-center">
<h1 class="display-3">FRANK DIN: WEB DEVELOPER</h1>
</section>
<section id="gallery">
<div class="container">
<div class="row">
<div class="col-lg 4 mb-3">
<div class="card">
<img class="card-img-top" src="https://github.com/frankdin1/LandingPage/blob/master/Landing%20Page%20thumbnail.PNG?raw=true">
<div class="card-body">
<h5 class="card-title">Landing Page</h5>
<p class="card-text">Landing page for a fictitious dating site built with Bootstrap.</p>
Github
Webpage
</div>
</div>
</div>
<div class="col-lg 4 mb-3">
<div class="card">
<img class="card-img-top" src="https://github.com/frankdin1/Bootstrap-Image-Gallery/blob/master/BootstrapPhotoBlog%20thumbnail.PNG?raw=true">
<div class="card-body">
<h5 class="card-title">Bootstrap Image Gallery</h5>
<p class="card-text">Image gallery built using Bootstrap.</p>
Github
Webpage
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
Add this CSS:
.card-img-top {
height: 20vw; // change this value and/or units to your liking
width: 100%;
object-fit: cover;
}
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.
I need to copy the .container element without using innerHTML.
here the index.html
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/test.css">
<!-- Utilitats CSS i icones Bootstrap CDN -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="js/test.js"></script>
</head>
<body>
<div class="text-center">
<div class="card-header bg-info row">
<div class="col-sm-4">
<img src="https://pbs.twimg.com/profile_images/1046722856929947649/hytXqKH0_400x400.jpg" height="80">
</div>
<div class="col-sm-4">
<h3 class="display-4">Agenda IOC</h3>
<h4 class="text-warning">Consulta tots els esdeveniments</h4>
</div>
<div class="col-sm-4">
<h5 class="card-title">Elegeix la data:</h5>
<input id="data" type="date">
<button id="cerca">Cerca</button>
</div>
</div>
<div class="container">
<div class="card">
<div class="card_image-container">
<img class="card-image" src="http://agenda.cultura.gencat.cat/content/dam/agenda/articles/2018/07/03/033/Esculturas.jpg" alt="">
</div>
<div class="card-body">
<h3 class="card-title">Title</h3>
<p>Description</p>
Go
</div>
</div>
</div>
</div>
<!-- Utilitats js de Bootstrap CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Copy the element and show it when click in the button.
I need to create a function that I can change the values of each element created.
I am developing this site in laravel and I am having troubles when I try to use DataTables, for my design I am using AdminLTE and whenever I try to put datatables on the content the search bar, the page selector, the order by icons disappear. I am following the example ahead: https://datatables.net/examples/styling/bootstrap. The cdn's for this datatable deforms my adminLTE. https://i.imgur.com/6fY7tMF.png
I've already tried to change cdn but I don't really think that that is the problem here.
------------------------HEAD--------------------------------
<head>
<link rel="stylesheet" href="./style.css">
<link rel="shortcut icon" href="img/favicon.ico" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ config('app.name') }}</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="/bower_components/admin-lte/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="/bower_components/admin-lte/dist/css/skins/skin-blue.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css" rel="stylesheet">
</head>
------------------------BODY--------------------------------
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Gestão de Utilizadores
<small>Optional description</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Level</li>
<li class="active">Here</li>
</ol>
</section>
<!-- Main content -->
<section class="content container-fluid">
#yield('content')
<div class="table-reponsive box">
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Username</th>
<th>Password</th>
<th>Empresa</th>
<th>Conta</th>
<th>EDITAR</th>
<th>APAGAR</th>
</tr>
</thead>
<tbody>
#foreach($utilizadores as $utilizador)
<tr>
<td>{{ $utilizador->id }}</td>
<td>{{ $utilizador->username }}</td>
<td>{{ $utilizador->password }}</td>
<td>{{ $utilizador->empresa }}</td>
<td>#if($utilizador->type == 1) <b>Admin</b> #else User Normal #endif</td>
<td><a href = 'edituser/{{ $utilizador->id }}'>EDITAR</a></td>
<td><a href = 'edituser/{{ $utilizador->id }}'>APAGAR</a></td>
</tr>
#endforeach
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</section>
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 3 -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/bower_components/admin-lte/dist/js/adminlte.min.js"></script>
I expect something like the example ('https://datatables.net/examples/styling/bootstrap'). When I am actually having this: https://i.imgur.com/Wnt7tcn.png
I have a couple files I'm working with that require AJAX Calls. I have dashboad.html that hosts the main interface. I then have a leads.php file that renders information from leadsData.php into a nice Bootstrap Table. leadsData.php returns a JSON file.
When I click "Prospective Student", the right stuff happens ... it renders leads.php in the main dashboard.html. The problem is that when leads.php is rendered in dashboard.html, it doesn't get the information from leadsData.php. After some thinking, this makes sense ... there isn't an AJAX Call that requires leads.php to fetch information from leadsData.php.
|dashboard.html| AJAX --> |leads.php| AJAX --> |leadsData.php|
So it seems as if the first AJAX happens, but the second one doesn't.
Here is my code below:
dashboard.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-sanitize.min.js"></script>
</head>
<div ng-app="myApp" ng-controller="myController">
<div class="row">
<div class="col-lg-2">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Dashboard</a>
</li>
<li class="nav-item" ng-click = "LoadProspectiveStudents()">
<a class="nav-link active" href="#">Prospective Students</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col-lg-10" style="border: solid;">
<div class="container">
<h1>MAIN CONTAINER</h1>
<p ng-bind-html = "myResponse"></p>
</div>
</div>
</div>
<body>
</body>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="dashboardController.js"></script>
</html>
leads.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<!-- <textarea name="name" ng-model = "test"></textarea> -->
<h1>Hi Mustafa</h1>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" ng-model= "test">
</div>
<table class="table">
<thead>
<tr>
<th ng-click = "sortBy('first_name')">First Name</th>
<th ng-click = "sortBy('last_name')">Last Name</th>
<th ng-click = "sortBy('communityCollege')">Community College</th>
<th ng-click = "sortBy('accountCreation')">Account Creation</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "user in myData | filter : test">
<td> {{user.first_name}} </td>
<td> {{user.last_name}} </td>
<td> {{user.communityCollege}} </td>
<td> {{user.accountCreation}}</td>
<td>
<button type="button" class="btn btn-primary">View More</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="./leadsController.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
dashboardController.js
var app = angular.module('myApp', ['ngSanitize']);
app.controller('myController', function($scope, $http, $timeout) {
// $scope.myResponse = "Mustafa Hoda";
// $timeout(LoadProspectiveStudents(), 3000);
//Load Prospective Students
$scope.LoadProspectiveStudents = function(){
$http.get("leads.php")
.then(function(response) {
$scope.myResponse = response.data;
// $scope.renderedResponse = $parse($scope.myResponse);
// $scope.myResponse = "Mustafa Hoda";
}, function(response){
$scope.myResponse = "Uh oh! Something went wrong";
});
}
});