I am a newbie to the angular jquery world. I am writing a Single Page app with nav-bars that works with a couple of REST-API's.
I have an index.html page where I have imported all the js scripts needed for my application(and its subpage/divs)
The subpage (a div page) gets loaded inside the <div ng-view> when a particular nav-bar gets created. I have implemented a .blur() method for a couple of form elements which I hope to use it to call some REST APIs. But the .blur method doesnt seem to get invoked at all when the form element goes out of scope. I have inspected that the js file is loaded. It also doesnt throw any errors in the console.
I tried moving the <script> importing the jquery-blurs.js to the particular div which results in the blur function getting called but then I get warning in the console and I get errors for $.md5() not found which from this post [The mystery of '$.md5 is not a function' I understand is due to different versions of jquery.
Any help is appreciated.
index.html
<html lang="en" ng-app="masterApp">
<head>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="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="#/">TestAPP</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Schedules <span class="caret"></span>
<ul class="dropdown-menu">
<li>Past/Current Schedules status</li>
<li>Future Schedules</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Requires Admin access</li>
<li>Create Schedule</li>
<li>Manage Schedules</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<!-- Main component for a primary marketing message or call to action -->
<div ng-view></div>
</div> <!-- /container -->
</body>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/jquery-dateformat.js"></script>
<script src="js/jquery-blurs.js"></script>
<script src="app.js"></script>
</html>
jquery-blurs.js
$(document).ready(function(){
var date_str = "";
$("#ID").blur(function(){
console.log($("#ID").val());
var id = $("#ID").val();
if (id == "") {
return;
}
$.getJSON("http://my-rest-api-url.com" + $("#ID").val()
)
.done(function(data){
if(data.msg != "") {
alert("Verify ID \n" + data.msg);
location.reload();
}
var comment = data.teams.names[0] + ' vs ' + data.teams.names[1];
console.log($.md5(comment));
date_str = $.format.date(data.date, "yyyy.MM.ddTHH.mm.ss")
$('#start_datetime').val(date_str);
var markup = '<tr name="entry"> <td>' +
data.date +
'</td><td>' +
$.md5(comment) +
'</td><td>' +
data.teams.names[0] + ' vs ' + data.teams.names[1] +
'</td><td></tr>';
$("table tbody").empty();
$("table tbody").eq(0).append(markup);
$("#program_id").val($.md5(comment));
$("#comment").val(comment)
$("#sport").val(data.sport)
$("#broadcast_id").val($("#StreamID").val() + '_' + $("#program_id").val() + '_' + date_str)
console.log($("#broadcast_id").val())
})
});
});
Related
What is the proper way to update a webpage with new datasets please. I have a webpage with a bootstrap navbar and a dropdown menu which I would like to use to select the dataset. When the webpage first opens it automatically loads one of these datasets. The problem is that when the webpage loads the very same dataset (this time from the dropdown menu) it crashes. The chart is a leaflet chart with a lot of markers (around 300K, which btw wouldnt have been possible without the help of a couple of ppl here!) but it works ok. When however as said earlier the same data are pushed again the browser chokes (it looks to me during the 'layer.on add' callback) and crashes.
I think (and that is a wild guess) this is leaflet related, maybe old data still live somewhere and arent getting dumped, but I dont really know.
That was with chrome but it happens with the other browsers as well. An outline of my code is shown below. (Note: in the snippet nothing is loaded on start-up, you will have to use the menu)
A browser refresh though works fine though.
How can I just clear everything from the webpage and start again (like a reload for instance) but passing my user-defined parameters. I hope it will work this way...
To put it in another way, I would like each time to remove all elements that were added to the webpage at a later stage (and remove associated objects from the memory as well) and then pass-in some parameters with the dropdown menu for example.
function dispatcher(x){
console.log('you clicked '+ x)
cfg = config()
run(cfg)
}
function config(){
var ini = [
{name: 'dataset-1', data:'some data 1'},
{name: 'dataset-2', data:'some data 2'},
];
var out = d3.map(ini, function (d) {return d.name;});
return out
}
function run(config) {
renderChart(config)
}
function renderChart(config) {
console.log('Doing map')
var mapStage = staging(config);
var map = mapStage.map;
console.log("doing some stuff with map and config")
}
function staging(){
try {
mapStage.map.off;
mapStage.map.remove();
console.log("map removed")
}
catch(error)
{
//do nothing
}
var map = L.map('mymap').setView([51.508530, -0.055], 12);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
mapStage = []
mapStage.map = map
return mapStage
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css"/>
</head>
<!--jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- d3 -->
<script src='https://d3js.org/d3.v4.min.js'></script>
<!-- leaflet -->
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"> </script>
<script src="./example.js"> </script>
<body>
<input id="refresh" type="button" value="Refresh" onclick="renderChart();" />
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="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="#">Title</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown" id="myDropdown">
Select Data <span class="caret"></span>
<ul class="dropdown-menu">
<li><a href="#" id = "dataset-1" onclick='dispatcher("dataset-1")'>Dataset 1</a></li>
<li><a href="#" id = "dataset-2" onclick='dispatcher("dataset-2")'>Dataset 2</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div>
</div>
<div id="mymap" style="width: 600px; height: 400px"></div>
</body>
</html>
I have the following bit of code, which first loads a navbar to the website on page load (this is so that I don't have to create a new navbar for each page):
<div id="nav"></div>
<script>$( "#nav" ).load( "nav.html" );</script>
And to show the "active" tab for that page, I have the following script:
<script>
window.onload = function() {
document.getElementById('lindex').className = 'active';
};
</script>
However, when the page loads, I am seeing this error in the console (for the document.getElementById line):
index.html:70 Uncaught TypeError: Cannot set property 'className' of null
And the "active" tab does not update when I navigate to the page. Strangely, it does seem to add the class when I reload the page, but intermittently. Does anyone know why this might be happening?
Here is the code for the navbar (nav.html):
<nav class="navbar navbar-inverse ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="/img/logo.png">
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li id="lindex" class="listitem">Home</li>
<li id="lpandp" class="listitem">Products & Purchasing</li>
<li>Freight & Distribution</li>
<li>Blog</li>
<li>Contact Us</li>
<li class="dropdown">
</li>
</ul>
</div>
</div>
</nav>
I have also tried:
$(function() {
$('#about').addClass('expand');
});
But this doesn't seem to work either, unless I refresh the page after navigating to it.
Try the following
<script>$( "#nav" ).load( "nav.html",function(){
$('#lindex').addClass('active');// add the class after the nav is loaded
});</script>
$( document ).ready(function() {
console.log( "ready!" );
$( "#nav" ).load( "nav.html");
console.log( "after load nav.html!" );
//add the class here
$('#lindex').addClass('active');
});
$("#lindex").addClass("Your Class Name");
I'm struggling with getting my navigation menu to show the selected page. I'm using the Bootstrap framework to build my site. This is my navigation menu:
<nav class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="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="/index.html">Digital Transformation</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">Transformation deck</li>
<li>Background information</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
As far as I can tell, Bootstrap uses the following JS to make the selected menu item active, which I have in my header:
<script>
$('label').click(function() {
$(this).parent('li').toggleClass('active');
});
</script>
However with this code my primary nav item is active on page load, but when I select the second item it keeps 'Tranformation deck' as active instead of 'Background information'.
Am I missing a trick here? Any help would be greatly appreciated.
If you want to hook up click listeners to your nav items, your script should be something like this:
<script>
$('#navbar nav li a').click(function() {
$(this).parent('li').toggleClass('active');
});
</script>
You don't have any 'label' tags in your code, so there isn't anything to attach click event handlers to.
$(function() {
// this will get the full URL at the address bar
var url = window.location.href;
// passes on every "a" tag
$("#navbar a").each(function() {
// checks if its the same on the address bar
if (url == (this.href)) {
$(this).closest("li").addClass("active");
}
});
});
I am trying to fade in the navigation bar and stick to top while scrolling to bottom of the page. Its fade effect works only the first time. My code is below.
<style type="text/css">
.navOpacity{
opacity: 0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var ht = $('header').height()+70;
if($(this).scrollTop() >= ht){
$("#navb").addClass("navbar-fixed-top navOpacity")
.fadeTo('slow','1');
$(".row:first").css("padding-top","50px");
}else{
$("#navb").removeClass("navbar-fixed-top navOpacity");
$(".row:first").css("padding-top","0px");
}
});
});
</script>
<div class="container">
<header class="page-header">
<h1>Hello world</h1>
</header>
<nav id="navb" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown" href="#">Page 1
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-md-4">
<h3>h1. Bootstrap heading</h3>
Hello world and Mario.
</div>
<div class="col-md-4">
<h3>h2. Bootstrap heading</h3>
Hello world and Mario.
</div>
<div class="col-md-4">
<h3>h3. Bootstrap heading</h3>
Hello world and Mario.
<img src="rsz_myimg.jpg" class="img-responsive" />
</div>
</div><!-- end or row class-->
</div><!-- end container class-->
Your problem is that after the first time fadeTo is executed, your element is left with a style="opacity: 1" attribute, which is left there. So you have to remove it when you scroll to the top.
I've also changed the way the navbar is hidden, I suggest using .hide(), cause it also uses the elements' style attribute, that way it will not be overridden. And there's also a navbarVisible var that is used to determine if the navbar is already faded in and if it is, the code for fading it in is not executed when not needed. This should be a tiny step up in performance.
This seems to work just fine:
<script type="text/javascript">
$(document).ready(function(){
var navbarVisible = false;
$(window).scroll(function(){
var ht = $('header').height()+70;
if ($(this).scrollTop() >= ht) {
if (!navbarVisible) {
$("#navb").addClass("navbar-fixed-top")
.hide()
.fadeTo('slow','1');
$(".row:first").css("padding-top","50px");
navbarVisible = true;
};
} else {
$("#navb").removeClass("navbar-fixed-top").removeAttr('style');
$(".row:first").css("padding-top","0px");
navbarVisible = false;
}
});
});
</script>
You don't need this part anymore:
<style type="text/css">
.navOpacity{
opacity: 0;
}
</style>
Here's a link to an example JSFiddle with working code: JSFiddle Link
My two cents...
Just add this Javascript and away you go. Currently configured to graduate over the first 200px of scroll.
var scrollFadePixels = 200;
var fadeNavbar = function (window)
{
var opacity = window.scrollTop() / scrollFadePixels;
$('.navbar-fixed-top').css('background-color', 'rgba(34,34,34,' + opacity + ')');
}
fadeNavbar($(window));
$(window).scroll(function () {
fadeNavbar($(this));
});
What is the elegant way to trigger a state with angular-ui-router by clicking <button>?
I am using ui-sref="main" and it doesn't seem to work although it works with <a> though.
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js" ></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li>
<button class="btn btn-danger navbar-btn" ui-sref="main" >Button Submit</button>
</li>
<li>
<a class="btn btn-danger navbar-btn" ui-sref="main" >Anchor Link Submit</a>
</li>
</ul>
</nav>
</body>
</html>
Javascript:
var app = angular.module('plunker', ['ui.router']);
'use strict';
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state("main", {
url: "/main",
resolve: {
test: function() {
alert("Triggered main state");
return true;
}
}
});
}]);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
Link: http://plnkr.co/edit/vMtLN0ncpqAfgM6S1Ng4?p=preview
Wrap the button in an anchor and you are good to go:
<a ui-sref="main">
<button class="btn btn-danger navbar-btn" >Button Submit</button>
</a>
DEMO
the other solutions didn't work for me. Here's what I did using ui-router:
<button ui-sref="app.schedule" class="btn btn-danger navbar-btn">
Schedule
</button>
Piece of pie :-)
I guess better option is to use it with button as suggested in angular-ui-bootstrap controls guidelines, so i have implemented the plnkr code. and have tried it to work with button click only, no ng-click need to be written as ui-sref works easily with the button click as it is; Please have a look.
For accessibility compliance, I'm implementing this solution to preserve the styling of anchor tags and implement the desired keyboard functionality of a menu (top, bottom arrow keys move focus through list items and the enter key activates the focused link).
<ul class="dropdown-menu white" role="menu">
<li role="menuitem">
<a href="#" ng-click="go('main')">
<i class="glyphicon glyphicon-log-out"></i> Sign Out
</a>
</li>
</ul>
The go function is a facade/wrapper around the ui-router state service to navigate to a state.
$scope.go = function (page) {
$state.go(page);
};
I use navbar too and don't need to use buttons. I have this:
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li ng-class="{ active: $state.includes('mystate1') }"><a ui-sref='mystate1'>mystate1</a></li>
<li ng-class="{ active: $state.includes('mystate2') }"><a ui-sref='mystate2'>mystate2</a></li>
<li ng-class="{ active: $state.includes('mystate3') }"><a ui-sref='mystate3'>mystate3</a></li>
<li ng-class="{ active: $state.includes('mystate4') }"><a ui-sref='mystate4'>mystate4</a></li>
</ul>
</div>
Main is not a child view, and since you have defined a url for this, why not try this instead:
<a href="/main">
<button class="btn btn-danger navbar-btn" >Button Submit</button>
</a>
In this case, I'm assuming that you want the button the link to another page.
However, a better way to use ui-router is to create a parent and child view, read the documentation below:
https://github.com/angular-ui/ui-router/wiki#state-change-events
Try this and see if it works. All I did was create a div with a type button
<div ui-sref="main" type="button" >Go To Main State</div>