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>
Related
I'm trying to toggle CSS stylesheets by clicking one of two buttons. However, my code isn't working. Not sure what I'm missing. I'm working with a separate index.html that I cannot modify and a separate js file.
Here is my code below. I'm getting a TypeError: cannot read properties of null (reading addEventListener'.
Index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Assignment 4</title> <link id="styleSheet" href="styleA.css" rel="stylesheet" type="text/css">
<script src="styler.js"></script>
</head>
<body>
<form>
<button id="styleA" type="submit">Use styleA</button>
<button id="styleB" type="submit">Use styleB</button>
</form>
<article>
<h1>OSU Beaver Store - CS 290 Version</h1>
<p>Catering to All Your Beaver-Gear Needs</p>
<div>
<table>
<caption>Our Most Popular Items</caption>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Orange Beaver Polo</td>
<td>49.00</td>
</tr>
<tr>
<td>3 Pack Beaver Socks</td>
<td>28.00</td>
</tr>
<tr>
<td>Orange Beavers Hat</td>
<td>32.50</td>
</tr>
<tr>
<td>Waterproof Jacket</td>
<td>65.55</td>
</tr>
</tbody>
</table>
</div>
<div id="beaver-store">
Visit The Official Beaver Store
</div>
</article>
<div>
<span id="o">O</span><span id="s">S</span><span id ="u">U</span>
</div>
</body>
</html>
JS File:
"use strict";
let aLink= document.querySelector("link");
const aButton = document.getElementById("styleA");
const bButton = document.getElementById("styleB");
function changeToA(){
preventDefault();
aLink.setAttribute('href', 'styleB.css');
}
function changeToB(){
aLink.setAttribute('href', 'styleB.css');
}
aButton.addEventListener("click",changeToA);
bButton.addEventListener("click",changeToB);
***Update:
I figured it out. Needed to have another event listener for DOMloadedcontent.
I'm trying to show how **hello** will be converted to <b>hello</b> and rendered as hello. I made a table for this and you can check it here in jsfiddle
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="app">
<table style="width:100%">
<tr>
<th>Input</th>
<th>Output</th>
<th>View</th>
</tr>
<tr v-for="example in examples" v-bind:key="example">
<td>{{example.input}}</td>
<td><pre>{{example.output}}</pre></td>
<td>{{example.output}}</td>
</tr>
</table>
</div>
</body>
</html>
JS
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
examples: [{input:"**a**", output:"<b>a</b>"}]
}
})
Everything works fine except for the third column, which is <td>{{example.output}}</td>. I checked that the column was replaced to <td><b>a</b></td> from the inspector, but the bold style isn't applied. Does it have to do with Vue? When I type the value <b>a</b> instead of passing the data through vue, I can see the string bolded. How can I make it styled?
do you mean something like this v-html?
new Vue({
el: "#app",
data: {
message: 'Hello Vue!',
examples: [{input:"**a**", output:"<b>a</b>"}, {input:"*a*", output:"<i>a</i>"}]
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table style="width:100%">
<tr>
<th>Input</th>
<th>Output</th>
<th>View</th>
</tr>
<tr v-for="(example, index) in examples" v-bind:key="index">
<td>{{example.input}}</td>
<td ><pre v-html="example.output"></pre></td>
<td v-html="example.output"></td>
</tr>
</table>
</div>
You have to use v-html directive to render string as html. Changing <td>{{example.output}}</td> of the third td to <td v-html="example.output"></td> should work
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.
I am building an application using Meteor. I am using the jquery datatables plugin to render a table of data.
https://www.datatables.net/
When my table loads, ALL of the data is loaded, instead of the default 'show 10 entries'. Furthermore, when I click on a column to sort, all of the data disappears and becomes "No data available in table".
Here is my html:
<template name="Tires">
<head>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"></script>
</head>
<script>
//$(document).ready( function () {
//$('#tires').DataTable();
//});
</script>
<h1>tires</h1>
<br>
<table id="tires">
<thead>
<tr>
<th>Brand</th>
</tr>
</thead>
<tbody>
{{#each products}}
<tr>
<td>{{brand}}</td>
</tr>
{{/each}}
</tbody>
</table>
</template>
Here is my template helpers page:
Template.Tires.onRendered(function() {
$('#tires').DataTable();
alert('rendred!');
});
Note - for development purposes, I am only showing the "Brand" column for now... Does anyone have any idea what might be going on?
I am having a problem with Mustache.js accessing to the values of a json array and I need some help.
The problem is when I want to access to the values using a table. It always shows [object Object], when it should show the array content.
Below is a working and a non-working example:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://raw.github.com/janl/mustache.js/0.7.2/mustache.js"></script>
</head>
<body>
<div id="template" style="display:none">
<p>Works but not what I need:</p>
<p>{{#numbers}} {{.}} {{/numbers}} </p>
<p>Doesn't work:</p>
<table>
<tr>
{{#numbers}} <th> {{.}} </th> {{/numbers}}
</tr>
</table>
</div>
<div id="rendered"></div>
<script>
var json = {
"numbers": [ 1, 2, 3 ]
};
var compiledTemplate = Mustache.to_html($('#template').html(), json).replace(/^\s*/mg, '');
$('#rendered').html(compiledTemplate);
</script>
</body>
</html>
Output is:
Works but not what I need:
1 2 3
Doesn't work:
[object Object]
Is there any way to solve this problem or to print the object attributes using mustache.js?
The issue was already asked in their issue system, no replies yet:
https://github.com/janl/mustache.js/issues/295
Thanks,
Mariano.
Finally, this is what I did.
Replaced the div element template, to a script element:
from <div id="template" style="display:none"> to <script id="template" type="text/x-mustache-template">
And worked as expected =)
Would you like this?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://raw.github.com/janl/mustache.js/0.7.2/mustache.js"></script>
</head>
<body>
<div id="template" style="display:none">
<p>Works but not what I need:</p>
<p>{{#numbers}} {{.}} {{/numbers}} </p>
<p>Doesn't work:</p>
<table>
<tr>
{{#numbers}} {{{th}}} {{/numbers}}
</tr>
</table>
</div>
<div id="rendered"></div>
<script>
var json = {
"numbers": [ 1, 2, 3 ],
"th": function () {
return "<th>" + this + "</th>"
}
};
var compiledTemplate = Mustache.to_html($('#template').html(), json);
$('#rendered').html(compiledTemplate);
</script>
</body>
</html>
I spent a lot of time debugging this.
The problem is $('#template').html(). It returns broken HTML because table markup is malformed (stuff outside <th> is rendered outside the table by browser)
That is why changing to <script> helps