I've been messing around with Angular and have a simple test project with working however when adding in the module for ngGrid, everything just stops functioning.
A snippet of working HTML is:
<div class="navbar-header">
<a class="navbar-brand" ui-sref="home">{{hdr.title}}</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ng-click="hdr.setIndex(0)" ng-class="(index==0) ? 'active' : ''">
<!--Contributions-->
<!--STATE directive-->
<a ui-sref="{{hdr.menu[0].state}}">{{hdr.menu[0].name}}</a>
<!--<a ui-sref="collections">{{hdr.menu[0].name}}</a>-->
</li>
<li ng-click="hdr.setIndex(1)" ng-class="(index==1) ? 'active' : ''">
<a ui-sref="{{hdr.menu[1].state}}">{{hdr.menu[1].name}}</a>
</li>
<li ng-click="hdr.setIndex(2)" ng-class="(index==2) ? 'active' : ''">
<a ui-sref="{{hdr.menu[2].state}}">{{hdr.menu[2].name}}</a>
</li>
<!--<li> {{hdr.title}}</li>-->
</ul>
</div>
The script contains:
angular.module('app', ['ui.router'])
The display fails when the script is updated to either of the following:
angular.module('app', ['ui.router','ngGgrid'])
angular.module('app', ['ngGgrid'])
Now instead of the page displaying properly, all that displays is:
{{hdr.title}} {{hdr.menu[0].name}} {{hdr.menu[1].name}} {{hdr.menu[2].name}}
The script file is being loaded with:
<script src="Scripts/ng-grid.js"></script>
Thanks in advance for any responses.
Another keyword search based on the response from K Scandrettt enabled me to locate another post that contained a resolution to my question.
Related
Getting Uncaught TypeError: Cannot read property 'top' of undefined(…) jquery.nav.js:183
I'm trying to transform my web app to SPA using jquery.nav.js (see https://github.com/davist11/jQuery-One-Page-Nav). Here is my code:
JS:
$(document).ready(function() {
$('#nav').onePageNav({});
});
HTML:
<div class="collapse navbar-collapse navHeaderCollapse" style="background-color:white">
<ol class="nav navbar-nav navbar-right text-right">
<li>
<a href="#section-home" class="current">
<span>Home</span></a></li>
<li class="hidden-sm hidden-xs current">
<a href="#section-services">
<span >Services</span></a></li>
</ol>
</div>
After clicking on services, it goes to right place but it can't go back to home if I click on Home. Any idea why it's not going back to home?
Does the error show just as you click Services, or when you click Home? If it is when Home, I would suspect that section-home is not defined (like section-services) correctly.
I have been trying for days.
What i want to do is use the options in the navigation menu that i have to trigger onload event in java script/jquery. However, the events just doesnt fire up. I have tried using onselect and onclick as well but with no avail.
The event should bring data into my template.
Maybe im making a mistake that i just cant see. or is there another better way to do this?
This is my Navigation bar. You can see the onselect functions that i was trying to use.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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" href="index.html">MEK Steel</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li class="dropdown" >
About <b class="caret"></b>
<ul class="dropdown-menu">
<li>
About Us
</li>
<li>
History
</li>
<li>
<a href="about.html#privacyPolicy" >Privacy Policy</a>
</li>
<li>
Terms and Conditions
</li>
<li>
Disclaimer
</li>
</ul>
</li>
<li class="dropdown" class="active">
Manufactured Products <b class="caret"></b>
<ul class="dropdown-menu">
<li onselect = "steelProducts()">
Steel Products
</li>
<li onselect = "steelDoors()">
Steel Doors
</li>
<li onselect="digitalSafes()">
Digital Safes
</li >
<li onselect="securityEq()">
Security Equipment
</li>
<li onselect="storageSol()">
Storage Solutions
</li>
<li onselect="steelFur()">
Steel Furniture
</li>
</ul>
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
This is my javascript. i have only written one for testing purposes
function showTemplate(template, data){
var html = template(data);
console.log(html);
$('#content').html(html);
}
function securityEq(){
source = $("#productsTemplate").html();
secEqTemp = Handlebars.compile(source);
showTemplate(secEqTemp, data);
}
$(document).ready(function () {
$('a').on('click', function (){
alert($(this).html());
});
});
You need to reference the anchor and not the list tag.
Fiddle
After you explained what you were trying to do
#Chax im trying for the onselect to work before the a tag does. like i want to load data and put it in my template and then show the page.
I came up with this code
$(document).ready(function(){
$('a').click(function(){ // Bind a click event to my <a> tag
var linkValue = $(this).attr('data-link'); // Retreive the value of data-link aka where we want to go
// Do something, your logic
window.location.href = linkValue; // Load the new page
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-link="http://www.google.com">I'm a link</a>
<!-- Notice that the tag below doesn't have a href attribute but does have a data-link attribute-->
What this code does is simple. We bind a click event onto every <a> tag in the DOM. When one of our tag is clicked, we execute the function. Note that you can differenciate button using a switch. Then we call the window object and make it call the call the page we want.
check this jsfiddle When i place the js code inside the html using <script> it works and events are fired
I've following Bootstrap HTML code :
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="projects" class="dropdown"><a class="dropdown-toggle projects" data-toggle="dropdown" href="#"><span class="projects">Projects</span></a>
<ul class="dropdown-menu">
<li>List</li>
<li>Add new project</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Now I want to hide the drop-down menu using jQuery code i.e. I want to hide the drop-down menus List and Add new project.
I want this to be done in document-ready function. You can add the specific ids to the suitable tag to make the thing work.
Thanks.
$( document ).ready(function() {
$("ul.dropdown-menu").children().hide();
});
I have a small controller and some basic data. Here is my code. I am not sure why when I click the link, my messages won't show. In the console, I get no errors at all. I consoled the variables, and they show up. For some reason, it doesn't work in the view. I am not sure what I am missing.
index.html -- navigation menu
<ul class="nav navbar-nav" ng-controller="menu">
<li class="active"><a href ng-click="showMessage('Home')">Home</a></li>
<li><a href ng-click="showMessage('Work')">Work</a></li>
<li><a href ng-click="showMessage('Contact')">Contact</a></li>
</ul>
<div class="container" ng-controller="menu">
<h1> {{ message }} </h1>
</div><!-- /.container -->
Controller
angular.module('website', [])
.controller('menu', function($scope) {
// show the message on click
$scope.showMessage = function(messages) {
$scope.message = messages;
console.log($scope.message);
return $scope.message;
};
});
If you define two times the ng-controller, both will have separated scope.
You need to put all usages of controller in a block:
<div ng-controller="menu">
<ul class="nav navbar-nav">
<li class="active"><a href ng-click="showMessage('Home')">Home</a></li>
<li><a href ng-click="showMessage('Work')">Work</a></li>
<li><a href ng-click="showMessage('Contact')">Contact</a></li>
</ul>
<div class="container">
<h1> {{ message }} </h1>
</div>
</div>
You have 2 separate instances of the menu controller and they do not share the same scope
When you update one of the scopes, the other has no knowledge of it. You can use a service to share data across controllers or change structure you are using implementing separate controller instances
I am using twitter-bootstrap-rails gem. I have following HTML:
<div id="scroll-nav">
<ul class="nav nav-pills">
<li class="active">
<a href="#somelink1">
<div>text1</div>
</a>
</li>
<li>
<a href="#somelink2">
<div>text2</div>
</a>
</li>
<li>
<a href="#somelink3">
<div>text3</div>
</a>
</li>
</ul>
</div>
I also have following javascript:
$('body').scrollspy({target: '#scroll-nav'});
Scrollspy does not work, I do not get any JS errors. Am I missing something?
the documentation says:
Navbar links must have resolvable id targets. For example, a home must correspond to something in the DOM like <div id="home"></div>.