I have a json file which i will be fetching using $http service.
The sample json is added.
I am saving the json to angularjs scope variable.
How to display the dat in html.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>English Premier League</title>
</head>
<body ng-controller="mainController">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">Premier League</a>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/soccer-bg.jpg')">
</header>
<div ng-repeat="blog in array">
<ul class "nav nav-pills">
<li><a href ng-click ="tab"={{$index+1}}>{{blog.matches}}</a></li>
</ul>
</div>
</body>
</html>
JSON file->
{"name":"English Premier League 2015/16","rounds":[{"name":"Play-Off um 1 Premierleague-Platz:","matches":[{"date":"2015-08-08","team1":{"key":"manutd","name":"Manchester United","code":"MUN"},"team2":{"key":"tottenham","name":"Tottenham Hotspur","code":"TOT"},"score1":1,"score2":0},{"date":"2015-08-08","team1":{"key":"bournemouth","name":"Bournemouth","code":"BOU"},"team2":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"score1":0,"score2":1}]},{"name":"Matchday 2","matches":[{"date":"2015-08-14","team1":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"team2":{"key":"manutd","name":"Manchester United","code":"MUN"},"score1":0,"score2":1},{"date":"2015-08-15","team1":{"key":"southampton","name":"Southampton","code":"SOU"},"team2":{"key":"everton","name":"Everton","code":"EVE"},"score1":0,"score2":3}]}]}
IN the output whole array is displaying.Below is the app.js file
app.js
var myApp = angular.module('blogApp', []);
myApp.controller('mainController',['$http','$scope',function($http,$scope) {
$http.get('https://xxxxx.json').success(function(data){
$scope.array=data;
console.log(data);
console.log($scope.array);
});
}]);
This is how you need to be displaying in html page.
Instead of getting the json over http request i have hardcoded the value and made the following example.
Hope it helps
<!DOCTYPE html>
<html>
<head>
<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>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script>
(function() {
angular.module("blogApp", []).controller('mainController', ['$http', '$scope', function($http, $scope) {
$scope.array = {"name":"English Premier League 2015/16","rounds":[{"name":"Play-Off um 1 Premierleague-Platz:","matches":[{"date":"2015-08-08","team1":{"key":"manutd","name":"Manchester United","code":"MUN"},"team2":{"key":"tottenham","name":"Tottenham Hotspur","code":"TOT"},"score1":1,"score2":0},{"date":"2015-08-08","team1":{"key":"bournemouth","name":"Bournemouth","code":"BOU"},"team2":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"score1":0,"score2":1}]},{"name":"Matchday 2","matches":[{"date":"2015-08-14","team1":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"team2":{"key":"manutd","name":"Manchester United","code":"MUN"},"score1":0,"score2":1},{"date":"2015-08-15","team1":{"key":"southampton","name":"Southampton","code":"SOU"},"team2":{"key":"everton","name":"Everton","code":"EVE"},"score1":0,"score2":3}]}]};
}]);
}());
</script>
<style></style>
</head>
<body ng-app="blogApp">
<div ng-controller="mainController">
<div>
<h1>Test: {{array.name}}</h1>
<div ng-repeat="round in array.rounds">
<h3>Round: {{round.name}}</h3>
<table class="table">
<tr>
<th>Date</th>
<th>Team 1</th>
<th>Team 2</th>
<th>Score 1</th>
<th>Score 2</th>
</tr>
<tr ng-repeat="match in round.matches">
<td>{{ match.date | date}}</td>
<td>{{ match.team1.name }}</td>
<td>{{ match.team2.name }}</td>
<td>{{ match.score1 }}</td>
<td>{{ match.score2 }}</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Im trying to make a system that will print label's. but dont know how to make it as i want. It is working when i only have one row in the DB, but when i get more rows, that is when i hit some problems with the layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Din Matmerking</title>
<!-- style -->
<link href="config/stil/style.css" rel="stylesheet" type="text/css">
<link href="config/stil/oppskrift.css" rel="stylesheet" type="text/css">
<link href="config/stil/merk.css" rel="stylesheet" type="text/css">
<!-- <link href="/config/stil/base_style.css" rel="stylesheet" type="text/css"> -->
<!-- W3 -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="main" class="container">
<div class="panel panel-default">
<div class="panel-heading">
<div class="logo"><img src="/img/Logo2.png" class="img-responsive"></div>
</div>
<br>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Velkommen</a>
</div>
<ul class="nav navbar-nav">
<li>Hjem</li>
<li>Oppskrifter</li>
<li>Matmerking</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-out"></span> Logg ut</li>
</ul>
</div>
</nav>
<div class="panel-body">
<div class="well">
<div id="printableArea">
<form id="merk">
<table>
<thead>
<!-- <tr>
<th id="text">Matmerking</th>
</tr>
<tr>
<th><br></th>
</tr> -->
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td id="text"><b>Produkt: </b></td>
<td><b>'.$row["name"].'</b></td>
</tr>
<tr>
<td id="text"><b>Laget: </b></td>
<td><b>'.$row["produsert"].'</b></td>
</tr>
<tr>
<td id="text"><b>Holdbarhet: </b></td>
<td><b>'.$row["holdbarhet"].'</b></td>
</tr>
<tr>
<td id="text"><b>Pris pr kg: </b></td>
<td><b>'.$row["pris_kg"].' ,-</b></td>
</tr>
<tr>
<td id="text"><b>Laget av: </b></td>
<td><b>'.$row["signatur"].'</b></td>
</tr>
';
}
?>
</tbody>
</table>
</form>
</div>
<br>
<input type="button" class="btn btn-primary" onclick="printDiv('printableArea')" value="Print" />
</div>
</div>
<div class="panel-footer">
<br>
<label><p>© DIN-MATMERKING.NO 2017</p></label>
<br>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
</body>
</html>
I want the user to be able to chose form a name that is displyed in a table whit data from MySqlDB.
this is how I want it to be displayed:
Here you see how it looks when I have more rows in the DB:
Any adwise? Maybe ita possible to have a DB table displayd in html and have it so the name can be a link and open a modual where the info i want printed out is displayd.
<?php
$connect = mysqli_connect("connection",
"username", "password", "DB");
$query = "SELECT * FROM merkelapp";
$result = mysqli_query($connect, $query);
?>
DB structure
So the basic structure of your HTML should be as follows, for each label:
<div id="printableArea"> <!-- HERE YOU MUST HAVE A UNIQUE ID FOR EACH LABEL -->
<form id="merk"> <!-- HERE YOU MUST HAVE A UNIQUE ID FOR EACH LABEL AS WELL -->
<table><!-- LABEL DETAILS --></table>
<!-- HERE YOU NEED TO PASS THE UNIQUE ID OF THE AREA YOU WANT TO PRINT -->
<input type="button" class="btn btn-primary" onclick="printDiv('printableArea')" value="Print" />
</form>
</div>
My suggestion is that you create a separate .well wrapper for each label, and by using the unique id of each row in the merkelapp table, you can create a unique ID attributes for your elements:
<?php while($row = mysqli_fetch_array($result)) { ?>
<div class="well">
<div id="printableArea<?php echo $row['id']; ?>">
<form id="merk<?php echo $row['id']; ?>">
<table>
<tbody>
<tr>
<td id="text"><b>Produkt: </b></td>
<td><b><?php echo $row["name"]; ?></b></td>
</tr>
<tr>
<td id="text"><b>Laget: </b></td>
<td><b><?php echo $row["produsert"]; ?></b></td>
</tr>
<tr>
<td id="text"><b>Holdbarhet: </b></td>
<td><b><?php echo $row["holdbarhet"]; ?></b></td>
</tr>
<tr>
<td id="text"><b>Pris pr kg: </b></td>
<td><b><?php echo $row["pris_kg"]; ?> ,-</b></td>
</tr>
<tr>
<td id="text"><b>Laget av: </b></td>
<td><b><?php echo $row["signatur"]; ?></b></td>
</tr>
</tbody>
</table>
</form>
</div>
<br>
<input type="button" class="btn btn-primary" onclick="printDiv('printableArea<?php echo $row['id']; ?>')" value="Print" />
</div>
<?php } ?>
Note that I appended the ID of each row after the id attributes (printableArea<?php echo $row['id']; ?>) so the output of the id's will be printableArea1, printableArea2, printableArea3 and so on. I did the same for each form (merk1, merk2...).
I also changed the printDiv('printableArea') and added the row ID there so when you click on a button, it will pass the correct ID to that function.
As a side note, I recommend to escape the output using htmlentities so characters like > will not break the HTML structure by replacing it with the corresponding >, so instead of just having:
<td><b><?php echo $row["name"]; ?></b></td>
You output it like this:
<td><b><?php echo htmlentities( $row["name"] ); ?></b></td>
I am making a web service using ASP.NET. I have three dropdown lists that work, but somehow, the date picker doesn't work when I put code in the table. BUT, it works when I use it outside. Here is my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet"/>
<link href="customStyleSheet.css" rel="stylesheet" />
<link href="css/pikaday.css" rel="stylesheet" type="text/css" />
<link href="css/theme.css" rel="stylesheet" type="text/css" />
<link href="css/site.css" rel="stylesheet" type="text/css" />
<script src="scripts/Pikaday/moment.js" type="text/javascript"></script>
<script src="scripts/Pikaday/pikaday.js" type="text/javascript"></script>
<style>
table{
font-size:20pt;
}
select{
width:300px;
}
TextBox{
width:300px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<%--Left sidebar--%>
<div class ="col-lg-4">
<table>
<tr>
<td>Building</td>
<td>
<select id="buildings"></select>
</td>
</tr>
<tr>
<td>Room</td>
<td>
<select id="rooms"></select>
</td>
</tr>
<tr>
<td>Employee</td>
<td>
<select id="employees"></select>
</td>
</tr>
<tr>
<td>Start Day</td>
<td>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<script = "text/javascript">
var picker = new Pikaday(
{
field: document.getElementById("TextBox1"),
firstDay: 1,
format: "YYYY-MM-DD",
minDate: new Date('2000-01-01'),
maxDate: new Date('2020-12-31'),
yearRange: [2000,2020],
numberOfMonths: 2
});
</script>
</td>
</tr>
</table>
<%--Row #1--%>
<div class ="row">
<div class ="col-lg-4">
<div class = "singleLabel">Start date:</div>
</div>
<div class ="col-lg-7">
<div class = "textBox"><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div>
<script = "text/javascript">
var picker = new Pikaday(
{
field: document.getElementById("TextBox1"),
firstDay: 1,
format: "YYYY-MM-DD",
minDate: new Date('2000-01-01'),
maxDate: new Date('2020-12-31'),
yearRange: [2000,2020],
numberOfMonths: 2
});
</script>
</div>
</div>
<%--Row #2--%>
<div class ="row">
<div class ="col-lg-4">
<div class = "singleLabel">End date:</div>
</div>
<div class ="col-lg-7">
<div class = "textBox"><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></div>
<script = "text/javascript">
var picker = new Pikaday(
{
field: document.getElementById("TextBox2"),
format: "YYYY-MM-DD",
firstDay: 1,
minDate: new Date('2000-01-01'),
maxDate: new Date('2020-12-31'),
yearRange: [2000,2020],
numberOfMonths: 2
});
</script>
</div>
</div>
</div>
<%--Right main column--%>
<div class ="col-lg-8">
<div class = "customDiv">Main area</div>
</div>
</form>
</body>
</html>
I have read similar posts, but I still can't see it. Moreover, if please possible, is there a way to put everything neatly in a table. Here is a screenshot:
Thank you very much for your help!
how to implement infine scroll as json data is large file. i have a bit of trouble as creating an infinite scroll in angularjs from a JSON file generated on an external site. How to I get the infinite scroll to work relative to the inner content div scrollbar? below is my code
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="table.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(window).resize(function() {
if ($(window).width() < 960) {
window.location = "http://www.stackoverflow.com";
}
else {
window.location = "http://www.google.com";
}
});
</script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body class="body" ng-app="myApp" ng-controller="customersCtrl">
<header class="mainHeader">
<nav>
<ul>
<li class="active">Sokranti Data Analytics</li>
</ul>
</nav>
</header>
<div class="mainContent">
<div class="content">
<article class="topcontent">
<content>
<div class="mytable">
<table >
<tr>
<td>eng_rev_type</td>
<td>year_start</td>
<td>year_end</td>
<td>type</td>
<td>amount</td>
</tr>
<tr ng-repeat="x in names | filter:test">
<td>{{ x.eng_rev_type }}</td>
<td>{{ x.year_start }}</td>
<td>{{ x.year_end }}</td>
<td>{{ x.type }}</td>
<td>{{ x.amount }}</td>
</tr>
</table>
</div>
</content>
</article>
</div>
<aside class="top-sidebar">
<article>
<h2>Filter</h2>
<p><input type="text" ng-model="test"></p>
</article>
</aside>
</div>
<footer class="mainFooter">
<p>Copyright © 2015 </p>
</footer>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("data.json")
.success(function (response) {$scope.names = response.data;});
});
</script>
</body>
</html>
You can create a directive that will bind on the scroll event. Then you can increase the size of the scroll height.
I am a layman in html, but for my personal website, I am trying to add some lightbox (Fancybox).
The problem I am facing is that it is only opening the first link as the lightbox, not the 2nd one. If I interchange the position (i.e. the 2nd link which was not opening became 1st) then the present first link is opening, and not the previous one.
I have tried to make an minimal example:
index.html:
<!DOCTYPE html>
<head>
<title>Learning Fancybox</title>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("#iframe").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
</head>
<body>
<div id="content">
<table cellpadding="10" cellspacing="0" border="0">
<tr>
<td>
<h3>Trying Fancybox</h3>
<li><a id="iframe" href="jbn.html" />content1</a></li>
<li><a id="iframe" href="chabi.html" />content2</a></li>
</td>
</tr>
</table>
</div>
</body>
</html>
content1(jbn.html)
<!DOCTYPE html>
<head>
<title>content2</title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
</head>
<body>
<div id="container">
<div id="header">
<div id="content">
Some txt for content2
</div>
</div>
</div>
</body>
</html>
and content 2(chabi.html)
<!DOCTYPE html>
<head>
<title>lb content1</title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
</head>
<body>
<div id="container">
<div id="header">
<div id="content">
Some txt here
</div>
</div>
</div>
</body>
</html>
As it is now, the jbn.html is opening as lightbox, chabi.html is opening as an independent webpage.
Please help
UPDATE It is possibly not a fancybox problem, as I have just checked, if I add an identical id as #iframe2 and change the id of the 2nd links id to that, it is working properly.
Please help.
Problem is solved by changing the id to class(.iframe)