I am using angularjs in my application. I have a problem with this code, this code generate data first time. But when I come back to that page from other location it give only expression written in jsp page
Below is my app.js
var app = angular.module("myModule",[]);
app.controller(
"ReportController",
function ($scope,$http) {
$http({
method: 'POST',
url: 'mypage_body.do',
data: 'action=fetchdata',
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(response) {
$scope.questions = response;
});
}
);
angular.element(document).ready(function (){
angular.bootstrap(document,['myModule']);
});
It gives expression when I reload the page from other location
like this
{{question.title}}
{{cell.f}}{{cell.f}}
{{row.h}} {{row.v}} {{row.v}}
I analyzed that page is not loading again. Means document.ready is not calling again on that page. Could anyone please help how to call again the module written in app.js without using document.ready.
Any help would be appreciated.
Thanks in advance.
<script type="text/javascript" src="/campustoolshighered/css/js/angular-1.2.26.min.js"></script>
<script type="text/javascript" src="/campustoolshighered/css/js/adhocreport/app.js"></script>
<script type="text/javascript" src="/campustoolshighered/css/uiframework/js/bootstrap.js"></script>
<div ng-controller="ReportController">
<div class="row" ng-repeat="question in questions">
<div class="col-md-12">
<div class="module">
<div class="heading">
<h2>{{question.title}}</h2>
<div class="module-options">
<span tabindex="3" class="icon-settings pop" title="Edit" data-toggle="tooltip" data-popoverid="#icon-setting"><span class="sr-only">Widget settings</span></span>
</div>
</div>
<div class="module-content" >
<div class="row">
<div class="col-md-12">
<div class="table-wrap">
<table class="table table-striped">
<thead>
<tr>
<th scope="col" role="columnheader" ng-repeat="header in question.dataTable.cols" >{{header.label}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in question.dataTable.rows">
<td ng-repeat="cell in row.cells"><a ng-if="cell.link" href="{{cell.link}}" tabindex="3">{{cell.f}}</a><span ng-if="!cell.link">{{cell.f}}</span></td>
</tr>
</tbody>
</table>
</div>
<ul ng-show="question.aggregateTable">
<li ng-repeat="row in question.aggregateTable.rows">
<strong>{{row.h}} </strong>
<a ng-if="row.link" href="{{row.link}}" tabindex="3">{{row.v}}</a>
<span ng-if="!row.link">{{row.v}}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And if I do not bootstrap my code manually on document.ready page does not load angular js not even first time.
Related
I have a website where i have two divs that acts as button. I have two table in my database namely 'users' and 'stores'. I would like to show the tables based on the button clicked. Is there a way to achieve this without a page reload and without using ajax if possible.
below is the code i used for the buttons.
<html>
<head>
</head>
<body>
<div class="btn_container">
<div class="buttons" id="btn_products"><i class="fas fa-store"></i>
<h1 class="products_text">Total Products</h1>
</div>
<div class="buttons" id="btn_users"><i class="fas fa-users"></i>
<h1 class="users_text">Total Users</h1>
</div>
<div class="buttons">btn3</div>
</div>
<div class="table_container">
<!--the table should be loaded here-->
</div>
</body>
</html>
If you don't want to use Ajax you have no other choice to have all tables in your HTML code when the page is loaded.
Here is what I propose
const tables = [...document.getElementsByClassName('table')];
[...document.getElementsByClassName('buttons')].forEach(button => {
button.addEventListener('click', evt => {
const id = button.id.replace('btn_', '');
tables.forEach(table => {
table.style.display = table.id === id ? 'block' : '';
});
});
});
.table {
display: none;
}
<div class="btn_container">
<div class="buttons" id="btn_products"><i class="fas fa-store"></i>
<h1 class="products_text">Total Products</h1>
</div>
<div class="buttons" id="btn_users"><i class="fas fa-users"></i>
<h1 class="users_text">Total Users</h1>
</div>
<div class="buttons">btn3</div>
</div>
<div class="table_container">
<table class="table" id="products">
<tbody>
<tr>
<th>Table products</th>
</tr>
</tbody>
</table>
<table class="table" id="users">
<tbody>
<tr>
<th>Table users</th>
</tr>
</tbody>
</table>
</div>
Note that if you want one of the two table to be shown when the page is loaded change the CSS to
#products /* #users */ {
display: none
}
I am building a pagination table and i am using routeprovider. So the flow is on the homepage user is presented with a carousel when he clicks the text on carousel he is directed to a new html page called queryBoard, where there is a form to submit some details, it then fetches the data from back and displays in tabular format but when user is redirected to queryBoard page i keep getting error
Unknown provider: ngTableParamsProvider
I have included 'ngTable' in my module.
Main.js
angular.module('ui.bootstrap.demo', ['pageslide-directive', 'ngAnimate', 'ui.bootstrap', 'ngTable', 'ngRoute']);
index.html
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
<script src="resources/js/main.js"></script>
<script src="resources/js/CarouselController.js"></script>
<script src="resources/js/dashboardrouter.js"></script>
<script src="resources/js/TypeAheadController.js"></script>
<script src="resources/js/angular-pageslide-directive.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-view></div>
</body>
</html>
welcome.html [user is presented with carousel and on click he is routed to a new page]
<h1 class="text-center text-primary centered">Welcome to ananta-gs dashboard</h1>
<div>
<uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides" style="height: 305px; width: 450px; margin:auto">
<uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="/resources/images/cloud-home.jpg" style="height:305px; margin:auto;">
<div class="carousel-caption">
<a ng-click='sendEnvName(slide.text)'>
<h3 class="carousel-caption text-primary center-block">
{{slide.text}}</h3>
</a>
</div>
</uib-slide>
</uib-carousel>
There are exceptions during app initialization, click here to see details
</div>
Carousel.js [relevant part]
$scope.sendEnvName = function (gridName) {
alert(gridName)
$location.path("/queryBoard/"+gridName);
}
dashboardrouter.js
angular.module('ui.bootstrap.demo').config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/welcome', {
templateUrl: 'welcome.html',
controller: 'CarouselDemoCtrl'
}).
when('/queryBoard/:gridName', {
templateUrl: 'query/queryboard.html',
controller: 'documentNameTypeAheadController',
}).
otherwise({
redirectTo: '/welcome'
});
}]);
TypeAheadCOntroller.js
angular.module('ui.bootstrap.demo').controller('documentNameTypeAheadController', function ($scope, $http, $filter, ngTableParams,
$uibModal, $timeout, $log, $window,
$routeParams) {
alert($routeParams.gridName);
});
QueryBoard.html
<title>Query Board</title>
<script type="text/css">
.app-modal-window .modal-dialog {
width: 500px;
}
</script>
<body>
<script type="text/html">
<ul class="dropdown-menu" role="listbox">
<li ng-repeat="match in matches track by $index"/>
</ul>
</script>
<div class='container-fluid typeahead-demo' ng-controller="documentNameTypeAheadController">
<h1>Query Board</h1>
<form class="form-inline" role="form" ng-submit="submit()">
<div class="form-group">
<input type="text" placeholder="type-name" ng-model="selectedDocumentTypeName"
uib-typeahead="state for state in states | filter:$viewValue | limitTo:8"
class="form-control">
</div>
<div class="form-group col-md-offset-1">
<input type="text" placeholder="search criteria" class="form-control" ng-model="queryCriteria">
</div>
<button type="submit" class="btn btn-default col-md-offset-1">Submit</button>
<div>
<table ng-table="tableParams" show-filter="true" class="table">
<thead>
<tr>
<th ng-repeat="headerName in headerNames"
class="text-center sortable">
{{headerName}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in paginatedDetailedDataType">
<td ng-repeat="headerName in headerNames">
<div class="animate-switch" ng-if="headerName == spaceIdFieldName">
{{user[headerName]}} </div>
<div class="animate-switch" ng-if="headerName != spaceIdFieldName">{{user[headerName]}}</div>
</td>
<script type="text/ng-template" id="DetailedQueryView.html">
<div class="modal-header">
<h3>Detailed Query view for {{detailedTypeName}} spaceId {{detailedSpaceId}}</h3>
</div>
<div class="modal-body">
<table ng-table="tableParams" show-filter="true" class="table">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="property in detailedObjectProperties">
<td>{{ property.key }}</td>
<td>
<div ng-show="property.disabled">{{property.value}}</div>
<div ng-hide="property.disabled"><input type="text" ng-model="property.value"/>
</div>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-hide="updateEnabled" ng-click="edit()">Edit</button>
<button class="btn btn-primary" ng-show="updateEnabled" ng-click="save()">Save</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</body>
I tried including the ngTable in TypeAheadController also but doesnot works, Can you please guide me where am i going wrong
I'm trying to print an content of my html page.
I'm using this angularPrint but the problem im having is that in the page preview i'm getting to pages. the first one has content and the second one is a blank page. I'm trying to get rid of the blank page.
this is my html
<div id="invoice" print-section="" print-only="">
<div class="invoice">
<div class="invoice-company">{{user.store.name}}</div>
<div class="invoice-header">
<div class="invoice-from"><small>from</small>
<address class="m-t-5 m-b-5"><strong>{{user.store.name}}.</strong><br/>{{user.store.address.street}}<br/>{{user.store.address.city}}, {{user.store.address.zipCode}}<br/>Phone: {{user.store.phone}}</address>
</div>
<div class="invoice-date">
<div class="date m-t-5">{{saleDate | date:'MM/dd/yyyy'}}</div>
<div class="invoice-detail"># {{saleId}}<br/>Cashier {{user.firstName}}</div>
</div>
</div>
<div class="invoice-content">
<div class="table-responsive">
<table class="table table-invoice">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in sale.items">
<td>{{item.name}} {{item.size}}</td>
<td>{{item.price | currency}}</td>
</tr>
<tr ng-repeat="discount in sale.discounts">
<td>{{discount.name}}</td>
<td>- {{discount.price | currency}}</td>
</tr>
</tbody>
</table>
</div>
<div class="invoice-price">
<div class="invoice-price-left">
<div class="invoice-price-row">
<div class="sub-price"><small>SUBTOTAL</small>{{sale.subtotal | currency}}</div>
<div class="sub-price"><i class="fa fa-plus"></i></div>
<div class="sub-price"><small>TAX</small>{{sale.tax}}</div>
</div>
</div>
<div class="invoice-price-right"><small>TOTAL</small>{{sale.total | currency}}</div>
</div>
</div>
<div class="invoice-footer text-muted">
<p class="text-center m-b-5">Thank you for coming.<br/>We hope you'll visit again.</p>
</div>
</div>
</div>
this is the directive that trigger the print action
<button type="button" print-btn="">Print</button>
I want a solution it doesn't matter if I have to use plain javascript/jQuery or no directive at all. I just to be able to populate an invoice and print it.
Thank you in advance.
you could add
#invoice:last-child {
page-break-after: auto;
}
to remove the last page
Note: Not supported in IE
Using Aurelia, I have the following model:
export class Services {
heading = 'Services';
services = [
{ 'name': 'Test Service', 'instances': [{'uri': 'test_uri'}]},
{ 'name': 'Another Service', 'instances': [{'uri': 'other_uri'}, {uri: 'backup_uri'}]}
];
}
and the following view:
<template>
<require from="bootstrap/css/bootstrap.css"></require>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>${heading}</h2>
</div>
</div>
<div class="row" repeat.for="service of services">
<div class="panel panel-default">
<div class="panel-heading">${service.name}</div>
<table class="table">
<thead>
<tr>
<th>URI</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<div repeat.for="instance of service.instances">
<tr>
<td>${instance.uri}</td>
<td>Running</td>
</tr>
</div>
</tbody>
</table>
</div>
</div>
</div>
</template>
The outer repeat.for seems to work correctly and ${service.name} is replaced with the .name property from the model. However, ${instance.uri} does not give any output. If I replace ${instance.uri} with ${service.instances[0].uri} I do get the output expected.
In addition, I expect the second repeat of service of services to generate two lines in the table body, but it generates only one.
I've tried replacing <div repeat.for="instance of service.instances"> with <div repeat.for="instance of $parent.instances"> with the same unsatisfactory result.
What do I need to change to ensure that the inner repeat works correctly?
Browsers do not allow divs in tables.
change this:
<tbody>
<div repeat.for="instance of service.instances">
<tr>
<td>${instance.uri}</td>
<td>Running</td>
</tr>
</div>
</tbody>
to this:
<tbody>
<tr repeat.for="instance of service.instances">
<td>${instance.uri}</td>
<td>Running</td>
</tr>
</tbody>
I'm trying to create a navigation bar, this is how my html code looks like.....
<div class="container">
<div class="row">
<div class="navbar navbar-default">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li><span class="navbar-brand">Registration</span></li>
</ul>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Courses</li>
<li>Instructors</li>
</ul>
</div>
</div>
<div ng-view></div>
</div>
</div>
I have put 'ng-app' tag in my Layout page............. My issue is when i click these two navigation buttons, it will give me an error page saying page not found(404 error code)......... this is how my module looks like.............
var registrationModule = angular.module("registrationModule", [])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/Courses', { templateUrl: '/Templates/Course.cshtml', controller: 'CoursesController' });
$routeProvider.when('/Instructors', { templateUrl: '/Templates/Instructor.cshtml', controller: 'InstructorsController' });
$locationProvider.html5Mode(true);
})
;
These are the two templates i have created..........
1. Course.cshtml:
<div class="row">
<h2>Course</h2>
<div class="span10">
<table class="table table-condensed table-hover">
<tr>
<th>Course</th>
<th>Course Name</th>
<th>Instructor</th>
</tr>
<tr ng-repeat="course in courses">
<td>{{course.number}}</td>
<td>{{course.name}}</td>
<td>{{course.instructor}}</td>
</tr>
</table>
</div>
</div>
2.Instructor.cshtml:
<div class="row">
<h2>Instructor</h2>
<div class="span10">
<table class="table table-condensed table-hover">
<tr>
<th>Room Number</th>
<th>Instructor's Name</th>
<th>Email</th>
</tr>
<tr ng-repeat="instructor in instructors">
<td>{{instructor.roomNumber}}</td>
<td>{{instructor.name}}</td>
<td>{{instructor.email}}</td>
</tr>
</table>
</div>
</div>
You can't access cshtml file through url because they are nothing but analysed C# razor engine, I'd prefer you to load those .cshtml file from controller action. Instead of directive path of cshtml load it using asp.net mvc controller action.
CODE
var registrationModule = angular.module("registrationModule", [])
.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/Courses', {
//templates controller Course action will return Course.cshtml
templateUrl: '/Templates/Course',
controller: 'CoursesController'
});
$routeProvider.when('/Instructors', {
//templates controller Instructor action will return Instructor.cshtml
templateUrl: '/Templates/Instructor',
controller: 'InstructorsController'
});
$locationProvider.html5Mode(true);
});