I've put this code in Html head section:
<script src="lib/smart-menus/jquery.smartmenus.min.js"></script>
<script type="text/javascript">
$(function() {
$('#main-menu').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
});
</script>
<link href="lib/smart-menus/sm-core-css.css" rel="stylesheet" />
<link href="lib/smart-menus/sm-blue.css" rel="stylesheet" />
and in body:
<nav id="main-nav" role="navigation">
<div id="main-menu" class="sm sm-rtl sm-blue">
<ul>
<li><a ui-sref="site.home">Home</a></li>
<li ng-repeat="menu in menus">
<a href='#'>{{menu.Title}}</a>
<ul ng-show="getHasSubMenus(menu)">
<li ng-repeat="subMenu in menu.SubMenus">
<a ui-sref="site.shopbycategory({ departmentID: subMenu.DepartmentID , categoryID: subMenu.CategoryID, searchTerm: '' })">
{{subMenu.Title}}
</a>
</li>
</ul>
</li>
<li><a ui-sref="site.contact">Contacts</a></li>
</ul>
</div>
</nav>
in the page controller I have:
function siteController($scope, $location, $rootScope, Account, $state, $stateParams, Site, $timeout) {
$timeout(function () {
$scope.getMenus(function () { // OnSuccess
$('#main-menu').smartmenus('refresh');
});
}, 1);}
Also I included jQuery 1.12 before other scripts. and I can verify that angularjs has added all the menus to the main-menu div using F12 in IE, But nothing appears in the page and I don't get any errors from these codes. Is my code correct?
I changed:
<div id="main-menu" class="sm sm-rtl sm-blue">
<ul>
to:
<ul id="main-menu" class="sm sm-rtl sm-blue">
now top level links work and submenus despite existence not showing.
Related
i have build one web which include sidebar and the main content. I included the sidebar with ng-include , but the sidebar is not able to function.
<html>
<head>
<link href="lepwww/css/maincss.css" rel="stylesheet">
</head>
<body ng-app="myapp" ng-controller="dataController">
<div class="main-container">
<div ng-include="templates"></div>
</div>
<!-- Angular JS Scripts -->
<script src="lepwww/css/angular-1.6.1/angular.js"></script>
<script src="lepwww/css/angular-1.6.1/angular-animate.min.js"></script>
<script src="lepwww/css/angular-1.6.1/angular-aria.min.js"></script>
<script src="lepwww/css/angular-1.6.1/angular-messages.min.js"></script>
<script src="lepwww/vendors/svg-assets-cache/svg-assets-cache.js"></script>
<script src="lepwww/vendors/angular-material/angular-material.js"></script>
<script>
var app = angular.module("myapp", ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']);
app.filter('startFrom', function () {
return (input, start) => {
start = +start; //parse to int
return input.slice(start);
}
});
app.controller("dataController", ["$scope", "$http", "$element",
function ($scope, $http, $element) {
$scope.templates = 'view/layout/sidebar.html';
}
]);
</script>
<script src="lepwww/vendors/jquery/dist/jquery.min.js"></script>
<script src="lepwww/js/dialog/zebra_dialog.js"></script>
<!-- Bootstrap -->
<script src="lepwww/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="lepwww/js/test.js"></script>
<script src="lepwww/js/utils.js"></script>
</body>
</html>
If i copy direct the code to replace the nginclude, but able to function.
This is my sidebar code:
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<a href="console.html" class="site_title">
<div class="profile_pic">
<img src="lepwww/images/lep_icon.png" alt="..." width="50" height="50">
</div>
<span>LEP-DMS</span>
</a>
</div>
<div class="clearfix"></div>
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side main_menu" style=" margin-top:12px">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li>
<a>
<i class="fa fa-home"></i>Home
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu">
<li>
Dashboard
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-tv"></i> Inventory
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu">
<li id="li_hardware">
Hardware
</li>
<li id="li_software" class="">
Software
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
I tried to include the javascript file inside also, still not working.
Tried the method to switch the jquery file and angularjs file(The position of javascript file changed, still not able to work).
Any idea how does this problem occur? Since i check the console also not found any error for this.
Thanks.
If you couldn't find any error in console, that's mean either the code doesn't being trigger or the code being trigger but selector select nothing(it also could be selector undefined but well handle in your code snippet, that probably why it doesn't output undefined exception)
Next if it get trigger, check whether or not your sidebar javascript call before ng-include, simply use break point to verify.
If it is trigger before, you can simply a <script>... <your js code to make sidebar work> ...</script> under the end of your ng-include file. Manually call the function again, at this point, it should work since your html component appear in DOM.
I am trying to learn Materialize, but I can't get the sidenav to appear when I click on the menu button. I think it has something to do with the initializers.
<body>
<nav>
<div class="nav-wrapper">
Logo
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
script tags at bottom of html body:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('.sidenav').sidenav();
});
</script>
sidenav() function is not defined. You should try this instead
<script>
$(document).ready(function(){
$('.sidenav-trigger').click(function(){
$('#mobile-demo').removeClass("sidenav");
});
});
</script>
It was not initializing M, the global object for Materialize. I changed the version of Materialize from the CDN and ran this. I ended up not needing jQuery.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script>
const sideNav = document.querySelector('.sidenav');
M.Sidenav.init(sideNav, {});
</script>
I am working in angularjs, of course, and following are the index.php (after logging in) and mainApp.js (main application after logging in). Here I am using session storage to check whether the current session is valid or not. Moreover, after logging in, the parent page, i.e. the one rendered by index.php is visible along with its navigational bar, but the templates are no where to be found. The google development tools show that the templates have been loaded successfully (i.e. status 200) and one can see the in the network's tab. But the templates are not rendered no matter what you select from navigational bar.
index.php
<!-- main page -->
<?php
$version = time();
?>
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap and our custon css files) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
.navbar {
border-radius: 0px;
}
ul {
list-style-type: none;
}
</style>
<!-- JS (load angular, ui-router and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="js/mainApp.js"></script>
</head>
<!-- NAVIGATION -->
<body>
<div ng-app="mainApp">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand"><strong>DASHBOARD</strong></a>
</div>
<ul class="nav navbar-nav navbar-left">
<li><a ui-sref="home">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Client
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="addClient">Add Client</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Service
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="addService">Add Service</a></li>
</ul>
</li>
<li><a ui-sref="about">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a ui-sref="logout">Logout</a></li>
</ul>
</nav>
</div>
<!-- MAIN CONTENT -->
<div class="container">
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT -->
<div ui-view></div>
</div>
</body>
</html>
mainApp.js
var mainApp = angular.module('mainApp', ['ui.router']);
mainApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url:'/',
templateUrl: function (){
if(sessionStorage.username!=="karan" || sessionStorage.password!=="123456"){
return 'templates/login.html';
}
else {
return 'templates/home.html';
}
}
})
.state('addClient', {
url:'/addClient',
templateUrl: function(){
if(sessionStorage.username!=="karan" || sessionStorage.password!=="123456"){
return 'templates/login.html';
}
else{
return 'templates/addClient.html';
}
}
})
.state('addService', {
url:'/addService',
templateUrl: function(){
if(sessionStorage.username!=="karan" || sessionStorage.password!=="123456"){
return 'templates/login.html';
}
else{
return 'templates/addService.html';
}
}
})
.state('about', {
url: '/about',
templateUrl: function (){
if(sessionStorage.username!=="karan" || sessionStorage.password!=="123456"){
return 'templates/login.html';
}
else {
return 'templates/about.html';
}
}
})
.state('logout', {
url: '/login',
templateUrl: function (){
sessionStorage.clear();
return 'templates/login.html';
}
});
});
please tell me if there's any better way instead of using sessions and also help me solve this problem. Thank you.
P.S. on a side note, i am a newbie in angularjs and would appreciate if you can guide me in how to implement login most efficiently , both performance and security wise
One way to handle this situation is adding an interceptor as follows.
mainApp.config(function ($httpProvider) {
$httpProvider.interceptors.push('loginInterceptor');
}).factory('loginInterceptor', function ($q, $window,$rootScope) {
return {
'response': function(response) {
if(sessionStorage.username!=="karan" || sessionStorage.password!=="123456"){
$rootScope.$broadcast("notLoggedIn",{statusCode : 'NOT_LOGGED_IN'});
}
else{
return response;
}
},
'responseError': function(rejection) {
return $q.reject(rejection);
}
}
})
Then handle the message 'notLoggedIn' as follows
mainApp.run(function($state,$rootScope){
$rootScope.$on("notLoggedIn",function(event,message){
$state.transitionTo('login');//Define a state with template url 'templates/login.html';
});
})
Advantage of this approach is, you will not end up checking the login status in every state definitions.
Try using ng-view instead of ui-view and see if that makes a difference, it helped in my case.
I was using this example to build the login page
angular-authentication-example
Once login to this app the home screen should have multi-tab view as mentioned in the below example
plunker
<ul class="nav nav-tabs" ng-controller="TabsCtrl">
<li ng-class="tabClass(tab)" ng-repeat="tab in tabs" tab="tab">{{tab.label}}</li>
</ul>
The issue I am facing is the multi-tab is not embedded as Single page App. As mentioned in the demo it should embed in the same view but once I integrated, it is showing as different view. For example, when I click jobs it is taking to new html page but not included in the same view as in the plunker demo .I want to use the angularjs route provider instead of state provider and the reason is login authentication example is best and I don't want to change the entire logic.
Update
Version 1 (Without routing) Plunker Demo
It will redirect to a new view if you use #/jobs syntax. Here is a complete working solution without routes:
Your code on plunker is working because you didn't include ngRoute in your code.
View in plunker demo
app.js
$scope.tabs = [
{ id : 'jobs', label : 'Jobs', templateUrl:'jobs-partial.html' },
{ id : 'invoices', label : 'Invoices',templateUrl: 'invoices-partial.html' },
{ id : 'payments', label : 'Payments',templateUrl: 'payments-partial.html' }
];
$scope.activeTab = $scope.tabs[0];
$scope.changeActiveTab = function (tab) {
$scope.activeTab = tab;
};
$scope.isActiveTab = function (tabId) {
return tabId === $scope.activeTab;
}
Inside index.html
<body ng-controller="TabsCtrl">
<ul class="nav nav-tabs" >
<li ng-class="{active: isActiveTab(tab.id)}" ng-repeat="tab in tabs">
{{tab.label}}
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" ng-class="{'in active': isActiveTab(tab.id)}" ng-repeat="tab in tabs"
ng-include="tab.templateUrl">
</div>
</div>
</body>
Version 2 (With routing) Plunker Demo
index.html
<!DOCTYPE html>
<html ng-app="plunkerApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
app.js
angular
.module('untitled4App', [
'ngRoute'
])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/jobs', {
templateUrl: '/views/jobs-partial.html',
controller: 'JobsCtrl'
}).when('/invoices', {
templateUrl: '/views/invoices-partial.html',
controller: 'InvoicesCtrl'
}).when('/payments', {
templateUrl: '/views/payments-partial.html',
controller: 'PaymentsCtrl'
});
// make this demo work in plunker
$locationProvider.html5Mode(false);
}])
.factory('tabsService', function () {
return {
tabs: function () {
return [
{id: 'jobs', label: 'Jobs'},
{id: 'invoices', label: 'Invoices'},
{id: 'payments', label: 'Payments'}
]
},
activeTab: '',
isActiveTab: function (tabId) {
return tabId === this.activeTab;
}
}
})
.controller('JobsCtrl', ['$scope', 'tabsService', function ($scope, tabsService) {
$scope.tabs = tabsService.tabs();
$scope.tabsService = tabsService;
tabsService.activeTab = $scope.tabs[0].id;
}])
.controller('InvoicesCtrl', ['$scope', 'tabsService', function ($scope, tabsService) {
$scope.tabs = tabsService.tabs();
$scope.tabsService = tabsService;
tabsService.activeTab = $scope.tabs[1].id;
}])
.controller('PaymentsCtrl', ['$scope', 'tabsService', function ($scope, tabsService) {
$scope.tabs = tabsService.tabs();
$scope.tabsService = tabsService;
tabsService.activeTab = $scope.tabs[2].id;
}]);
jobs.partial.html
<ul class="nav nav-tabs">
<li ng-class="{active: tabsService.isActiveTab(tab.id)}" ng-repeat="tab in tabs">
{{tab.label}}
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active">
Jobs
</div>
</div>
invoices-partial.html
<ul class="nav nav-tabs">
<li ng-class="{active: tabsService.isActiveTab(tab.id)}" ng-repeat="tab in tabs">
{{tab.label}}
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active">
Invoices
</div>
</div>
payments-partial.html
<ul class="nav nav-tabs">
<li ng-class="{active: tabsService.isActiveTab(tab.id)}" ng-repeat="tab in tabs">
{{tab.label}}
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active">
Payments
</div>
</div>
I'm doing a javascript vertical submenu, I'm using yui tools but the submenu is duplicated, I don't know what part of code is wrong.
YAHOO.util.Event.onContentReady("menu_vertical", function() {
var elMenu = new YAHOO.widget.Menu("menu_vertical", {
width: '550px'
});
elMenu.render();
elMenu.show();
});
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/
build/menu/assets/skins/sam/menu.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/
yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/
container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/menu/
menu-min.js"></script>
<div id="menu_vertical" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">MENU1
</li>
<li class="yuimenuitem">MENU2
</li>
<li class="yuimenuitem">MENU3
<div id="consectetuer" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">SUBMENU1
</li>
<li class="yuimenuitem">SUBMENU2
</li>
<li class="yuimenuitem">SUBMENU3
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">MENU4
</li>
</ul>
In your JSFiddle you linked, your href and src tags have spaces in the path and these link and script tags must not be embedded inside of a script since they are raw HTML. Here is an updated JSFiddle, but you still have issues.
You are attempting to reference plain http over an https connection, this is not safe, and JSFiddle and Stackoverflow will not allow you to do such a thing.
Other than that, your code looks fine. The Menu Family: Multi-tiered Menu From Markup example that I found using Google may be a good place to check if your code is correct. Here is the "clean page" of that example.
YAHOO.util.Event.onContentReady("menu_vertical", function () {
var elMenu = new YAHOO.widget.Menu("menu_vertical", {
width: '550px'
});
elMenu.render();
elMenu.show();
});
<script src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/menu/menu-min.js"></script>
<link href="http://yui.yahooapis.com/2.3.0/build/menu/assets/skins/sam/menu.css" rel="stylesheet"/>
<div id="menu_vertical" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">MENU1</li>
<li class="yuimenuitem">MENU2</li>
<li class="yuimenuitem">MENU3
<div id="consectetuer" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">SUBMENU1</li>
<li class="yuimenuitem">SUBMENU2</li>
<li class="yuimenuitem">SUBMENU3 </li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">MENU4</li>
</ul>
</div>
</div>