I am learning AngularJS and ended up with the following code for ToDoList basic app. I viewed it in a browser it didn't work. I am new to the Angular and mightn't get obvious things, so I thought if my app name is
todoApp
Then I should put
$scope.todoApp
instead of
$scope.todo
but turned out that's not an issue.
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To DO List</title>
<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap-theme.css" rel="stylesheet>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
var model = {
user: "Adam",
items: [{ action: "Buy flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
};
var todoApp = angular.module("todoApp", []);
todoApp.controller("ToDoCtrl", function($scope) {
$scope.todo = model;
});
</script>
</head>
<body ng-controller="ToDoCtrl">
<div class="page-header">
<h1>
{{todo.user}}'s To Do List
<span class="label label-default">{{todo.items.length}}</span>
</h1>
</div>
<div class="panel">
<div class="input-group">
<input class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default">Add</button>
</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in todo.items">
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done" /></td>
<td>{{item.done}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
That's what I get in a browser..
And that's what I guess I am supposed to get...
Why it doesn't work?
Your HTML getting invalid because you are missing " in link tag's rel attribute. Here you are missing:
<link href="bootstrap-theme.css" rel="stylesheet>
^ ==> missing "
Working DEMO /* updated css */
Have a look at Invalid HTML in DEMO. Here you can see after link tag HTML is colored green.
Related
I'm trying to migrate from Vue2 to Vue3 of my project. It's a simple html project with Vue and having drag and drop table. It works fine in vue2 but not in vue3. Getting this error in console : "vue#next:8001 [Vue warn]: Failed to resolve component: draggable
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at "
<!DOCTYPE html>
<html lang="en" >
<meta charset="utf-8"/>
<head>
<script type="text/javascript" src="https://unpkg.com/vue#next"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue-draggable-next#2.1.1/dist/vue-draggable-next.global.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/sortablejs#latest/Sortable.min.js"></script>
</head>
<body>
<div id='myMain'>
<h2> {{ title }} </h2>
{{ title2 }}
<br><br>
<table>
<draggable :list="schoolInfo" >
<template v-for='(school, index) in schoolInfo' >
<tr>
<td>
<input v-model="school['name']">
</td>
<td>
<input v-model="school['address']" >
</td>
<td>
<input v-model="school['city']">
</td>
<td>
<input v-model="school['phone']" >
</td>
</tr>
</template>
</draggable>
</table>
</div>
<script>
const schoolData = Vue.createApp({
data() {
return {
title:"this is my school",
title2:'title2 here it iss',
schoolInfo: [
{ id: 0,
name:"school1",
address:"address1",
city:"city1",
phone:"phone1"
},
{ id: 1,
name:"school2",
address:"address2",
city:"city2",
phone:"phone2"
},
{ id: 3,
name:"school3",
address:"address3",
city:"city3",
phone:"phone3"
},
{ id: 4,
name:"school4",
address:"address4",
city:"city4",
phone:"phone4"
}
],
}
}
})
schoolData.component('draggable',VueDraggableNext)
schoolData.mount('#myMain')
</script>
</body>
</html>
Remove:
components: {
draggable: VueDraggableNext,
},
Add:
schoolData.component('draggable',VueDraggableNext);
before schoolData.mount('#myMain')
This should resolve the component.
I'm making a web page with a table that reads excel files. Following this example here: https://www.youtube.com/watch?v=OK60UdWyUdE. In this project, I use angular, jQuery, HTML, and Javascript.
Here is a sample of a excel file:
User Name |User ID
Jack Sparrow |U382
Pikachu |U712
Sonic |U555
Mario |U153
Godzilla |U999
James Bond |U007
Ethan Hunt |U053
This is my HTML file:
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<div>
<div>
<h1>Excel Reader</h1>
</div>
<div id="image">
<img src="432-433.png" width="450" height="300">
</div>
</div>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="customjs.js"></script>
<script src="xlsx.full.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body ng-controller='MyController'>
<div>
<form enctype="multipart/form-data">
<input type="file" id="file">
<button type="submit" value='submit' ng-click="uploadExcel()">Upload File</button>
</form>
</div>
<div>
<table id="myTable">
<thead>
<tr>
<th>User Name</th>
<th>User ID</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
And this is my Javascript file:
(function () {
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', myController]);
var excelObj=[];
function myController($scope)
{
$scope.uploadExcel=function()
{
var myFile=document.getElementById ('file');
var input=myFile;
var reader = new FileReader();
reader.onload=function(){
var fileData=reader.result;
var workbook=XLSX.read(fileData,{type: 'binary'});
workbook.SheetNames.forEach(function(sheetName)
{
var rowObject=XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
excelObj=rowObject;
});
for(var i=0;i<excelObj.length;i++)
{
var data=excelObj[i];
$('#myTable tbody:last-child').append("<tr><td>"
+data.User_Name+"</td><td>"
+data.User_ID
+"</td></ tr>");
}
};
reader.readAsBinaryString(input.files[0]);
}
}
})();
I was supposed to let the HTML table display the same data, but all the data ended up undefined. Here is what my table actually displayed:
User Name |User ID
undefined |undefined
undefined |undefined
undefined |undefined
undefined |undefined
undefined |undefined
undefined |undefined
undefined |undefined
What did I miss? How can I fix this issue?
Thanks in advance!
I have this super basic starting point:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="Content/dictionary.css" />
<script src="Scripts/kuroshiro.min.js"></script>
</head>
<body>
<div id="searchResultsVue">
<table>
<tr v-for="r in results">
{{ r.Result.ent_seq }}
</tr>
</table>
</div>
<script src="https://vuejs.org/js/vue.js"></script>
<script>
var searchResultsVue = new Vue({
el: '#searchResultsVue',
data: { results: [{ Result: { ent_seq: 'asd' } }] }
});
</script>
</body>
</html>
but I get
[Vue warn]: Property or method "r" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
I don't understand
This is an issue with HTML's lenient rendering practices. When it's building the Dom elements for a table it's expecting a certain structure and anything deviating from that structure is pushed outside the definitions.
And so
<table>
<tr v-for="r in results">
{{ r.Result.ent_seq }}
</tr>
</table>
Acts like
<table>
<tr v-for="r in results">
</tr>
</table>
{{ r.Result.ent_seq }}
The Error is then that it is seeing the call to the loop variable outside the loop.
As seen in this fiddle Adding a table definition tag around your code stops it from being pushed.
You need to fix your markup. tr needs td as its child to work properly.
<tr v-for="r in results">
<td>{{ r.Result.ent_seq }}</td>
</tr>
You have to use the td tag inside tr.
It seems there is something special about table-rows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="searchResultsVue">
<table>
<tr v-for="r in results">
<td>{{ r.Result.ent_seq }}</td>
</tr>
</table>
</div>
<script src="https://vuejs.org/js/vue.js"></script>
<script>
var searchResultsVue = new Vue({
el: '#searchResultsVue',
data: { results: [{ Result: { ent_seq: 'asd' } }] }
});
</script>
</body>
</html>
After 2 days reading all topics about jQuery Bootgrid and AngularJS, I still can't use angular directives on my generated grid.
I'm using AngularJS 1.6.6 and jQuery Bootgrid 1.3.1. The page that is using it is running fine and all the elements outside the grid are working with angular directives. All the elements are inside the right ng-app and ng-controller tagged root.
The problem is that I have some buttons inside the grid and they are all losing their events like onclick, tooltips, etc. So I wanted to map them using ng-click instead of the jQuery .click(function () {}).
There are no error messages, only the events are just not firing.
All functions pointed inside the directives are declared on my scope.
I'm almost concluding that the jQuery Bootgrid isolates its own scope and avoid angular to get into it. Does that proceed?
<html lang="en">
<head>
<title>Example - jQuery Bootgrid and Angular</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
<link href="https://cdn.bootcss.com/jquery-bootgrid/1.3.1/jquery.bootgrid.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.6.6/angular.min.js"></script>
<script>
var app = angular.module('app', []).controller('appController', ['$scope', function ($scope) {
$scope.test = function () {
alert('Clicked!');
}
$("#grid-basic").bootgrid({
templates: {
search: '<div class="search form-group"><div class="input-group"><span class="icon glyphicon input-group-addon glyphicon-search"></span> <input type="text" ng-click="test()" class="search-field form-control" placeholder="Pesquisar"></div></div>'
}
});
}]);
</script>
</head>
<body ng-app="app" ng-controller="appController">
<br />
<br />
<div class="btn btn-primary" ng-click="test()">Test</div>
<br />
<br />
<table id="grid-basic" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">id</th>
<th data-column-id="sender">e-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>xxx#yyy.com</td>
</tr>
<tr>
<td>2</td>
<td>www#yyy.com</td>
</tr>
<tr>
<td>3</td>
<td>zzz#yyy.com</td>
</tr>
</tbody>
</table>
</body>
</html>
First you must have a function (eg ngFunction) and then try:
<button id="something" ng-click="ngFunction(doSomething)">
Since there was no definitive answer I changed my component and stopped looking for this compatibility issue. I still think that there was a way to attach the grid plugin to my angularjs scope, but time is not on my side here.
I can't update my label with Jquery. It should update after every second on my page but nothing happens. Is there something wrong with my javascript?
Basically what I want to do is update the label every second. But somehow this isn't working. Can anyone please help me out?
Below you can find the code for my 2 files:
////////////// Index.html: /////////////////
<!--AWP_IN_Variable Name='"webdata".AmountOfErrors' -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Gebr. Gerrits Recycling Helmond</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/default.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/highcharts.js"></script>
</head>
<body>
<div class="Maindiv">
<div class="header">
<img src="images/gerritslogo800.jpg" class="Logo">
</div>
<div class="content">
<br/>
<table>
<tr>
<th>Part</th>
<th>Value</th>
</tr>
<tr>
<td>Ferro:</td>
<td>0 kg</td>
</tr>
<tr>
<td>Non-Ferro:</td>
<td>0 kg</td>
</tr>
<tr>
<td>Errors:</td>
<td><label id="amountOfErrors" name="amountOfErrors">:="webdata".AmountOfErrors:</label></td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).ready(function()
{
//query the amountOfErrors variable every second
$.ajaxSetup({ cache: false });
setInterval(function()
{
$.get("IOamountOfErrors.htm", function(result)
{
$('#amountOfErrors').text(result);
});
},1000);
});
</script>
<div class="footer">
Gebr. Gerrits Metaalhandel Helmond B.V. <br/>
Gebr. Gerrits Metaalrecycling B.V. <br/>
Auto Verschrotings Industrie "A.V.I." Den Bosch B.V. <br/>
Euregio Recycling B.V.<br/>
</div>
</div>
</body>
</html>
////////////// IOamountOfErrors.htm: /////////////////
< !-- AWP_IN_Variable Name='"webdata".AmountOfErrors' -->
:="webdata".AmountOfErrors:
(added the space between '<' and '!' else it wouldn't show the code on this site)
Already searched the net for this: I actually found the same stuff that I needed but for me it isn't working: https://www.dmcinfo.com/latest-thinking/blog/id/8567/siemens-s7-1200-web-server-tutorial--from-getting-started-to-html5-user-defined-pages
Please help me out!
Thanks in advance,
Bart
My best would be that you're debugging this local and not on a webserver right?
Because your javascript is trying to do a cross origin requests which doesn't work on file://
EDIT:
Can you try this code
<script type="text/javascript">
$(document).ready(function()
{
//query the amountOfErrors variable every second
setInterval(function()
{
$.post("IOamountOfErrors.htm", function(result)
{
$('#amountOfErrors').text(result);
});
},1000);
});
</script>
Well to update your label you can use setInterval. Here's Code which might be useful
var count = 20;
function myFunction() {
setInterval(function(){ startCounter() }, 1000);
}
$("#counterStart").click(function(e){
myFunction();
});
function startCounter() {
$("#counter").text(count);
}
HTML:
<input type="button" value="counter" id="counterStart" />
<span id="counter">dfsdfs </span>
Working FIDDLE