<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../../plugins/vue/vue.js"></script>
</head>
<body>
<div id="statistics">
<div v-for="(item,index) in topKeyWords" v-if="(index < 5)" :key="index" >
<template v-for="(val,key,i) in item">
<td ><img :src="'images/ssht/pm'+(index+1)+'.jpg'"/></td>
<td class="ssc" v-if="(key.length > 12)" :title="key">{{key.substring(0,10)+"..."}}</td>
<td class="ssc" v-if="(key.length <= 12)">{{key}}</td>
<td v-if="(item[key] != undefined && item[key] !=null)">{{item[key]}}</td>
<td v-if="(item[key] == undefined)">0</td>
key:{{key}},item:{{item}}
</template>
</div>
</div>
</body>
<script type="text/javascript">
var statisticsVue =new Vue({
el: '#statistics',
data: function() {
return {
topKeyWords:[{平稳: 4}, {测试: 4}, {情况: 1}],
isLoading: true
}
}
});
</script>
</body>
</html>
the data is an object list, and I want to the iterator . I use Chrome Browser and show very good, but the tester will use another browser including IE,
IE browser
the v-if is not run,
but chrome is ok,
chrome browser
It looks like this is a known issue. I found some old threads with similar issues.
If you check the source code in the IE browser then you can notice that it is not showing the td tags in code. whereas your actual code contains the td tags. Other browsers also show it so this caused the said issue in the IE browser.
Some suggestions in old threads said that you can try to use tbody and tr instead of using a template. So you can try to make a test with it.
sample code:
<table>
<tbody v-for="(datarow, index) in dataset">
<tr><td> {{ datarow }} {{ index }} </td></tr>
<tr v-if="!(index % 50)"><td> -repeating header row- </td></tr>
</tbody>
</table>
References:
<template v-for... not working on IE 10 & 11 on 'table' tag. Woking on other browsers, including IE 9 #3028
Custom row templates don't work in IE #138
VueJS in IE 11 - template wrapper for not working, works in Edge and Chrome
Related
I'm using Vue to produce some html template, I need to include the html conditional comments as per code below.
var productTemplate = new Vue({
el: '#myApp'
});
<script src="https://unpkg.com/vue#2.5.8/dist/vue.js"></script>
<div id="myApp">
<div class="some-content">
This is some content
</div>
<!--[if mso]>
<div>
this div will only be shown if the condition in the comment is true, in this case the condition is:
if ( mso (microsoft office) == the html rendering engine) {
show the html code between the [if mso] and the [endif]
}
</div>
<![endif]-->
<div class="some-other-content">
This is some content
</div>
</div>
But when I open my html page in the browser the html code between the conditional comment is completely removed even though I actually need it to be there.
How can I make Vue include these comments in the template's view?
In Vue 2.4.0+, you can set the comments option to true inside the component if you want to preserve comments in the component's template.
var productTemplate = new Vue({
comments: true, // <-- Add this
el: '#myApp'
});
Vue does delete the HTML comment.
One way I can think of is to bind your comments in a variable and output the variable through v-html directive.
EDIT: I tested it in a wrong dev env, so here is a link about the question from the Vue.js GitHub issue. https://github.com/vuejs/vue/issues/6177
var productTemplate = new Vue({
el: '#myApp',
comments: true,
data: {
comments: ` <!--[if mso]>
<div>
this div will only be shown if the condition in the comment is true, in this case the condition is:
if ( mso (microsoft office) == the html rendering engine) {
show the html code between the [if mso] and the [endif]
}
</div>
<![endif]-->`
}
});
<script src="https://unpkg.com/vue#2.5.8/dist/vue.js"></script>
<div id="myApp">
<div class="some-content">
This is some content
</div>
<!-- Comments -->
<div v-html="comments"> {{ comments }} </div>
<div class="some-other-content">
This is some content
</div>
</div>
I know there's quite a lot of info already on stackoverflow regarding ngTable/AngularJS, but I tried everything, and it just doesn't work.
my html is this:
<!doctype html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>Sequencing experiments overview</title>
<script src="/LIMS/angular-1.2.14/angular.js"></script>
<script src="/LIMS/js/controllers.js"></script>
<script src="/LIMS/ng-table-master/ng-table.js"></script>
<link rel="stylesheet" href="/LIMS/ng-table-master/ng-table.css" />
<link data-require="bootstrap-css#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="/LIMS/style.css" />
</head>
<body ng-app="dataOverview" ng-controller="searchCtrl">
<div>
Search: <input ng-model="query">
<p><strong>Page:</strong> {{tableParams.page()}}
<p><strong>Count per page:</strong> {{tableParams.count()}}
<table ng-table="tableParams" class="table">
<tr ng-repeat="exp in $data | filter:query">
<td data-title="'id'">
{{exp.id}}
</td>
<td data-title="'name'" sortable ="'name'">
{{exp.name}}
</td>
<td data-title="'Type'">
{{exp.type}}
</td>
</tr>
</table>
</div>
</body>
</html>
my controller.js file is this:
var dataOverview = angular.module('dataOverview', ['ngTable']);
dataOverview.controller('searchCtrl', function searchCtrl($scope, $http, ngTableParams) {
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 5 // count per page
},{
getData: function($defer,params) {
$http.get('/LIMS/index_query.php').
success(function(data, status) {
var orderedData = data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(),params.page() * params.count()));
})
}
})
});
The index_query.php returns a valid JSON object queried from a MySQL DB (will not show this here).
So, this code is almost ok i guess. It displays a table with columns and values from the DB. I can filter using the value in the filter box. However, it only shows 5 rows, and there are no buttons to go to the next 5 rows or increase the number of rows on the page. As described on the ngTable page (http://bazalt-cms.com/ng-table/example/1).
When checking console with firebug, I see an 'Uncaught TypeError: Cannot call method 'push' of undefined ' error. I assume it;s an error populating the array which should build the buttons to go from 1 page with 5 records to another? I wasted 10h on this today, so please enlighten me, I would be very grateful.
I have the following HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
tr{vertical-align: top;}
</style>
<script type="text/javascript">
function ready() {
s = '';
t = '';
for(var i=1; i<=450; ++i)
{
s += i + '\n';
t += i + '\r\n';
}
document.getElementById("numbers1").innerHTML = "<pre><code>"+s+"</code></pre>";
document.getElementById("numbers2").innerHTML = "<pre><code>"+t+"</code></pre>";
}
</script>
</head>
<body>
<table id="wrap"><tr>
<td id="numbers1"></td>
<td id="numbers2"></td>
</tr></table>
</body>
<script type="text/javascript">
ready();
</script>
</html>
In IE9, when rendered in IE9 Standards mode (the default for the above HTML) there is a blank line in the right column between numbers 428 and 429 (see pic)
This is only in IE, and only in full IE9 Standards mode.
Can anyone explain this very odd behavior? Why only at that line? If it was every line, I could understand that it was showing \r\n as 2 line breaks.
Here is the fiddle http://jsfiddle.net/K2SUU/
This must be some kind of IE9 rendering bug with the way you are setting the innerHTML. If I move the <pre><code> wrapper to the HTML and only use innerHTML to set the text, the problem disappears:
<table id="wrap"><tr>
<td><pre><code id="numbers1"></code></pre></td>
<td><pre><code id="numbers2"></code></pre></td>
</tr></table>
...
document.getElementById("numbers1").innerHTML = s;
document.getElementById("numbers2").innerHTML = t;
http://jsfiddle.net/K2SUU/1/
You are right, though, it does seem to be unexplainable. The comments on your question suggest it only happens in specific versions of IE9. Mine is 9.0.8112.16421 according to the About Internet Explorer dialog box.
Googled this a lot and didn't get any useful hint/solution.
I have this simple html page including some CSS styles, jQuery, jQuery-ui and obviously Fabric.js; on document.ready I launch an ajax call and render something on the canvas. Until now everything seems fine but when a I need to catch some mouse events I get nothing. This behaviour is shown only on Chrome (current version 25.0.1364.97); everything works fine on Firefox or Internet Explorer (v. 9).
Here's some of the js code:
$(document).ready(function() {
//setup canvas etc.
eCanvas = new fabric.Canvas('EViewport', {
backgroundColor: 'rgba(255, 50, 50, .3)',
selection: true,
selectionColor: 'blue',
selectionLineWidth: 2
});
EViewport = $("#CanvasContainer");
viewW = EViewport.width();
viewH = EViewport.height();
eCanvas.setWidth(viewW);
eCanvas.setHeight(viewH);
eCanvas.observe('object:selected', function(options) {
if (options.target) {
console.log('an object was selected! ', options.target.type);
}
});
eCanvas.observe('mouse:down', function() {
console.log('mouse click! ');
});
eCanvas.on('mouse:down', function() {
console.log('mouse click! ');
});
eCanvas.on('mousedown', function() {
console.log('mouse click! ');
});
//... render some rectangles and stuff...
});
And here's the html structure (notice that Eviewport.js file contains previously pasted code):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="baseCss/jquery-ui.css" type="text/css">
<script type="text/javascript" src="baseJs/jquery.js"></script>
<script type="text/javascript" src="baseJs/jquery-ui.js"></script>
<script type="text/javascript" src="Eviewport.js"></script>
<link type="text/css" rel="stylesheet" href="Eviewport.css">
<script type="text/javascript" src="baseJs/Fabric.js"></script>
</head>
<body>
<div id="MainContainer">
<div id="CanvasContainer">
<canvas id="EViewport">
Canvas is not supported
</canvas>
</div>
</div>
</body>
</html>
Selection features don't work with chrome either while they work on IE and Firefox.
I tried many things (as you can see I tried changing canvas.observe with canvas.on), changed jQuery and jQueryui versions but nothing changed.
Using developer tools on Google Chrome doesn't show much.
There's no z-index on html elements given by CSS, and I tried disabling different js and CSS but that didn't solve the problem.
I noticed that the problem shows also shows on the demo page of Fabric.js (just tried http://fabricjs.com/stickman/); render works, effects also but no mouse events or selection working.
Is this a bug?
Ok, finally found what's not working.
I have a Wacom device attached and looks like latest Chrome version sets a flag about "touch enabled device" and that's breaking my code.
A simple solution can be changing chrome flags (chrome://flags/)
Related posts:
https://github.com/kangax/fabric.js/issues/450
SO I know this solution is somewhere but I can't find it. I've been digging for about a day into google and stackOverflow.
Basically, I have an iframe and I'm trying to get it to expand to the size of its contents, a pretty simple task. I went through several methods, looking at different heights etc. But for some gosh darn reason, Chrome does not want to put up with me.
So here is the javascript to resize the IFrame. To make sure JS was working and to read the height I threw in that innerHTML piece (sort of like debugging)
<script type="text/javascript">
function resizeFrame() {
var t=document.getElementById("Footer");
var f = document.getElementById("mainContent");
var y = f.contentWindow;
t.innerHTML = y.document.body.offsetHeight;
f.height = y.body.offsetHeight;
}
</script>
Here's the iframe:
<iframe onload="resizeFrame()" id="mainContent" src="homec.html" scrolling=auto frameborder=0 height="100%" width="100%">
Not working!</iframe>
So for some odd reason, it does not want to work, pretty much hates me in Chrome. But it works in Firefox and IE. Any solutions??
Unless I'm missing something, I believe you have a typo on the last line of your function (missing .document.)
The following works for me in Chrome (18.0):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function resizeFrame() {
var t=document.getElementById("Footer");
var f = document.getElementById("mainContent");
var y = f.contentWindow;
t.innerHTML = y.document.body.offsetHeight;
f.height = y.document.body.offsetHeight;
}
</script>
</head>
<body>
<iframe onload="resizeFrame()" id="mainContent" src="homec.html" scrolling=auto frameborder=0
height="100%" width="100%">Working!</iframe>
<p id="Footer"> Footer</p>
</body>
</html>