Here's my form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Bootstrap Admin Theme</title>
<!-- Bootstrap Core CSS -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- 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.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/formController.js"></script>
</head>
<body >
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">IRNIA Meditel</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-messages">
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>Read All Messages</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-messages -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-tasks">
<li>
<a href="#">
<div>
<p>
<strong>Task 1</strong>
<span class="pull-right text-muted">40% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 2</strong>
<span class="pull-right text-muted">20% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 3</strong>
<span class="pull-right text-muted">60% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 4</strong>
<span class="pull-right text-muted">80% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Tasks</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-tasks -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i> New Comment
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
<span class="pull-right text-muted small">12 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i> Message Sent
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i> New Task
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw"></i> Server Rebooted
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-alerts -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-user fa-fw"></i> User Profile
</li>
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Dashboard
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Flot Charts
</li>
<li>
Morris.js Charts
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-table fa-fw"></i> Tables
</li>
<li>
<i class="fa fa-edit fa-fw"></i> Forms
</li>
<li>
<i class="fa fa-edit fa-fw"></i> Form_details
</li>
<li>
<i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Panels and Wells
</li>
<li>
Buttons
</li>
<li>
Notifications
</li>
<li>
Typography
</li>
<li>
Icons
</li>
<li>
Grid
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Second Level Item
</li>
<li>
Second Level Item
</li>
<li>
Third Level <span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
</ul>
<!-- /.nav-third-level -->
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Blank Page
</li>
<li>
Login Page
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Create database</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Create Tables
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<form role="form">
<div class="form-group">
<label>id_entity</label>
<input class="form-control">
<p class="help-block">the id is autogenerated</p>
</div>
<div class="form-group">
<label>entity_name</label>
<input class="form-control">
<p class="help-block">the name of table required</p>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
DataTables Advanced Tables
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper" ng-app="MyApp" ng-controller="formController">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>id_field</th>
<th>name</th>
<th>size</th>
<th>type</th>
</tr>
</thead>
<tbody>
<tr class="table" ng-repeat="bd in bds">
<td> <input type="text" ng-model="bd.id_field" /> </td>
<td><input type="text" ng-model="bd.field_name" /></td>
<td><input type="text" ng-model="bd.size" /></td>
<td><input type="text" ng-model="bd.type" /></td>
</tr>
</tbody>
</table>
<td><button type="button" class="btn btn-primary" ng-click="addRow()">addRow</button></td><br>
<br><button type="submit" class="btn btn-primary">Submit</button>
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
</body>
I want to add a new row to my table using angular js , for that i declare the controller in the div with ng-controller and the model with ng-model , you will find the details below :
Here's the formController.js
function ExampleCtrl($scope){
$scope.bds = [];
$scope.addRow = function(){
var = {
id_field: $scope.id_field,
field_name: $scope.field_name,
size: $scope.size,
type: $scope.type,
};
$scope.bds.push(bd);
};
}
</html>
When i try to click into the button addRow ,it doesn't work :/
you didn't add angularjs to your project, add the following line:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
And use console.log('message') inide your angular code to debug and check if it's working or where it stops working.
Also avoid using jquery with angular, everything you need to do with jquery is doable with angular and easier, plus it is good practice not to mix both of them.
Try this code if it works.
<table>
<thead>
<tr>
<th>id_field</th>
<th>name</th>
<th>size</th>
<th>type</th>
</tr>
</thead>
<tbody>
<tr class="table" ng-repeat="bd in bds">
<td> <input type="text" ng-model="bd.id_field" /> </td>
<td><input type="text" ng-model="bd.field_name" /></td>
<td><input type="text" ng-model="bd.size" /></td>
<td><input type="text" ng-model="bd.type" /></td>
<td><button type="button" class="btn btn-primary" ng-click="addRow()">addRow</button></td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" ng-click="addRow()">addRow</button>
FormController.js
angular.module('MyApp', [])
.controller('ExampleController', [ '$scope', function($scope) {
$scope.bds = [];
$scope.addRow = function() {
var bd= {
id_field: $scope.id_field,
field_name: $scope.field_name,
size: $scope.size,
type: $scope.type,
};
$scope.bds.push(bd);
}
}]);
Related
I am facing problem below upon using the ng-inculde in angularJS. The bootstrap burger icon is not working. But if i'm not using the ng-include it works perfectly fine. Did I do something wrong?.
Is there any set-up first that I need to do before using the ng-include?.
Main html
...
<body>
<ng-include src="'../Content/Shared/Header.html'"></ng-include>
<ng-view></ng-view>
</body>
....
Include html
<header>
<div class="container">
<div class="row element-holder">
<div class="col-md-2 col-sm-4 col-12">
<a href="../main/index.html" class="text-logo-holder">
<span class="text">My Project</span>
</a>
</div>
<div class="col-md-4 col-sm-6 col-12">
<form ng-submit="searchProducts()" class="search-holder">
<input type="text" class="form-control" placeholder="Search Collection...." list="_items" ng-model="searchText" ng-keyup="searchItemNames()" autocomplete="off" />
<datalist id="_items">
<option ng-repeat="result in results" value="{{result}}">{{result}}</option>
</datalist>
<button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="col-md-6 col-sm-2 col-12">
<nav class="navbar navbar-expand-lg float-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<img src="../Content/dist/images/icon-header-menu.png" />
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Discover</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item btn-nav-item">
<a class="nav-link" href="" ng-click="logout()" ng-show="isSignedIn">Logout</a>
<a class="nav-link" href="" ng-click="signin()" ng-show="!isSignedIn">Sign In</a>
</li>
<li class="nav-item">
<a id="menu-link" class="nav-link" href="#">
<img src="../Content/dist/images/icon-header-menu.png" />
</a>
</li>
</ul>
</div>
</nav>
<div class="mobile-nav float-right">
<a id="menu-link-mobile" class="nav-link" href="#">
<img src="../Content/dist/images/icon-header-menu.png" />
</a>
</div>
</div>
</div>
</div>
<div id="sidebar-menu" class="side-menu-content">
<ul class="menu-holder">
<li>
<a href="#" class="menu-item row">
<div class="col-3 icon-holder">
<img src="../Content/dist/images/icon-inbox.png" />
</div>
<div class="col-9">
Inbox
</div>
</a>
</li>
<li>
<a href="#" class="menu-item row">
<div class="col-3 icon-holder">
<img src="../Content/dist/images/icon-purchase.png" />
</div>
<div class="col-9">
Purchases
</div>
</a>
</li>
</ul>
<div class="button-holder row">
<div class="col-6 pl-default pr-default" ng-show="!isSignedIn">
<input type="submit" class="btn btn-primary" value="Login/Sign Up" ng-click="signin()" />
</div>
<div class="col-6 pl-default pr-default" ng-show="isSignedIn">
<input type="submit" class="btn btn-secondary" value="Logout" ng-click="logout()" />
</div>
<div class="col-6 pl-default pr-default">
<input type="submit" class="btn btn-primary" value="Change Password" />
</div>
</div>
</div>
ng-include will:
Fetches, compiles and includes an external HTML fragment.
So that fragment added after page load and your events bind with js will not work on these dynamically added elements. To solve it, you can bind these events with onload arguments which is expression to evaluate when a new partial is loaded. Or you can try attach event to dynamic elements in javascript
Please, remove the single quote.
<div ng-include="../Content/Shared/Header.html"></div>
It seems to be a tag closing issue.
You need to close the <header> tag at the end of Header.html
use this :
<div ng-include src="'../Content/Shared/Header.html'"></div>
i want to list the name of courses from my database in my navbar menu (app view) :
#foreach ($cours as $cour)
<li><a class="dropdown-item">{{ $cour->nom }}</a></li>
#endforeach
and i created my layoutcontroller to display the view :
class layoutController extends Controller
{
public function showView()
{
$cours = DB::table('cours')->select('id','nom')->get();
return view('app',['cours' => $cours]);
}
}
then i made a route for it :
Route::get('#','layoutController#showView');
the problem is when i navigate to login view for exemple it shows an error that the variable cours is undefined in my app layout view :
Undefined variable: cours (View: C:\wamp64\www\opencourses\resources\views\layouts\app.blade.php) (View: C:\wamp64\www\opencourses\resources\views\layouts\app.blade.php)
here is my login view :
#extends('layouts.app')
#section('content')
<div class="container-fluid">
<div class="row">
<div class="col-md-8 offset-md-2 px-3 py-3 pt-md-4 pb-md-4">
<div class="card">
<div class="card-header">Connexion</div>
<div class="card-body">
<form class="form-horizontal" method="POST">
{{ csrf_field() }}
<div class="row mb-3">
<label for="email" class="col-sm-3 offset-sm-1 col-form-label">Adresse Email</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="email" name="email">
</div>
</div>
<div class="row mb-3">
<label for="password" class="col-sm-3 offset-sm-1 col-form-label">Mot de passe</label>
<div class="col-sm-7">
<input type="password" class="form-control" id="password" name="password">
</div>
</div>
<div class="row mb-3">
<div class="offset-sm-4 col-sm-7">
<button type="submit" class="btn btn-primary">Envoyer</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
#endsection
and here is my app view :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Mon blog</title>
<link rel="icon" href="https://www.jsdelivr.com/img/icon_256x256.png">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css">
<!-- other CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/css/flag-icon.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/font-awesome#4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light p-3 px-md-4 mb-3 bg-body border-bottom shadow-sm">
<div class="container-fluid">
<a class="navbar-brand" href="welcome.html">
<img src="https://www.jsdelivr.com/img/icon_256x256.png" width="30" height="30" class="d-inline-block align-top" alt=""> Mon blog
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 d-flex">
<li class="nav-item px-2">
<a class="nav-link active" aria-current="page" href="<?php echo url('')?>">Accueil</a>
</li>
<li class="nav-item dropdown px-2">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Articles
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
#foreach ($cours as $cour)
<li><a class="dropdown-item">{{ $cour->nom }}</a></li>
#endforeach
</ul>
</li>
<!-- si utilisateur non authentifié -->
#guest
<li class="nav-item px-2">
<a class="btn btn-outline-primary me-2" href="<?php echo url('login')?>">Connexion</a>
</li>
<li class="nav-item px-2">
<a class="btn btn-primary" href="<?php echo url('register')?>">S'inscrire</a>
</li>
#else
<!-- si utilisateur authentifié -->
<li class="nav-item px-2">
<a class="nav-link" href="home">Mon compte</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="{{ route('logout') }}" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">Déconnexion</a>
</li>
#endguest
</ul>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</div>
</div>
</nav>
#yield('content')
<footer class="container pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="https://www.jsdelivr.com/img/icon_256x256.png" alt="" width="24" height="24">
<small class="d-block mb-3 text-muted">© 2017–2021</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="link-secondary" href="#">Team feature</a></li>
<li><a class="link-secondary" href="#">Stuff for developers</a></li>
<li><a class="link-secondary" href="#">Another one</a></li>
<li><a class="link-secondary" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="link-secondary" href="#">Resource name</a></li>
<li><a class="link-secondary" href="#">Another resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="link-secondary" href="#">Privacy</a></li>
<li><a class="link-secondary" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
In your existing action you've sent $cours variable only for login view blade. In this kind of situations you can use share() method via "View" facade. This will allow you to share the variable to all your blades (which includes your whole layout blade).
// don't forget to include this class in the top
use Illuminate\Support\Facades\View;
public function showView()
{
$cours = DB::table('cours')->select('id','nom')->get();
View::share('action', $action);
return view('login'); // here not need to pass shared variable
}
In other words, with this you can increase the visibility scope of your sent variables.
I use model class to get data from DB. I hope this will help for you,
class Course extends Model
{
//
protected $table = 'cours';
protected $fillable = array('nom');
}
class LayoutController extends Controller
{
public function showView()
{
$cours = Course::select('id','nom')->get();
$data['cours'] = $cours;
return view('app', $data);
}
}
In my index.html code is:
i have written ng-include directive as
and my menu.html file is
<div class="container">
<div class="row row-content" ng-controller="MenuController">
<div class="col-xs-12">
<button ng-click="toggleDetails()" class="btn btn-xs btn-primary pull-right" type="button">
{{showDetails ? 'Hide Details':'Show Details'}}
</button>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"
ng-class="{active:isSelected(1)}">
<a ng-click="select(1)"
aria-controls="all menu"
role="tab">The Menu</a></li>
<li role="presentation"
ng-class="{active:isSelected(2)}">
<a ng-click="select(2)"
aria-controls="appetizers"
role="tab">Appetizers</a></li>
<li role="presentation"
ng-class="{active:isSelected(3)}">
<a ng-click="select(3)"
aria-controls="mains"
role="tab">Mains</a></li>
<li role="presentation"
ng-class="{active:isSelected(4)}">
<a ng-click="select(4)"
aria-controls="desserts"
role="tab">Desserts</a></li>
</ul>
<div class="tab-content">
<ul class="media tab-pane fade in active">
<li class="media" ng-repeat = "dish in dishes | filter:filtText">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p ng-show="showDetails">{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
but i am not able to get expected result from ng-include directive and i am not able to see menu.html output in my index.html file after opening it in any browser.
I am new to angularjs. I am trying to create a header section that can be use on every page using angularjs. I have seen one example using ng-include. But when i tried i am getting an error.
Here is my index.html which try to include the header file:
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>
<!-- Custom CSS -->
<link href="css/style1.css" rel='stylesheet' type='text/css'/>
<!-- font CSS -->
<!-- font-awesome icons -->
<link rel="stylesheet" href="bower_components/font-awesome-animation/dist/font-awesome-animation.min.css">
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons -->
<!-- js-->
<script src="js/jquery-1.11.1.min.js"></script>
<link href="css/animate.css" rel="stylesheet" type="text/css" media="all">
<script src="js/underscore-min.js" type="text/javascript"></script>
<script src= "js/moment-2.2.1.js" type="text/javascript"></script>
</head>
<body class="cbp-spmenu-push" ng-app>
<div class="main-content">
<!-- header-starts -->
<div ng-include="'header.html'"></div>
</div>
</body>
</html>
Here is my header.html file which i want to include.
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<!--logo -->
<div class="logo" style="width: 229px">
<a href="index.html">
<span>Dashboard</span>
</a>
</div>
<!--//logo-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31"/>
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div><!--//end-search-box -->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<i class="fa fa-envelope faa-shake animated"></i><span class="badge">3</span>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.png" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/2.png" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.png" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
See all messages
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<i class="fa fa-bell faa-ring animated"></i><span class="badge blue">3</span>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/2.png" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.png" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.png" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
See all notifications
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<i class="fa fa-tasks "></i><span class="badge blue1">15</span>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
See all pending tasks
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<!--notification menu end -->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/a.png" alt=""> </span>
<div class="user-name">
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <i class="fa fa-sign-out"></i> Logout </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
The error i am getting is:
XMLHttpRequest cannot load file:///home/gaurav/Documents/newadmin/adminpanel/header.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Can anybody tell me what i am doing wrong.
The problem is because of file:// protocol. Mostly all browsers disallow XHR requests when file is been served from file://. That is why AJAX requests are failing. And ng-include use them to download files.
You can launch Chrome with --allow-file-access-from-files parameter to disable checks for file://.
FireFox should load files if they are in same folder (check this for more info).
Hope this helps.
I've added the dropdown in the header.html which i included in the index.html of an angular app.
<ul class="nav navbar-nav navbar-right">
<li class="dropdown profile hidden-xs">
<a class="dropdown-toggle" data-toggle="dropdown">
<span class="meta">
<span class="text">{{slUserObj.username}}</span>
<span class="caret"></span>
</span>
</a>
<ul class="dropdown-menu animated flipInX" role="menu">
<li>
<a href="javascript:void(0);" ng-click="showProfile();main.page='profile'">
<span class="icon"><i class="fa fa-user"></i>
</span>My Account</a>
</li>
<li>
<a href="javascript:void(0);" ng-click="showProfile();main.page='profile'">
<span class="icon"><i class="fa fa-user"></i>
</span>Carreir Details</a>
</li>
<!--<li>
<a href="javascript:void(0);">
<span class="icon"><i class="fa fa-envelope"></i>
</span>Messages</a>
</li>
<li>
<a href="javascript:void(0);">
<span class="icon"><i class="fa fa-cog"></i>
</span>Settings</a>
</li>-->
<li class="divider"></li>
<li>
<a href="javascript:void(0);" ng-click="logout()">
<span class="icon"><i class="fa fa-sign-out"></i>
</span>Logout</a>
</li>
</ul>
</li>
here is the index.html
<section id="main-wrapper" class="theme-default">
<!-- Page wrapper -->
<header id="header" ng-include="'views/header.html'" ng-show="isAuthenticated"></header>
<!-- Left Sidebar Navigation -->
<aside class="sidebar sidebar-left" ng-include="'views/left-sidebar.html'" ng-show="isAuthenticated"></aside>
<!-- Content wraper -->
<section class="main-content-wrapper" ng-class="{'main-content-wrapper':isAuthenticated,'main-content-wrapper-full':!isAuthenticated}">
<!-- Main content view -->
<div ui-view></div>
<!-- Footer -->
<div ng-include="'views/footer.html'"></div>
</section>
<!-- /Content wraper-->
Now the dropdown in the header.html is not working once unhiding the header block after login, but its working when i'm refreshing the page after login.