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.
Related
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);
}
}
I want to fetch category wise data in home page's sections but I am unable to do this. Only one category section is working
I made Category model with belongs to Section model
My Indexcontroller code
namespace App\Http\Controllers\Front;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Slider;
use App\Category;
use App\Section;
class IndexController extends Controller
{
public function index(){
$sliders = Slider::where('status',1)->get();
$categories = Category::with('sections')->where('status',1)->get();
//dd($categories);die;
return view('frontend.index')->with(compact('sliders','categories'));
}
}
My Blade file
#extends('layouts.frontLayout.layout')
#section('content')
<div class="slider_block">
<div class="flexslider top_slider">
<ul class="slides">
#foreach($sliders as $slider)
<li class="slide1">
<div class="container">
<div class="flex_caption1">
<p class="slide-heading FromTop">{{ $slider['slider_title'] }}</p><br/>
<p class="sub-line FromRight" style="width: 60%;line-height: 20px;font-size: 16px;">{{ $slider->slider_text }} </p><br>
{{ $slider['button_text'] }}
</div>
<div class="flex_caption2 FromRight" style="background-image: url(/images/sliders/{{ $slider['slider_image'] }});"></div>
</div>
</li>
#endforeach
</ul>
</div>
</div>
</header>
<section class="wrapper">
<section class="promo_box dark wow fadeInDown">
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="promo_content">
<h3>go2tourism</h3>
<p>Lorem ipsum dolor sit amet, cons adipiscing elit. Aenean commodo ligula eget dolor. </p>
</div>
</div>
<div class="col-sm-3">
<div class="pb_action">
<a class="btn btn-lg btn-default" href="#fakelink">
<i class="fa fa-shopping-cart"></i>
Order Now
</a>
</div>
</div>
</div>
</div>
</section>
<section class="latest_work">
<div class="container">
<div class="row sub_content">
<div class="col-md-12">
<div class="dividerHeading">
<h4><span>Find your best tours</span></h4>
</div>
<div id="recent-work-slider" class="owl-carousel">
#foreach($categories as $category)
#if($category['sections']['section_name'] == "Tours")
<div class="product">
<figure class="touching effect-bubba">
<div class="product-img">
<img class="img-responsive" src="{{ asset('images/categories/'.$category['category_banner']) }}">
<div class="option">
<a class="fa fa-shopping-cart" href="portfolio_single.html"></a>
<a class="fa fa-search mfp-image" href="{{ asset('images/categories/'.$category['category_banner']) }}"></a>
</div>
</div>
</figure>
<div class="product-info">
<div class="product-title">
<h3>
{{ $category['category_name'] }}
</h3>
</div><br>
</div>
</div>
#endif
#endforeach
</div>
</div>
</div>
</div>
</section>
<section class="latest_work">
<div class="container">
<div class="row sub_content">
<div class="col-md-12">
<div class="dividerHeading">
<h4><span>Find your best stays</span></h4>
</div>
<div id="recent-work-slider" class="owl-carousel">
#foreach($categories as $category)
#if($category['sections']['section_name'] == "Stays")
<div class="product">
<figure class="touching effect-bubba">
<div class="product-img">
<img class="img-responsive" src="{{ asset('images/categories/'.$category['category_banner']) }}">
<div class="option">
<a class="fa fa-shopping-cart" href="portfolio_single.html"></a>
<a class="fa fa-search mfp-image" href="{{ asset('images/categories/'.$category['category_banner']) }}"></a>
</div>
</div>
</figure>
<div class="product-info">
<div class="product-title">
<h3>
{{ $category['category_name'] }}
</h3>
</div><br>
</div>
</div>
#endif
#endforeach
</div>
</div>
</div>
</div>
</section>
<section class="latest_work">
<div class="container">
<div class="row sub_content">
<div class="col-md-12">
<div class="dividerHeading">
<h4><span>Find your best cars</span></h4>
</div>
<div id="recent-work-slider" class="owl-carousel">
#foreach($categories as $category)
#if($category['sections']['section_name'] == "Cars")
<div class="product">
<figure class="touching effect-bubba">
<div class="product-img">
<img class="img-responsive" src="{{ asset('images/categories/'.$category['category_banner']) }}">
<div class="option">
<a class="fa fa-shopping-cart" href="portfolio_single.html"></a>
<a class="fa fa-search mfp-image" href="{{ asset('images/categories/'.$category['category_banner']) }}"></a>
</div>
</div>
</figure>
<div class="product-info">
<div class="product-title">
<h3>
{{ $category['category_name'] }}
</h3>
</div><br>
</div>
</div>
#endif
#endforeach
</div>
</div>
</div>
</div>
</section>
<section class="promo_box reverse wow bounceInUp" data-wow-offset="50">
<div class="container">
<div class="row">
<div class="col-sm-9 col-md-9 col-lg-9">
<div class="promo_content">
<h3>Do you have any questions to us?</h3>
<p>Please contact us without any hesitation </p>
</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="pb_action">
<a class="btn btn-lg btn-default" href="#">
Contact Us
</a>
</div>
</div>
</div>
</div>
</section>
</section>
#endsection
Only first section's categories are showing but others section categories are not showing
Please help me
I am trying to create a pills nav-bar in my react project and my links are not working although it shows the id is being passed through. Can anyone show me where my mistake is, or why it isn't working?
Here is my code:
render(){
return(
<div className="searchContainer" dir="rtl">
<ul className="nav nav-pills">
<li className="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div className="tab-content">
<div id="home" className="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" className="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" className="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
</div>
);
}
}
I have included these scripts in app.jsx:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I have created a functional component in react, Which just contains the markup you have provided and some libraries
React
react-dom
bootstrap css
bootstrap js
jquery
Make sure that you are using all these js libraries and also script ordering is important. Check in code snippet. You can see the running code as well.
const Comp = () => (
<div>
<h3> Test 1 </h3>
<hr/>
<ul className="nav nav-pills">
<li className="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div className="tab-content">
<div id="home" className="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" className="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" className="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
</div>
);
ReactDOM.render( <Comp /> ,
document.getElementById('root')
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="root"></div>
I am using AngularJs and Bootstrap. While I am using $RouteProvider for SPA, I am using bootstrap for the layout. This is working fine.
However, I am now trying to use Bootstrap nav-tabs to have tab based navigations.
My HTML is like this:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<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="#/mis"><i class="fa fa-tachometer"></i> TrigonMeter</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar" class="navbar-collapse collapse">
<ul id="tabs" class="nav navbar-nav nav-tabs container-fluid" data-tabs="tabs">
<li class="active"><a data-target="#db" href="#db" data-toggle="tab">Dashboard</a></li>
<li><a data-target="#admin" href="#admin" data-toggle="tab">Admin</a></li>
<li><a data-target="#mis" href="#mis" data-toggle="tab">MIS</a></li>
<li><a data-target="#fin" href="#fin" data-toggle="tab">Finance</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-link">Hi {{globals.currentUser.username}}</li>
<li><span class="glyphicon glyphicon-log-out"></span>Logout</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
For the tabs. This works fine. And the following is the tab-content section:
<div class="container-fluid">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="row">
<div id="my-tab-content" class="tab-content col-sm-2 col-md-2 sidebar">
<div class="tab-pane active" id="db">
<h1>Dashboard</h1>
<ul>
<li>Organisation Details</li>
<li>Job Numbers</li>
<li>Job Expenses</li>
<li>Job Financial Details</li>
<li>Contracts</li>
</ul>
</div>
<div class="tab-pane" id="admin">
<h1>Admin</h1>
<p>Organisation Details</p>
</div>
<div class="tab-pane" id="mis">
<h1>MIS</h1>
<ul>
<li>Job Numbers</li>
<li>Job Expenses</li>
<li>Job Financial Details</li>
<li>Contracts</li>
</ul>
</div>
<div class="tab-pane" id="fin">
<h1>Finance</h1>
<p>orange orange orange orange orange</p>
</div>
</div>
<div class="col-sm-10 col-md-10">
<div ng-view></div>
</div>
</div>
</div>
But The tab-content section is not working.
Please do let me know if I could explain the problem.
Is there a way to do this?
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);
}
}]);