When I use this HTML template in my server, the head is copied on the body. I get in
<table id="myTable">
the whole head repeated.
<title>IndoorLoc App</title>
That title tag is the first that appears after the table tag and I don't understand wht thid happens and following that comes all the head tag including js scripts.
<!DOCTYPE>
<html>
<head>
<title>IndoorLoc App</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script type="text/javascript">
function ajax(){
var req = new XMLHttpRequest();
req.onreadystatechange = function(){
if (req.readyState == 4 && req.status == 200) {
document.getElementById('myTable').innerHTML = req.responseText;
}
}
req.open('GET', 'http://localhost:8080/data', true);
req.send();
}
setInterval(function(){ajax();}, 1000);
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header id="head">
<h1>IndoorLoc</h1>
</header>
<table id="myTable">
<tr>
<td>MAC address</td>
<td>RSSI</td>
</tr>
%for row in rows1:
<tr>
<td>{{ row[1] }}</td>
<td>{{ row[2] }}</td>
</tr>
%end
<tr>
<td>MAC address</td>
<td>RSSI</td>
</tr>
%for row in rows2:
<tr>
<td>{{ row[1] }}</td>
<td>{{ row[2] }}</td>
</tr>
%end
</table>
</body>
</html>
The response you are getting and directly inserting inside table tag, what kind of data is that, If it is table body markup then it will work otherwise it will just add string or response whatever you are getting.
Related
Im using the Jquery for pagination of my data tables and it is working great. However, when i add some AJAX script to load data without page refresh, the pagination function is not working anymore. Can anyone point out my mistake? my code is as below:
My table:
<table id="data-table" class="table table-striped border " style="width:100%">
<thead>
<tr>
<th>No</th>
<th>License Plate</th>
<th>Status</th>
<th>Time</th>
<th>Date</th>
</tr>
</thead>
<tbody>
#foreach($bg_records as $bg_record)
#if($bg_record -> status == 1)
<tr id="">
<th scope="row">{{ $loop->iteration }}</th>
<td>{{ $bg_record -> lp}}</td>
<td> PASS</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('h:i:s')}}</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('d-m-Y')}}</td>
</tr>
#else
<tr id="">
<th scope="row">{{ $loop->iteration }}</th>
<td>{{ $bg_record -> lp}}</td>
<td> FAILED</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('h:i:s')}}</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('d-m-Y')}}</td>
</tr>
#endif
#endforeach
</tbody>
</table>
My AJAX script to load the table without page refresh
<script type="text/javascript">
var delay = 1000;
var refreshId = setInterval(function () {
$('#data-table').load(' #data-table');
}, delay);
</script>
JQuery pagination script
<script>
$(document).ready(function () {
$('#data-table').DataTable();
});
</script>
This is my first time to use vue.js, I'm following the youtube video: https://youtu.be/qOK6bOflZv0
This video showed how to use an external JSON and put data in the table.
I believed my code is the same as the video, but I could not get the object like the video from an external JSON.
<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.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container mt-4" id="app">
<a v-bind:href="href">{{message}}</a>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users">
<th scope="row">1</th>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'test',
href: 'javascript:void(0)',
users: []
},
mouted: function() {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
this.users = response.data;
console.log(response);
})
.catch(error => {
// handle error
console.log(error);
})
}
});
</script>
</html>
This is my result: the table should loop the JSON (or at least, the console should show my object, but either is blank.
This is the screen snap from the video, it has already shown the data in the table.
Really appreciate it if anyone could help.
I am trying to convert laravel blade file to doc but it's show an error DOMDocument::loadXML(): Opening and ending tag mismatch: link line 1 and head in Entity, line: 1.
Controller
$admin = \App\Admin::all();
$content = view('usersadmin.pdf', ['admin' => $admin])->render();
$dom = new \DOMDocument();
$dom->loadHTML($content);
$dom->saveHTML();
$phpWord = new \PhpOffice\PhpWord\PhpWord();
\PhpOffice\PhpWord\Shared\Html::addHtml($phpWord->addSection(), $dom->saveHTML(), true);
$objWriter = \PhpOffice\PhpWord\IOFactory::createWriter($phpWord, 'Word2007');
//$objWriter->save('doc_index_'.Carbon::now()->format('d-m-y h-i').'.docx');
$objWriter->save('list-admin.docx', 'Word2007', true);
blade file
<!DOCTYPE html>
<html>
<head>
<title>List Admin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
</head>
<body>
<style type="text/css">
table tr td,
table tr th{
font-size: 9pt;
}
</style>
<center>
<h4>List Admin</h4>
</center>
<table class='table table-bordered'>
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Email</th>
<th>Alamat</th>
<th>Telepon</th>
<th>Status</th>
</tr>
</thead>
<tbody>
#php $i=1 #endphp
#foreach($admin as $p)
<tr>
<td>{{ $i++ }}</td>
<td>{{$p->name}}</td>
<td>{{$p->email}}</td>
<td>{{$p->address}}</td>
<td>{{$p->phone}}</td>
<td>{{$p->status}}</td>
</tr>
#endforeach
</tbody>
</table>
</body>
</html>
I am wondering, is it not possible with this way?
You are providing HTML format to your DOMDocument while it is expecting XML.
Rewrite your code in proper XML and the conversion will work.
Where is the wrong because I did all for this work. Please, someone help me!
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('heroisCtrl', function($scope, $http) {
$http.get("https://angularjs.org/greet.php?callback=herois&name=Super%20Hero")
.success(function(data) { $scope.names = data;});
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="heroisCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.name }}</td>
<td>{{ x.greeting }}</td>
</tr>
</table>
</div>
</body>
</html>
At final I have this information by console: XMLHttpRequest cannot load angularjs.org/greet.php?callback=herois&name=Super%20Hero. No 'Access-Control-Allow-Origin' header is present on the requested resource.
When fatch data from call back api then must set callback=JSON_CALLBACK
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('heroisCtrl', function($scope, $http) {
$http.get("https://angularjs.org/greet.php?callback=JSON_CALLBACK&herois&name=Super%20Hero").success(function(data) { $scope.names = data;});
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="heroisCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.name }}</td>
<td>{{ x.greeting }}</td>
</tr>
</table>
</div>
</body>
</html>
this problem is your backend!
You have to add
AllowOrigin = '*' //not secure
Or add
AllowOrigin: 'yourClientAddressOrIp'
Not sure about sintax, but the idea is as i write before, then should be there. Sintax depends on your backend languaje.
And thats All
Regards
I have array of scope.students inside the controller. And the data is shown in my view form using ng-repeat in the table. What I want to do now is when I click the button, it should alert the parent index of the specific object. For example I click the button for 1 Brick Med then it should alert 0 because he is in section A. Then when I click the button in 3 it should alert 1 because he is sectionB. I am really new in angularjs any help is millions appreciated thanks
var stud = angular.module("stud", []);
stud.controller("StudentsController", function ($scope) {
'use strict';
$scope.alertMe = function (key){
alert(0);
};
$scope.sectionA = [
{
no:1,
name:'Brick Med',
},
{
no:2,
name: 'Colin Christopher',
},
];
$scope.sectionB = [
{
no:3,
name: 'Frank Joemar Timbang',
},
{
no:4,
name: 'Curtis Zaymond',
}
];
$scope.students = [
$scope.sectionA,
$scope.sectionB
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html data-ng-app="stud">
<head lang="en">
<meta charset="utf-8">
<title>Tally Boxes</title>
</head>
<body data-ng-controller="StudentsController" data-ng-init="init()">
<div id="container">
</div>
<div class="container-table">
<table border="1" width="100%">
<thead>
<tr>
<td>Students</td>
<td>Alert</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key,value) in students[0]">
<td>{{value.no}} {{value.name}}</td>
<td><button ng-click="alertMe(key)">Alert me!</button></td>
</tr>
<tr ng-repeat="(key,value) in students[1]">
<td>{{value.no}} {{value.name}}</td>
<td><button ng-click="alertMe(key)">Alert me!</button></td>
</tr>
</tbody>
</table>
</div>
<script src="angular.min.js"></script>
<script src="tallyboxController.js"></script>
<script src="tallyboxDirective.js"></script>
</body>
</html>
Your ng-repeat is a bit of a mess, but I'm guessing this is what you want to do:
<tbody ng-repeat="studentGroup in students">
<tr ng-repeat="student in studentGroup">
<td>{{student.no}} {{student.name}}</td>
<td><button ng-click="alertMe($parent.$index)">Alert me!</button></td>
</tr>
</tbody>
Note that (key, value) is for when you're iterating over an object's properties, but students is an array.
For the $parent.$index, see Access index of the parent ng-repeat from child ng-repeat
For the tbody ng-repeat see How to use ng-repeat without an html element
You could avoid using $parent.$index by changing the ng-click to alertMe(studentGroup) and $scope.alertMe to
$scope.alertMe = function (studentGroup) {
alert($scope.students.indexOf(studentGroup));
};
But it depends on your final usage which one you'd prefer.