i'm using ajax load to get some content on my page. I'm working with bootstrap 3 and bootstrap toggle. when the content is loaded the bootstrap 3 content works fine (you can clearly see the panel panel-primary). But the bootstrap toggle content doesn't get loaded (you can just see some checkboxes). Does annyone know how to get this working? Or should i look out to some other toggle switches? Ifso which ones?
EDIT: i haven't tested out event binding yet because i cant get the bootstrap toggle css to work on the ajax loaded code. Event binding has nothing to do with the css right?
Scripts used by the main html code (the one with ajax load)
Main html code
code being loaded into a div by the main html code
<!-- 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>
<!-- Bootstrap Toggle JavaScript -->
<script src="../bower_components/bootstrap-toggle-master/js/bootstrap-toggle.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<!-- Custom Domotica JavaScript -->
<script> $(document).ready(function(){
// Set trigger and container variables
var trigger = $('#side-menu li ul li a'),
container = $('#page-wrapper');
// Fire on click
trigger.on('click', function(){
// Set $this for re-use. Set target from data attribute
var $this = $(this),
target = $this.data('target');
alert("target: " + target)
// Load target page into container
container.load(target + '.html', function (response, status, xhr) {});
// Stop normal link behavior
return false;
});
});
</script>
<!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="Home automation web page">
<meta name="author" content="">
<title>Home</title>
<!-- Bootstrap Core CSS -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap toggle -->
<link href="../bower_components/bootstrap-toggle-master/css/bootstrap-toggle.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]-->
</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">Home</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-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> Failure
<span class="pull-right text-muted small">No respons from Controller 1</span>
</div>
</a>
</li>
</ul>
<!-- /.dropdown-alerts -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-gear fa-fw"></i>
</a>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-sign-out fa-fw"></i>
</a>
</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>
<i class="glyphicon glyphicon-home"></i> House<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Weather
</li>
<li>
Energy
</li>
<li>
Water
</li>
</ul>
</li>
<li>
<i class="glyphicon glyphicon-star"></i> 1st floor<span class="fa arrow"></span>
<ul class="nav nav-second-level" id="side-menu2">
<li>
Hallway
</li>
<li>
Main bedroom
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="glyphicon glyphicon-star"></i> main floor<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Kitchen
</li>
<li>
Living room
</li>
<li>
Garage
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="glyphicon glyphicon-star"></i> Basement
<!-- /.nav-second-level -->
</li>
<li>
<i class="glyphicon glyphicon-tree-deciduous"></i> Garden
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
</body>
</html>
<div class="panel panel-primary" id="switchespanel">
<div class="panel-heading">
<h3 class="panel-title">Switches</h3>
</div>
<div class="panel-body">
<table class="table">
<tr>
<th>Location</th>
<th>State</th>
</tr>
<tr>
<td>Testswitch0</td>
<td>
<label>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S0" data-size="mini">
</label>
</td>
</tr>
</table>
</div>
</div>
Make sure that you are loading both the bootstrap-toggle js file and css file properly. Specifically check that they are in the location your links point to, or even use the cdn versions listed below:
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
Your paths must be wrong or you forgot to include the js file altogether, and you should see a warning about this in your console because otherwise the code works fine.
Regarding dynamically loaded content.
The first elements work because, after the html first loads, bootstrap-toggle.min.js looks for any elements that have the attribute data-toggle="toggle" and calls .bootstrapToggle() on them applying the plugin. This only happens when the page loads.
If you later add more toggles, you'll need to initialize them yourself via .bootstrapToggle(). Iv'e updated the example below to simulate adding toggles dynamically and explain the approach I would take to do that. See the comments in the code for more details.
// timeout to simulate ajax
setTimeout(function(){
// add an element dynamically,
$('.table').append('<tr><td>Testswitch0</td><td><label><input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S2" data-size="mini"></label></td></tr>');
// now that we have dynamically loaded elements
// we need to initialize any toggles that were added
// you shouldn't re-initialize any toggles already present
// but we also do want to have to figure out how to find the ones we added
// instead, we'll destroy all toggles and recreate all new ones
$("[data-toggle='toggle']").bootstrapToggle('destroy')
$("[data-toggle='toggle']").bootstrapToggle();
}, 2000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<div class="panel panel-primary" id="switchespanel">
<div class="panel-heading">
<h3 class="panel-title">Switches</h3>
</div>
<div class="panel-body">
<table class="table">
<tr>
<th>Location</th>
<th>State</th>
</tr>
<tr>
<td>Testswitch0</td>
<td><label>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S0" data-size="mini">
</label></td>
</tr>
<tr>
<td>Testswitch0</td>
<td><label>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S1" data-size="mini">
</label></td>
</tr>
</table>
</div>
</div>
The best solution that worked:
1- Load Jquery before bootstrap. Here Jquery first, Ajax second and bootstrap in the end.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/js/bootstrap4-toggle.min.js"></script>
2- Call bootstrapToggle on ajax complete:
$(document).ajaxComplete(function() {
$('input[type=checkbox][data-toggle^=toggle]').bootstrapToggle();
});
3- Note: Call your custom script jquery at the end
Related
I'm a first-time coder and know next to nothing. I'm trying to learn html, css, and js online. I'm trying to create a a responsive site where the navbar menu collapses on smaller resolutions. As of now the menu icon gets highlighted in white when I click on it but doesn't expand to show the items.
I'm using bootstrap 3.3.6 and jquery 2.1.4 (I know it's old but the course I'm learning from is using these)
Thanks in advance!!
(PS: Ignore the content, names etc, I'm just trying to keep it interesting for myself)
<!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">
<title>Gorilla Sports</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style_ch.css">
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght#300;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght#0,500;1,500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a href="index.html" class="pull-left visible-md visible-lg" >
<div id="logo-img" ></div>
</a>
<div class="navbar-brand">
<h1>Gorilla Sports</h1>
<p>
<img src="Images/gorilla_small.jpg" alt="Gorilla">
<span>Gorilla</span>
</p>
</div>
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#collapsable-nav"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li>
<a href="menu-categories.html">
<span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> Menu</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-info-sign"></span><br class="hidden-xs"> About</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-certificate"></span><br class="hidden-xs"> Awards</a>
</li>
<li id="phone" class="hidden-xs">
<a href="tel:+91-9910673649">
<span>+91-9910673649</span></a><div>* We Deliver</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
https://jsfiddle.net/fjg1c5bk/ your collepse menu is working. Maybe your bootsrap libraries is not correct. Can u change them with belows and try again
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
I used the document from jstree page.I want to use it in my laravel project so when i click on a root node it will show the child of that node but when i insert this here i dont know why the button doesnt work.It works if i do it just the html form but not when i use extends (layouts.master).It shows the child node and the root node but not with their styles and the button doesnt work.Thanks in advance
masters.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>
#yield('title')
</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="../assets/css/now-ui-dashboard.css?v=1.5.0" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('assets/css/dataTables.min.css') }}">
<!--jstree-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body class="">
<div class="wrapper ">
<div class="sidebar" data-color="orange">
<div class="logo">
<a href="#" class="simple-text logo-normal">
Company
</a>
</div>
<div class="sidebar-wrapper" id="sidebar-wrapper">
<ul class="nav">
<li class=" {{ 'dashboard' == request()->path() ? 'active' : '' }} ">
<a href="/dashboard">
<i class="now-ui-icons design_app"></i>
<p>Dashboard</p>
</a>
</li>
<li class=" {{ 'role-register' == request()->path() ? 'active' : '' }} ">
<a href="/role-register">
<i class="now-ui-icons users_single-02"></i>
<p>Employee Profile</p>
</a>
</li>
<li class=" {{ 'department' == request()->path() ? 'active' : '' }} ">
<a href="/department">
<i class="now-ui-icons design_bullet-list-67"></i>
<p>Department</p>
</a>
</li>
<li>
<a href="/home">
<i class="now-ui-icons text_caps-small"></i>
<p>Your Profile</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel" id="main-panel">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent bg-primary navbar-absolute">
<div class="container-fluid">
<div class="navbar-wrapper">
<div class="navbar-toggle">
<button type="button" class="navbar-toggler">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<a class="navbar-brand" href="#">Dashboard</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navigation">
<form>
<div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Search...">
<div class="input-group-append">
<div class="input-group-text">
<i class="now-ui-icons ui-1_zoom-bold"></i>
</div>
</div>
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/home">
<i class="now-ui-icons users_single-02"></i>
<p>
<span class="d-lg-none d-md-block">Account</span>
</p>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="panel-header panel-header-sm">
</div>
<div class="content">
#yield('content')
</div>
<footer class="footer">
</footer>
</div>
</div>
<!--jstree-->
<!-- 4 include the jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<!-- 5 include the minified jstree source -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
$(function () {
// 6 create an instance when the DOM is ready
$('#jstree').jstree();
// 7 bind to events triggered on the tree
$('#jstree').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
// 8 interact with the tree - either way is OK
$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
});
});
</script>
<!--jstree-->
<!-- Core JS Files -->
<script src="../assets/js/core/jquery.min.js"></script>
<script src="../assets/js/core/popper.min.js"></script>
<script src="../assets/js/core/bootstrap.min.js"></script>
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<script src="{{ asset('assets/js/dataTables.min.js') }}"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chart JS -->
<script src="../assets/js/plugins/chartjs.min.js"></script>
<!-- Notifications Plugin -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Now Ui Dashboard: parallax effects, scripts for the example pages etc -->
<script src="../assets/js/now-ui-dashboard.min.js?v=1.5.0" type="text/javascript"></script><!-- Now Ui Dashboard DEMO methods, don't include it in your project! -->
<script src="../assets/demo/demo.js"></script>
#yield('scripts')
</body>
</html>
page.blade.php
#extends ('layouts.master')
#section('title')
Employee Management | Admin
#endsection
#section('content')
<!-- 3 setup a container element -->
<div id="jstree">
<!-- in this example the tree is populated from inline HTML -->
<ul>
<li>Root node 1
<ul>
<li id="child_node_1">Child node 1</li>
<li>Child node 2</li>
</ul>
</li>
<li>Root node 2</li>
</ul>
</div>
<button>demo button</button>
<!-- 4 include the jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<!-- 5 include the minified jstree source -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
$(function () {
// 6 create an instance when the DOM is ready
$('#jstree').jstree();
// 7 bind to events triggered on the tree
$('#jstree').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
// 8 interact with the tree - either way is OK
$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
});
});
</script>
#endsection
#section('scripts')
$(document).ready( function () {
$('#dataTable').DataTable();
} );
#endsection
I have a basic html-page with a navbar (Navbar Documentation) and a collapsible sidenav (SideNav Documentation).
The sidenav itself works fine but the "onOpenStart" and "onEndClose" events both trigger as soon as the page is done loading and not when the sidenav opens/closes.
I guess an alternative would be to hook some events on the sidenav-trigger and go from there but that seems quite unneccessary if these events already exist.
JsFiddle: https://jsfiddle.net/gvgo2Lu2/2/
Any help would be appreciated
HTML
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<nav>
<div class="nav-wrapper">
<div class="row">
<div class="col s12">
Logo
<a href="#" data-target="mobile-nav" class="sidenav-trigger">
<i id="test" class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
Link
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- MOBILE NAV -->
<ul class="sidenav" id="mobile-nav">
<li>
Link
</li>
</ul>
</body>
JS
var elem = document.querySelector('.sidenav');
var instance = M.Sidenav.init(elem, {
onOpenStart: console.log("I trigger as soon as the page is loaded"),
onCloseEnd: console.log("same")
});
According to the documentation the onOpenStart and onCloseEnd events need a callback function. But, you are using the result of a computation: console.log(....). Because that value is undefined you are not adding the event handlers!
In order to overcome the issue you need to change your init to (updated fiddle):
var elem = document.querySelector('.sidenav');
var instance = M.Sidenav.init(elem, {
onOpenStart: function () {
console.log("I trigger as soon as the page is loaded");
},
onCloseEnd: function () {
console.log("same");
}
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<nav>
<div class="nav-wrapper">
<div class="row">
<div class="col s12">
Logo
<a href="#!" data-target="mobile-nav" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
Link
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- MOBILE NAV -->
<ul class="sidenav" id="mobile-nav">
<li>
Link
</li>
</ul>
I'm using AngularJS and Epoch with ng-epoch directive wrapper.
Here is my module file
angular.module('RDash', ['ui.bootstrap', 'ui.router', 'ngCookies','ng-oboe','ng.epoch'])
.config(function (oboeProvider) {
/* If we were so inclined, we could change the oboe defaults here - headers, etc. */
// oboeProvider.defaults = {};
});
I didn't make any changes in controller. Because I want to show just chart outline without data at page.
Here is my template file:
<div class="row" ng-controller="StatsCtrl">
<div class="col-lg-12">
<rd-widget>
<rd-widget-header icon="fa fa-line-chart" title="Cpu">
</rd-widget-header>
<rd-widget-body classes="medium no-padding">
<epoch-live-line chart-height="200" chart-data="" chart-stream=""> </epoch-live-line>
</rd-widget-body>
</rd-widget>
</div>
<div class="col-lg-12">
<rd-widget>
<rd-widget-header icon="fa fa-area-chart" title="Memory">
</rd-widget-header>
<rd-widget-body classes="medium no-padding">
</rd-widget-body>
</rd-widget>
</div>
</div>
Also here is my index
<!doctype html>
<html lang="en" ng-app="RDash">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RDash AngularJS</title>
<!-- STYLES -->
<!-- build:css lib/css/main.min.css -->
<link rel="stylesheet" type="text/css" href="components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="components/rdash-ui/dist/css/rdash.min.css">
<link rel="stylesheet" type="text/css" href="components/epoch/epoch.min.css" />
<!-- endbuild -->
<!-- SCRIPTS -->
<!-- build:js lib/js/main.min.js -->
<script type="text/javascript" src="components/angular/angular.min.js"></script>
<script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="components/oboe/dist/oboe-browser.min.js"></script>
<script type="text/javascript" src="components/ng-oboe/dist/ng-oboe.js"></script>
<script type="text/javascript" src="components/d3/d3.min.js"></script>
<script type="text/javascript" src="components/epoch/epoch.min.js"></script>
<script type="text/javascript" src="components/ng-epoch/ng-epoch.js"></script>
<!-- endbuild -->
<!-- Custom Scripts -->
<script type="text/javascript" src="js/dashboard.min.js"></script>
</head>
<body ng-controller="MasterCtrl">
<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar">
<li class="sidebar-main">
<a ng-click="toggleSidebar()">
Dashboard
<span class="menu-icon glyphicon glyphicon-transfer"></span>
</a>
</li>
<li class="sidebar-title"><span>NAVIGATION</span></li>
<li class="sidebar-list">
Dashboard <span class="menu-icon fa fa-tachometer"></span>
</li>
<li class="sidebar-list">
Tables <span class="menu-icon fa fa-table"></span>
</li>
</ul>
<div class="sidebar-footer">
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular" target="_blank">
Github
</a>
</div>
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular/README.md" target="_blank">
About
</a>
</div>
<div class="col-xs-4">
<a href="#">
Support
</a>
</div>
</div>
</div>
<!-- End Sidebar -->
<div id="content-wrapper">
<div class="page-content">
<!-- Header Bar -->
<div class="row header">
<div class="col-xs-12">
<div class="user pull-right">
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<img src="img/avatar.jpg">
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Joe Bloggs
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Profile
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Logout
</a>
</li>
</ul>
</div>
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<i class="fa fa-bell-o"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Notifications
</li>
<li class="divider"></li>
<li>
Server Down!
</li>
</ul>
</div>
</div>
<div class="meta">
<div class="page">
Dashboard
</div>
<div class="breadcrumb-links">
Home / Dashboard
</div>
</div>
</div>
</div>
<!-- End Header Bar -->
<!-- Main Content -->
<div ui-view></div>
</div><!-- End Page Content -->
</div><!-- End Content Wrapper -->
</div><!-- End Page Wrapper -->
</body>
</html>
Why I am getting this error? I can't figure out.
TypeError: $element.epoch is not a function
at h.$scope.renderEpoch (http://localhost:4444/lib/js/main.min.js:434:28)
at liveLineFunction (http://localhost:4444/lib/js/main.min.js:504:28)
at http://localhost:4444/lib/js/main.min.js:65:60
at K (http://localhost:4444/lib/js/main.min.js:55:142)
at g (http://localhost:4444/lib/js/main.min.js:47:397)
at http://localhost:4444/lib/js/main.min.js:47:17
at http://localhost:4444/lib/js/main.min.js:48:359
at w (http://localhost:4444/lib/js/main.min.js:52:291)
at za.link (http://localhost:4444/lib/js/main.min.js:206:239)
at K (http://localhost:4444/lib/js/main.min.js:55:142) <div class="epoch ng-scope ng-isolate-scope" chart-height="200" chart-data="" chart-stream="">
As per the preparation section here, you need to load jQuery first and then epoch.js like below.
If you do not already have jQuery and AngularJS included:
<script src="[PATH_TO_BOWER_COMPNENTS]/jquery/dist/jquery.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/angular/angular.min.js"></script>
After you load those two libraries, include:
<script src="[PATH_TO_BOWER_COMPNENTS]/d3/d3.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/epoch/epoch.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/ng-epoch/ng-epoch.js"></script>
I have a site and i am working in php html css javascript/jquery
i am using bootstrap theme for the first time. Its so good using bootstrap but i have a problem in menu bar navigation active link
even if i add a jquery changing a active class it doesnot work .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Real Estate</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="assets/style.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/script.js"></script>
<!-- Owl stylesheet -->
<link rel="stylesheet" href="assets/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="assets/owl-carousel/owl.theme.css">
<script src="assets/owl-carousel/owl.carousel.js"></script>
<!-- Owl stylesheet -->
<!-- slitslider -->
<link rel="stylesheet" type="text/css" href="assets/slitslider/css/style.css" />
<link rel="stylesheet" type="text/css" href="assets/slitslider/css/custom.css" />
<script type="text/javascript" src="assets/slitslider/js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="assets/slitslider/js/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="assets/slitslider/js/jquery.slitslider.js"></script>
<!-- slitslider -->
<script>
$(document).ready(function(e) {
$('#username').hover(
function (){
$('#submenu').css("display", "block");
/*$('#submenu').css("background-color", "#999");
$('#submenu').css("color", "#000");*/
$('#submenu').css("z-index", "1");
},
function () {
$('#submenu').css("display", "none");
}
);
});
</script>
</head>
<body>
<!-- Header Starts -->
<div class="navbar-wrapper">
<div class="navbar-inverse" role="navigation">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-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>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Agents</li>
<li>Contact Us</li>
<li>About Us</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Your Name<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Edit Profile</li>
<li>Log Out</li>
</ul>
</li>
<li>Log in</li>
<li>Register</li>
</div>
</nav>
</div>
</div>
</div>
<!-- #Header Starts -->
<div class="container">
<!-- Header Starts -->
<div class="header">
<img src="images/logo.png" alt="Realestate">
<ul class="pull-right" style="margin-top:10px;">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Home
</a>
<?php if (!empty($_SESSION['uname'])) { ?>
<ul class="dropdown-menu">
<li>Add Property</li>
<li>Edit Property</li>
</ul>
<?php } ?> </li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Land
</a>
<?php if (!empty($_SESSION['uname'])) { ?>
<ul class="dropdown-menu">
<li>Add Property</li>
<li>Edit Property</li>
</ul>
<?php } ?></li>
</ul>
<!-- <div id ="salesBranch" style="display:none">
<div> Add Property </div> <div> Edit Property </div> -->
</div>
</div>
<!-- #Header Starts -->
</div>
i added following jquery to change the active class but also its not working properly
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
I think it might be because your menu loads different pages than the one you are on. You need to set the active class on the appropriate nav link on page load. For example you could test if the href of the link is the same as the current page name and add class "active" if it is.