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.
Related
I am trying to apply some jquery in my code, but it's not working because i am using with ng-include, how can i solve this?
html:
<html lang="" ng-app="">
<head></head>
<body>
<div class="menu">
<nav class="sidebar">
<nav class="sidebar">
<div ng-include="'app/client.html'"></div>
</nav>
</nav>
</div>
<script type="text/javascript">
$(function() {
$( "ul.sidebar-nav li:eq(1)" ).addClass('tech');
});
</script>
</body>
</html>
client.html
<div class="client">
<div class="client-open">
<ul class="sidebar-nav">
<li>link1</li>
<li>link</li>
</ul>
</div>
</div>
js:
$(function() {
$( "ul.sidebar-nav li:eq(1)" ).addClass('tech');
});
Code to alter the DOM directly should go into directive.
Create a directive and attach it to the element you are trying to modify.
Plunkr - https://plnkr.co/edit/AIRb3egGSMkWfd2gpekL?p=preview
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script>
angular.module('app', [])
.directive('attachJquery', function() {
return {
restrict: 'A',
link: function (scope, element) {
$( "ul.sidebar-nav li:eq(1)" ).addClass('tech');
}
};
})
</script>
<style>
.tech {
color: red;
}
</style>
</head>
<body>
<div class="menu">
<nav class="sidebar">
<nav class="sidebar">
<div ng-include="'client.html'"></div>
</nav>
</nav>
</div>
</body>
</html>
client.html
<div class="client" attach-jquery>
<div class="client-open">
<ul class="sidebar-nav">
<li>link1</li>
<li>link</li>
</ul>
</div>
</div>
First proposed solution
Make sure that Jquery is loaded in your application before AngularJs.
Move the script inside client.html
Second proposed solution
Make sure that Jquery is loaded in your application before AngularJs.
Move your script into the controller as in the following example
app.controller("myCtrl", function($scope, $rootScope,$timeout) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$rootScope.$on('$includeContentLoaded', function() {
$timeout(function(){
load();
});
});
});
And then enter your function as in the following example
var load = function() {
$( "ul.sidebar-nav li:eq(1)" ).addClass('tech');
}
You can refer to this SO question for more info.
Angular: ng-include, jQuery not working unless in HTML file
One way of solving this is by creating a custom directive and adding it to div.client , then you can add your jquery code in the compile or link function of that directive.
HTML
<div class="client" load-evt>
...
</div>
Angular Directive
app.directive("loadEvt", function(){
return {
restrict: "A",
compile: function(elem){
//write your code in compile phase
},
link: function(elem, scope){
//or write your code in link phase
}
}
})
Why would you want to use jQuery and angular together?
These are 2 libraries that help you write a webapp, but go about it a VERY different way.
If you need jQuery to modify classes, you should simply use ng-class, as #fissio suggested. But in the usecase you provided, just add class="tech" to the second li. (I presume this isn't really what you wanted to know)
<div class="client">
<div class="client-open">
<ul class="sidebar-nav">
<li>link 1</li>
<li class="tech">link 2</li>
</ul>
</div>
</div>
I am having trouble with Angular, this is my first time using it after taking the lessons in CodeAcademy. My code is as follows:
HTML:
<body style="padding-top: 0px;" data-spy="scroll" ng-app="SummerMill">
<section id="intro" class="main style1 dark">
<!-- Header -->
<header ng-controller="MainController" id="header">
<!-- Logo -->
<h1 id="logo">Summer Mill</h1>
<a ng-mouseover="locations()"
style="color:black;text-decoration:initial;"
id="logoii"
href="http://localhost/locations">Locations</a>
<!-- Nav -->
<nav id="nav">
<ul class="nav navbar-nav">
<li ng-repeat="headerLink in headerLinks">{{headerLink.text}}</li>
</ul>
</nav>
</header>
App.js
var app = angular.module('SummerMill', []);
MainController.js
app.controller('MainController', ['$scope', function($scope) {
$scope.headerLinks = [
{
text: 'Intro',
alternativeText: 'Arlington'
},
{
text: 'Wholesale',
alternativeText: 'New York'
}
];
}]);
The header just gives me {{headerLink.text}}
Why? :'(
Edit: It turned out that I had an error in an earlier script injected before angular that was causing the problem. Simply rearranging the order of the <script src=""></script> tags solved it for me.
So instead of this:
<script src="javascript/init.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
I did this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="javascript/init.js"></script>
It turns out the problem was that I had an error in an earlier script that was loading in the header, with angular originally being injected after this errant script.
Once I put angular first, everything was fine.
:)
I am working mvc-5 and using bootstrap and all my links are in _Layout.cshtml now i have a drop down tabs like this http://prntscr.com/76jfba (using bootstrap, It is obtained on VStudio project launch) now in my
_Layout.cshtml I have renderbody() which renders all my UI .
What I want to do
On clicking the tab "Real Time" I get a dropdown list which on futher click to "Tabular" must open replace the current view just below the tabs to a new view .
How I tried to do this
(1) In home controller I do this :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace testLayt.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public ActionResult tabularshared()
{
return View();
}
}
}
(2) Then I create view and in that view I add Layout path like this :
#{
ViewBag.Title = "shekharTabularshared";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>tabularshared</h2>
As a result I have all the tabs but they are not aligned properly. It now shows the view like this: http://prntscr.com/76jiag
I feel like I dont have access to bootstrap here or I am doing anything wrong ?
Could some one please give guidance such that I can have tabular.cshtml view just below the tab in the first link (this tab will be common to all the views obtained)
EDIT: _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<!--starts here-->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="bootstrap/js/jquery-ui.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script> <!--click on main tab disappers-->
<script src="~/Scripts/jquery-1.10.2.intellisense.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<!--ends here-->
</head>
<body>
<div>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar navbar-custom navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" #Html.ActionLink("Vision Vertex", "Index", "Home") />
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Real Time
<i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li>
<!--onclick="tabularFunction()" -->
#*<a tabindex="-1" href="~/Views/Home/BackgroundViews/tabular.cshtml">Tabular</a>*#
#Html.ActionLink("Tabular", "tabularshared", "Home")
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
</body>
</html>
and Index.cshtml is:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>shekhar Index</h2>
Further i noticed that on clicking at "Tabular" when i do "Inspect elements" i do not have <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /> it's surprising for and i am stuck here since 3 last days. Could someone please help me?
Here is my full project i really appreciate if you could please help me coming out of this problem https://www.dropbox.com/sh/autm3mkqfdu0aup/AADfAeUSlvcDt7PTX8G5Qz9La?dl=0
It makes no difference on how you render your UI.
Make sure there are no errors in your developer console (you might wrongly
configure your bundles for bootstrap scripts).
Left only one reference to bootstrap CSS:
href="~/Content/bootstrap.min.css"
Inspect in developer console that all scripts&styles are actually loaded to the page.
If nothing wrong but your code still not works - add a full screenshot of your web-page in browser and let me know in comments.
You have lost '~' symbols in your bootsrap CSS links.
<script src="bootstrap/js/jquery-ui.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
So I just started a new site in bootstrap and I'm working on a nav-tabs design. I've followed the directions to the tee and have almost copied and pasted at this point just to get it to function but alas I have several problems:
(1) The nav-tabs do not change on click i.e. the url changes to my element id but the actual tab does not become "active" (Home remains depressed while the others stay unpressed)
(2) The tab-content div only displays the content marked by class="active".
I have included the necessary jquery and bootstrap js scripts and I believe they are in the correct order but no matter what I do these tabs never switch their active state to the one that is clicked.
Here is my html:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-1.11.2.min" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<title>New Homepage w/ Bootstrap</title>
</head>
<body>
<div class="nav">
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#about">About</a></li>
<li><a data-toggle="tab" href="#subscribe">Subscribe</a></li>
<li><a data-toggle="tab" href="#search">Search</a></li>
<li><a data-toggle="tab" href="#logout">Logout</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<h1>Hospital Data Solutions</h1>
<p>Financial Analysis Database</p>
</div>
<div class="tab-pane" id="about">
<h1>About Us</h1>
<p>Cost Reports and Financial Analysis Nationwide Database</p>
</div>
<div class="tab-pane" id="subscribe">
<h1>Annual Subscription</h1>
<p>Purchase an annual subscription to access all cost reports.</p>
<h2>Individual Cost Reports</h2>
<p>Purchase individual cost reports directly from us in .pdf, .xs, .csv formats.</p>
</div>
<div class="tab-pane" id="search">
<h1>Search our database</h1>
<p>Search content goes here.</p>
</div>
<div class="tab-pane" id="logout">
<h1>logout</h1>
<p>Logout fx goes here.</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>
I have attempted the various solutions I could find including the addition of
<script>
$(document).ready(function () {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
Underneath the bootstrap.min.js script but like I said just about anything I've done has produced NO change whatsoever. Everything else looks fine on the page but a little guidance here would truly get me started on the right foot. I haven't been working with bootstrap for more than a few hours so forgive my ignorance. The docs say that bootstrap does not even require javascript to toggle the tabs when data-toggle is used so I'm quite confused on what the right answer is.
:EDIT: The first answer was correct. Placing the tags right before the closing body tag did not improve functionality but replacing my scripts with
<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.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
Did indeed work. I my initial jquery and bootstrap files were in the correct place but it seems they are not completely functional/broken in some way or something. Thanks again!
By the way: Am I able to link to these repositories constantly or will I have to update my pages when new updates of bootstrap/jquery come out? What I'm asking is will these repositories will be deleted?
The only thing I can think of (but what usually causes this issue) is your <link> and <script> tags are in the wrong spot. Copying your code to an editor of mine and adding jquery.min.js and bootstrap.min.js right before the closing </body> tag caused it to work just fine for me. Here is the HTML file:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=".../bootstrap.min.css" rel="stylesheet" type="text/css"/>
<title>New Homepage w/ Bootstrap</title>
</head>
<body>
<div class="nav">
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#about">About</a></li>
<li><a data-toggle="tab" href="#subscribe">Subscribe</a></li>
<li><a data-toggle="tab" href="#search">Search</a></li>
<li><a data-toggle="tab" href="#logout">Logout</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<h1>Hospital Data Solutions</h1>
<p>Financial Analysis Database</p>
</div>
<div class="tab-pane" id="about">
<h1>About Us</h1>
<p>Cost Reports and Financial Analysis Nationwide Database</p>
</div>
<div class="tab-pane" id="subscribe">
<h1>Annual Subscription</h1>
<p>Purchase an annual subscription to access all cost reports.</p>
<h2>Individual Cost Reports</h2>
<p>Purchase individual cost reports directly from us in .pdf, .xs, .csv formats.</p>
</div>
<div class="tab-pane" id="search">
<h1>Search our database</h1>
<p>Search content goes here.</p>
</div>
<div class="tab-pane" id="logout">
<h1>logout</h1>
<p>Logout fx goes here.</p>
</div>
</div>
</div>
</div>
</div>
<script src=".../jquery.min.js" type="text/javascript"></script>
<script src=".../bootstrap.min.js" type="text/javascript"></script>
</body>
</html>
Note: Replace .../ with the correct URL to bootstrap.min.css, jquery.min.js and bootstrap.min.js. Hope that helps!
The tabs are working fine as can be seen here: https://jsfiddle.net/AndrewL32/nh6ma48r/
<script type="text/javascript">
$(document).ready(function () {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
You need to keep bootstrap.js as well as the above script that calls the function above on your <head></head> section but below your jQuery.
Also, please replace your:
<script src="bootstrap.js"></script> with this <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
and your
<script src="jQuery"></script> with this <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
(issue could be because your js files are edited, moved or missing)
I have this example in a file called: navigation.html in a folder off the root called: IMPORTS
<!-- Navigation -->
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- This is the section that doesn't work -->
<a class="brand" href="#" data-target=".pe-container">The Book Cover</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>
About
</li>
<li class="divider-vertical"></li>
<li>
Books
</li>
<li class="divider-vertical"></li>
<li>
Blog
</li>
<li class="divider-vertical"></li>
<li>
Contact
</li>
<li class="navigation-right"><i class="sprite sprite-twitter"></i></li>
<li class="navigation-right"><i class="sprite sprite-facebook"></i></li>
<li class="navigation-right"><i class="sprite sprite-google"></i></li>
</ul>
</div>
</div>
</div>
Then in the index page I have this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Load the Metatag Files Partial -->
<link rel="import" href="partials/metatags.html" />
<!-- Load the CSS Files Partial -->
<link rel="import" href="partials/css-files.html" />
<!-- Load the JS Files Partial -->
<link rel="import" href="partials/js-files.html" />
<title>Title Goes here/title>
</head>
<body id="page">
<div id="container" class="contain">
<!-- Navigation -->
<div id="navBarMain" class="navbar navbar-inverse navbar-fixed-top"></div>
<!-- End Navigation -->
</div>
</body>
</html>
And finally the JQuery that loads the div...
// JQUery Fancy Box
$(document).ready(function() {
//Load Imports
//Navigation
$("#navBarMain").load("imports/navigation.html");
//This is the menu system
$(function() {
$('.nav a, .brand, a[data-target]').click(function() { //This is what's not working
$('html, body').animate({
scrollTop: $($(this).attr('data-target')).offset().top - 50
}, 500);
});
});
});
The problem is, when I place the "navigation.html" file BACK into the div on the index page, the menu at the top of page works. BUT, when I load the "navigation.html" page as is, the menu click event does nothing. I know there's a call that's wrong so if you could help, it would be greatly appreciated. OF NOTE: There are NO Javascript errors in the console even with breakpoints, nothing happens. The code LOADS initially and stops at the breakpoint, but when I click on the menu, nothing, nada, ziltch....
Try attaching the events in the callback function of .load:
$(function() {
$("#navBarMain").load("imports/navigation.html", function() {
$('.nav a, .brand, a[data-target]').click(function() { //This is what's not working
$('html, body').animate({
scrollTop: $($(this).attr('data-target')).offset().top - 50
}, 500);
});
});
});