ron tornambe ron tornambe - 6 months ago 22
jQuery Question

Why doesn't the correct form load?

I have a bootstrap dropdown menu that should be displayed by an angular route, but even though the browser URL is pointing to the correct route, the wrong form is shown. I am fairly new to angular and bootstrap.

The console.log does not show any errors.

If you are going to downvote this question, please provide a reason so I can learn from my mistakes.

enter image description here

Bootstrap Dropdown:

<li class="dropdown">
<a href="#" id="drop-toggle-1" class="dropdown-toggle glyphicon glyphicon-user" data-toggle="dropdown" role="button" data-aria-haspopup="true" data-aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="update-profile" href="#update-profile">Update profile</a></li>
<li><a id="manage-uploads" href="#manage-uploads">Manage uploads</a></li>
</ul>
</li>


Angular routes / controllers (see manage-uploads - the manage-uploads.html exists)

var wtApp = angular.module('wtApp', ['ngRoute'])
// configure our routes
wtApp.config(function ($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
// route for the writers page
.when('/writers', {
templateUrl: 'pages/writers.html',
controller: 'writersController'
})

// route for the enablers page
.when('/enablers', {
templateUrl: 'pages/enablers.html',
controller: 'enablersController'
})
// route for privacy/rues
.when('/privacy', {
templateUrl: 'pages/privacy.html'
})
// route for the about page
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
})
// route for the contact pagefa
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
})
// route for the log-in page
.when('/log-in', {
templateUrl: 'pages/login.html',
controller: 'loginController'
})
// route for the create account
.when('/:accounts', {
templateUrl: 'pages/accounts.html',
controller: 'createAccountController'
})
// route for manage uploads
.when('/:manage-uploads', {
templateUrl: 'pages/manage-uploads.html'
})
});

// create the controller and inject Angular's $scope
wtApp.controller('mainController', function($scope) {
$scope.example2model = []; $scope.example2data = [ {id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"}]; $scope.example2settings = {displayProp: 'id'};
resetNavbar();
$("a[href$='']").css({color:'#FF5733'});
});

wtApp.controller('writersController', function($scope) {
resetNavbar();
$("a[href$='writers']").css({color:'#FF5733'});
});

wtApp.controller('enablersController', function($scope) {
$scope.worktype = [
{ icon: "<img src=img/icons/smile-mask.png />", name: "Fiction", ticked: false },
{ icon: "<img src=img/icons/frown-mask.png />", name: "Non-Fiction", ticked: false }
];

resetNavbar();
$("a[href$='enablers']").css({color:'#FF5733'});

});
wtApp.controller('aboutController', function($scope) {
resetNavbar();
$("a[href$='about']").css({color:'#FF5733'});
});
wtApp.controller('contactController', function($scope) {
resetNavbar();
$("a[href$='contact']").css({color:'#FF5733'});
});
wtApp.controller('loginController', function ($scope) {
resetNavbar();
$("a[href$='log-in']").css({ color: '#FF5733' });
});
wtApp.controller('createAccountController', function ($scope) {
resetNavbar();
$("a[href$='create-account']").css({ color: '#FF5733' });
});
wtApp.controller('ResetPasswordController', function ($scope) {
// $("a[href$='reset-pwd']").css({ color: '#FF5733' });
});

function resetNavbar() {
$(".navbar-collapse a").not("a[href='#']").each(function () {
$(this).css({ 'color': 'black' })
});
}


HTML manage-uploads.html

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Writer's Tryst - Manage Uploads</title>
</head>
<body>
<h1>Manage Uploads</h1>
<table>
<tr>
<th>Title</H><th>Type</th><th>Form</th><th>Genre</th><th>Length</th><th>PDF</t
</tr>
<tr>

<td><input id="title" name="title" class="form-control" placeholder="Title" required autofocus="true" /></td>
<td>
<select id="work-type" name="work-type">
<option value="fiction">Fiction</option>
<option value="non-fiction">Non-Fiction</option>
</select>
</td>
<td>
<select id="form-type" name="form-type">
</select>
</td>
<td>
<select id="genre" name="genre">
</select>
</td>
<td><input id="nbrPages" name="nbrPages" required style="width: 48px" placeholder="Pages" /></td>
</tr>
</table>
<script src="js/common.js"></script>
<script src="js/manage-uploads.js"></script>
</body>
</html>

Answer

Your route is: /:manage-uploads. The : is telling Angular that it should expect some value in that part of the url and to place it in the $routeParams under that name.

So the end url isn't /manage-uploads but something like: /33 where 33 would be be put in $routeParams under manage-uploads, eg:

{"manage-uploads":"someValue"}

Which you would then access to get that value

$id = $routeParams["manage-uploads"];

If you meant to make it use the actual url /manage-uploads then just remove the :

Comments