I have created a datatable showing a list of persons and their details. When the datatable is clicked, it has to show the entity of the single person with their details but my problem is, when I click the datatable it is opening a chat box showing the entity of the last clicked person changing all other chat box details.
How can I limit the append directive, that is, one chatbox for one id?
How to display the name of the particular person without changing the older chat box entity?
Here is the link to Plunker
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular-route.min.js"></script>
<script src="script.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body lang="en" ng-app="myApp">
<div ng-controller="ListController">
<div class="content" ng-controller="MainController">
<div class="row">
<div class="col-xs-12">
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tr>
<th>Name</th>
<th>First Name</th>
<th>Status</th>
<th>Reknown</th>
</tr>
<tr ng-repeat="item in artists" style="cursor:pointer;">
<td ng-click="AppendText($index)"><span value="{{artists.indexOf(item)}}"></span>{{item.name}}</td>
<td ng-click="AppendText($index)"><span value="{{artists.indexOf(item)}}"></span>
<h5>{{item.shortname}}</h5></td>
<td ng-click="AppendText($index)"><span value="{{artists.indexOf(item)}}"></span><span class="label label-success">Approved</span></td>
<td ng-click="AppendText($index)"><span value="{{artists.indexOf(item)}}"></span>{{item.reknown}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="my-directive-placeholder"></div>
</body>
</html>
Related
I have some code (as below) HTML and JavaScript . Actually, I've already fetched some of data from a covid-19 API and also i kept those information on HTML table .
So, now i wanna search info from the HTML table with country name. But, I couldn't that. So, please some one help me to solve this problem .
fetch('https://api.covid19api.com/summary')
.then(response => response.json())
.then(data => {
var tbody = document.querySelector('#tbody');
tbody.innerHTML = `
<tr>
<td>${data.Global.NewConfirmed}</td>
<td>${data.Global.TotalConfirmed}</td>
<td>${data.Global.TotalDeaths}</td>
<td>${data.Global.TotalRecovered}</td>
</tr>
`
var all_covid_data = document.querySelector('#all_covid_data')
var countries = data.Countries ;
for(var i =1;i<countries.length ; i++){
all_covid_data.innerHTML += ` <tr>
<td class='bg-primary text-light '>${countries[i].Country}</td>
<td>${countries[i].NewConfirmed}</td>
<td>${countries[i].NewDeaths}</td>
<td>${countries[i].NewRecovered}</td>
<td>${countries[i].TotalConfirmed }</td>
<td>${countries[i].TotalRecovered}</td>
<td>${countries[i].TotalDeaths}</td>
</tr>`;
}
})
.catch(err => console.log(err))
// searching or filtering data from table
var tableRow = document.getElementById('all_covid_data');
var inputField = document.getElementById('searchBox');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Covid-19 Info</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 py-3">
<h2 class="text-uppercase text-center">Covid-19 Informations</h2>
<hr style="width: 110px; text-align: center; border-width: 3px; border-color:#17A2B8">
<table class="table">
<thead class="bg-info text-light">
<tr>
<th>NewConfirmed</th>
<th>TotalCases</th>
<th>TotalDeaths</th>
<th>TotalRecovered</th>
</tr>
</thead>
<tbody class="bg-dark text-light" id='tbody'>
</tbody>
</table>
</div>
<div class="col-md-2"></div>
</div>
<section id="countries_data" class="py-4">
<div class="row">
<div class="col-12">
<div class="d-flex">
<input type="text" name="" placeholder="Search here" id="searchBox" class="form-control">
<button class="btn ml-2 btn-info">Search</button>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered table-striped my-4 table-hover">
<thead class="bg-info text-light">
<tr>
<th>Countries</th>
<th>NewConfirmed</th>
<th>NewDeaths</th>
<th>NewRecovered</th>
<th>TotalConfirmed</th>
<th>TotalRecovered</th>
<th>TotalDeaths</th>
</tr>
</thead>
<tbody id='all_covid_data'>
</tbody>
</table>
</div>
</section>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="./app.js"></script>
</body>
</html>
Create separate methods, one to fetch data from API & another to populate the table.
Simply use filter() method to filter Country by name and re-use the populateTable() method.
Start the for loop from 0.
$(document).ready(function() {
var summary;
fetch('https://api.covid19api.com/summary')
.then(response => response.json())
.then(data => {
summary = data;
populateTable(data);
})
.catch(err => console.log(err))
function populateTable(data) {
var tbody = document.querySelector('#tbody');
tbody.innerHTML = `
<tr>
<td>${data.Global.NewConfirmed}</td>
<td>${data.Global.TotalConfirmed}</td>
<td>${data.Global.TotalDeaths}</td>
<td>${data.Global.TotalRecovered}</td>
</tr>
`;
var countries = data.Countries;
let content = '';
for (var i = 0; i < countries.length; i++) {
content += `<tr>
<td class='bg-primary text-light '>${countries[i].Country}</td>
<td>${countries[i].NewConfirmed}</td>
<td>${countries[i].NewDeaths}</td>
<td>${countries[i].NewRecovered}</td>
<td>${countries[i].TotalConfirmed }</td>
<td>${countries[i].TotalRecovered}</td>
<td>${countries[i].TotalDeaths}</td>
</tr>`;
}
$('#all_covid_data').html(content);
}
// searching or filtering data from table
var tableRow = document.getElementById('all_covid_data');
var inputField = document.getElementById('searchBox');
$("#search_btn").click(() => {
var filteredData = JSON.parse(JSON.stringify(summary));
filteredData.Countries = filteredData.Countries.filter(c => c.Country.toLowerCase().includes(inputField.value.toLowerCase()));
if (filteredData.Countries.length > 0) {
$('#all_covid_data').html('');
populateTable(filteredData);
} else {
alert('Country not found');
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Covid-19 Info</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 py-3">
<h2 class="text-uppercase text-center">Covid-19 Informations</h2>
<hr style="width: 110px; text-align: center; border-width: 3px; border-color:#17A2B8">
<table class="table">
<thead class="bg-info text-light">
<tr>
<th>NewConfirmed</th>
<th>TotalCases</th>
<th>TotalDeaths</th>
<th>TotalRecovered</th>
</tr>
</thead>
<tbody class="bg-dark text-light" id='tbody'>
</tbody>
</table>
</div>
<div class="col-md-2"></div>
</div>
<section id="countries_data" class="py-4">
<div class="row">
<div class="col-12">
<div class="d-flex">
<input type="text" name="" placeholder="Search here" id="searchBox" class="form-control">
<button class="btn ml-2 btn-info" id="search_btn">Search</button>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered table-striped my-4 table-hover">
<thead class="bg-info text-light">
<tr>
<th>Countries</th>
<th>NewConfirmed</th>
<th>NewDeaths</th>
<th>NewRecovered</th>
<th>TotalConfirmed</th>
<th>TotalRecovered</th>
<th>TotalDeaths</th>
</tr>
</thead>
<tbody id='all_covid_data'>
</tbody>
</table>
</div>
</section>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="./app.js"></script>
</body>
</html>
I am trying to change the content of multiple elements with the same id, using:
window.onload = function() {
document.getElementById('price_01').innerHTML = price_01;
document.getElementById('dimension_01').innerHTML = dimension_01;
}
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script type="text/javascript">
var price_01 = '$8000';
var dimension_01 = '10m';
window.onload = function() {
document.getElementById('price_01').innerHTML = price_01;
document.getElementById('dimension_01').innerHTML = dimension_01;
}
</script>
<body>
<div class="w3-container">
<h2>W3.CSS Modal</h2>
<div class="w3-container">
<table class="table">
<tbody>
<tr>
<td>Price:</td>
<td id='price_01'></td>
</tr>
<tr>
<td>Dimension:</td>
<td id='dimension_01'></td>
</tr>
</tbody>
</table>
</div>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<div class="w3-container">
<table class="table">
<tbody>
<tr>
<td>Price:</td>
<td id='price_01'></td>
</tr>
<tr>
<td>Dimension:</td>
<td id='dimension_01'></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
However, it seems that the code doesn't work because you can only have one unique id for each element. Is there a more elegant solution to this problem without for loops and class? I have a lot of these elements to populate and I don't really want to write a for loops for each of them.
I was trying to iterate though an array defined in the data section of a Vue instance, so the table head could be determined automatically. But when I ran the code, the console output was as follows:
Here's the code (.js file combined):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Demo</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<h3>
Staffs
</h3>
<table id="mytable" class="table table-hover">
<thead>
<tr>
<th v-for:"term in items">
{{term}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td>6556</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row clearfix">
<div class="col-md-8 column">
<ul class="pagination">
<li>
Prev
</li>
<li v-for="n in 5">
{{n}}
</li>
<li>
Next
</li>
</ul>
</div>
<div class="col-md-4 column">
<button class="btn btn-default" type="button">button</button>
</div>
</div>
</div>
<script>
'use strict';
console.log("here we go!");
var tab = new Vue({
el: '#mytable',
data: {
items: ['aa','bb']
}
});
</script>
</body>
</html>
And the appearance was like:
Replace
v-for:"term in items"
With
v-for="term in items"
how to use ngResource module
to send data to server.
and get data from server
i trying to send data to solr server
using angularjs api
and npm package manager to install package to my application
thank you for your help
controller.js:
var app=angular.module('myApp', ['ngResource']);
app.controller('Mycontroller',function($scope, $resource) {
$scope.requete = $resource('http://localhost:8983/solr/#/cv/:action',
{action:'cv.json', q:'angularjs', callback:'JSON_CALLBACK'},
{get:{method:'JSONP'}});
$scope.chercher = function () {
$scope.repnses = $scope.requete.get({q:$scope.formInfo.Quoi});
};
})
search.html :client
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body >
<div ui-view></div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Formation</a>
<a class="navbar-brand" href="app/index.html">Formateur</a>
<a class="navbar-brand" href="app/search.html" active>Client</a>
</div>
</div>
</nav>
<div ng-contoller="Mycontroller">
<form class="form-horizontal" role="form">
<div class="table">
<table class="table table-striped">
<tr>
<td>
<label for="inputQuoi" class="col-sm-2 control-label">Quoi</label>
</td>
<td></td>
</tr>
<tr>
<td>
<input class="form-control" id="inputQuoi" placeholder="quoi" ng-model="formInfo.Quoi" required>
</td>
<td><button type="submit" ng-click="chercher()" class="btn btn-primary" >chercher</button></td>
</tr>
</table>
</div>
</form>
<table class="table table-striped">
<tr ng-repeat="repnse in reponses.results">
<td>{{requete.text}}</td>
</tr>
</table>
</div>
<script src="app/js/controller.js"></script>
<script src="node_modules/angular-resource/angular-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</body>
</html>
Not sure if this is your problem.
But you have this...
<tr ng-repeat="repnse in reponses.results">
<td>{{requete.text}}</td>
</tr>
But dont really have any variable called reponses.results, or anything with requete as the variable.
Your code puts the get response in $scope.repnses
So to loop through that you need to refer to it properly.
<tr ng-repeat="repnse in repnses.results">
// Then refer to the variables inside of it using the repnse variable.
// not requet, dont even know where you're getting that from
<td>{{repnse.text}}</td>
</tr>
I have Home Team and away Team Scorer in my HTML and i want to sort each Goal Scorer in Minutes (Ascending). Here is the HTML Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sort</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script src="angular/angular.min.js"></script>
<script>
(function(angular) {
'use strict';
angular.module('orderByScore', [])
.controller('ScoreController', ['$scope', function($scope) {
$scope.goals =
[{scorer:'Glen', mins:'40"', type:'Own Goal', min:40},
{scorer:'Beckham', mins:'20"', type:'Goal', min:20},
{scorer:'Ronaldo', mins:'70"', type:'Own Goal', min:70}];
}]);
})(window.angular);
</script>
<script>
(function(angular) {
'use strict';
angular.module('orderByScore', [])
.controller('ScoreControllerX', ['$scope', function($scope) {
$scope.goalsx =
[{scorer:'Glen', mins:'4"', type:'Goal', min:4},
{scorer:'Glen', mins:'75"', type:'Goal', min:75},
{scorer:'David', mins:'30"', type:'Own Goal', min:30}];
}]);
})(window.angular);
</script>
</head>
<body ng-app="orderByScore">
<div ng-controller="ScoreController">
<div class="home-team col-md-6">
<table class="goalx">
<tr style="display: none">
<th>Scorer</th>
<th>Minute</th>
<th>Type</th>
<th>Min</th>
</tr>
<tr ng-repeat="goalx in goalsx | orderBy:'+min'">
<td>{{goal.scorer}}</td>
<td>{{goal.mins}}</td>
<td>{{goal.type}}</td>
<td style="display: none">{{goal.min}}</td>
</tr>
</table>
</div>
<div class="away-team col-md-6">
<table class="goal">
<tr style="display: none">
<th>Scorer</th>
<th>Minute</th>
<th>Type</th>
<th>Min</th>
</tr>
<tr ng-repeat="goal in goals | orderBy:'+min'">
<td>{{goal.scorer}}</td>
<td>{{goal.mins}}</td>
<td>{{goal.type}}</td>
<td style="display: none">{{goal.min}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
If away team is working, home team is not displaying. if home team display the away team is dissappear. I want the home and away team scorer display. Please Help to make it work.
You will have to use ng-repeat with filters. In your case, you will have to use orderby filter.
<ul>
<li ng-repeat="goal in goalsx | orderBy:'goal.mins'">{{goal.scorer}}</li>
</ul>
Hope this helps.
replace goal with goalx in ng-repeat="goalx in goalsx | orderBy:'+min' like {{goalx.scorer}}
In home team's case you used "ng-repeat = goalx in goalsx" but inside the div everywhere you used "goal.scorer","goal.miins", etc. All you have to do is replace the ng-repeat as "ng-repeat = goal in goalsx".
<div class="home-team col-md-6">
<table class="goalx">
<tr style="display: none">
<th>Scorer</th>
<th>Minute</th>
<th>Type</th>
<th>Min</th>
</tr>
<tr ng-repeat="goal in goalsx | orderBy:'+min'"> // use 'goal in goalsx' here
<td>{{goal.scorer}}</td>
<td>{{goal.mins}}</td>
<td>{{goal.type}}</td>
<td style="display: none">{{goal.min}}</td>
</tr>
</table>
</div>
<div class="away-team col-md-6">
<table class="goal">
<tr style="display: none">
<th>Scorer</th>
<th>Minute</th>
<th>Type</th>
<th>Min</th>
</tr>
<tr ng-repeat="goal in goals | orderBy:'+min'">
<td>{{goal.scorer}}</td>
<td>{{goal.mins}}</td>
<td>{{goal.type}}</td>
<td style="display: none">{{goal.min}}</td>
</tr>
</table>
</div>