Vue.js block repeat table rows doesn't work in IE - javascript

I would like to repeat adding table rows using a template tag with vue.js, but it doesn't work in IE11. Here is the code.
<table border="1">
<tr>
<td rowspan="2">ID</td>
<td colspan="2">Name</td>
</tr>
<tr>
<td>Height</td>
<td>Weight</td>
</tr>
<template v-repeat="items">
<tr>
<td rowspan="2">{{id}}</td>
<td colspan="2">{{name}}</td>
</tr>
<tr>
<td>{{height}}</td>
<td>{{weight}}</td>
</tr>
</template>
</table>
Any help?

See http://vuejs.org/guide/components.html#Using_Components and the warning at the end of that section:
The table element has restrictions on what elements can appear inside
it, so custom elements will be hoisted out and not render properly. In
those cases you can use the component directive syntax:
<tr v-component="my-component"></tr>.

I found a solution that changed the <template> tag to a <tbody> tag. However there would be multiple <tbody> tags in a table, I hope this is the best solution in this case.

Make a long story short, This is HTML restrictions in IE, if you want compatibility, you will have to change your HTML structure.
I found an issue with similar question like yours here: https://github.com/vuejs/vue/issues/2404
Vue renders the template into real html before compiling it, so the same html restrictions apply for Vue templates, no matter how you define it.
IE does not support inside elements like , ..

Related

Cypress jQuery selector bar:contains('foo') doesn't work

I tryıng to use jQuery selectors but it doesn't work. I use Cypress so sometimes I need to use jQuery selectors to find elements by text or some unique generated numbers. (instead of cy.contains() i.e. sometimes I can need to brake recursions etc.)
Can anyone help me please?
I tried so many selectors, one of those selectors is:
$(tbody:has(tr.dx-row.dx-data-row.dx-row-lines.dx-row-focused.dx-cell-focus-disabled) tr td:contains(`10304`))
the queries that I showed normally work well. But that question that I asked doesn't work suspiciously. I thought about maybe the console doesn't support queries but when I use :has command console shows me without a problem then why :contains doesn't work? Why I can't select elements with text that I asked as a question?
I think your selectors are very complicated, try to simplify them by maybe just select the <td>, that contains that text like in my example below.
For demonstration purposes, i show just the cell text (.text()) - but it can be whatever you want.
$(document).ready(() => {
const $table = $('table');
console.log($table.find('td:contains(10304)').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr class="dx-row dx-data-row dx-row-lines andsoon">
<td class="dx-command-select">UNASSIGNED</td>
<td class="dx-col-1">10304</td>
<td class="dx-col-2">YAYDIN</td>
</tr>
</tbody>
</table>

React colspan not working

Why colspan attribute doesn't have effect in React? I created simple component which renders the following:
<table border="1">
<tr>
<th colspan="2">people are...</th>
</tr>
<tr>
<td>monkeys</td>
<td>donkeys</td>
</tr>
</table>
and what I get is:
Am I missing something?
Edit: SOLVED
Here is the solution. React expects the attribute name as colSpan, not colspan. Figured this out after wasting ridiculous amount of time to discover this little evil fact.
In addition to changing the case, I also had to change the value from a string to a number.
Instead of this:
<td colspan='6' />
I had to do this:
<td colSpan={6} />
From React's DOM Differences documentation:
All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style.
If you check your browser's console, you'll see that React warns you about this:
<meta charset="UTF-8">
<script src="https://npmcdn.com/react#15.2.1/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.2.1/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser-polyfill.min.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
<div id="app"></div>
<script type="text/babel">
var App = React.createClass({
render() {
return <table border="1">
<tbody>
<tr>
<th colspan="2">people are...</th>
</tr>
<tr>
<td>monkeys</td>
<td>donkeys</td>
</tr>
</tbody>
</table>
}
})
ReactDOM.render(<App who="World"/>, document.querySelector('#app'))
</script>
Warning: Unknown DOM property colspan. Did you mean colSpan?
in th (created by App)
in tr (created by App)
in tbody (created by App)
in table (created by App)
in App
colspan property is in camelCase like colSpan. So instead of colspan we need to use colSpan.
In React v16.12 you can still supply the value as either int, like so colSpan={4} or string, like so: colSpan="4".
I had a bit of a different case, but the final solution for me was to actually giving the th/td a display: table-cell; property.
I had to put colSpan at the end before closing the opening tag for some reason it wasn't working in the beginning as the first prop.
I tried colSpan with only one td in tr but for me, it didn't work out and if I put another empty td in the same tr it worked.
So the code looked like this
<table>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
<tr>
<td colSpan={3}>lorem ipsum</td>
<td></td> <-- Using this empty <td> worked
</tr>
</table>
by using that last empty td it worked for me

jQuery With Mustache js Issue

I'm using jQuery and Mustache Js in a project.
I have the template in a script tag. The template requires some dynamic/variable html based on some data. Hence I load the template using jQuery, manipulate it, and then write it back into the script tag.
However, loading the template into a div(for manipulation), using jquery seems to alter the structure of the template (it moves things around), which invalidates the template.
How do i update the template dynamically and avoid this issue? (Any help / Pointers / etc)
Original Template
<table>
<thead>
<tr>
<td>FN</td>
<td>SN</td>
<td>OT</td>
</tr>
</thead>
<tbody>{{#Users}}
<tr class="tr-border" data-row-id="{{DCSID}}">
<td class="td-border">{{FN}}</td>
<td class="td-border">{{SN}}</td>
<td class="td-border">{{OT}}</td>
</tr>{{/Users}}</tbody>
</table>
Loading with jquery into another div causes this below(moves {{#Users}} {{/Users}} out of place)
{{#Users}} {{/Users}}
<table>
<thead>
<tr>
<td>FN</td>
<td>SN</td>
<td>OT</td>
</tr>
</thead>
<tbody><tr class="tr-border" data-row-id="{{DCSID}}">
<td class="td-border">{{FN}}</td>
<td class="td-border">{{SN}}</td>
<td class="td-border">{{OT}}</td>
</tr></tbody>
</table
The code below is how I'm going about it. Also this is a js fiddle link here
var $newDcsTemplate = $('<div/>').html($('#dcs-template').html()); // for manipulation
var original1 = $('#dcs-template').html()
var original2 = document.getElementById('dcs-template').innerHTML;
// manipulate the template here and replace content of script tag with it.
console.log(original1); // works fine
console.log(original2) // works fine
console.log($newDcsTemplate.html()) // messed up the template
Do it like this, with .html() and without </script>:
<table>
<thead>
<tr>
<td>FN</td>
<td>SN</td>
<td>OT</td>
</tr>
</thead>
<tbody>
<!-- {{#Users}} -->
<tr class="tr-border" data-row-id="{{DCSID}}">
<td class="td-border">{{FN}}</td>
<td class="td-border">{{SN}}</td>
<td class="td-border">{{OT}}</td>
</tr>
<!-- {{/Users}} -->
</tbody>
</table>
Your template is being modified by the DOM because you're inserting it into a <div> as "HTML", which it isn't. It's doing exactly what a browser would do if you gave it that markup. It's putting the {{# Users }} in the nearest available valid place to put it.
This is the same reason your template is originally stored in a <script> tag. You should always use <script> tags to hold your templates, and you should always use .text() to read and write them:
var $newDcsTemplate = $('<script/>').text($('#dcs-template').text());
console.log($newDcsTemplate.text())

jquery not picking up html

So I have the following HTML
<div class="tmpl" id="query_tmpl">
<tr>
<td></td>
<td class="primary_email"></td>
</tr>
</div>
and the following JS:
console.log($('#query_tmpl').html());
For some reason this only logs the 'a' tag. (Ex: http://jsfiddle.net/L8RQq/ )
Why does this happen and how do I get around it so that I can properly pick up the tr/td? I'm using jQuery 1.9.2 if that makes any difference.
Update:
Yes, the markup is 'bad html', but the whole point of this question is how to get around that. Using the HTML present and without altering it, how can I grab the contents even though it's 'bad'?
You don't have table tags around your tr. Try this:
<div class="tmpl" id="query_tmpl">
<table>
<tr>
<td></td>
<td class="primary_email"></td>
</tr>
</table>
</div>
This will log the div's contents properly.
the reason it wasn't logging, is because the browser sees some invalid tr and td tags, and removes those, because they can only be in a table, leaving you with only the a.
If you can't change the markup, tell the person / company that wrote that markup to fix it. It's invalid HTML.
Make it like this
<table class="tmpl" id="query_tmpl">
<tr>
<td></td>
<td class="primary_email"></td>
</tr>
</table>
Then it will surely work correctly
If you want to pick up tr's or td's you can use css manipulation functions such as children([selector]) where selector is eventually a class

Can you use CSS to reference a parent or child of a certain object?

I guess I am spoiled with JavaScript. If you want to change something about the parent, you can code something like parentNode.style.etc.
<TABLE id="hasID">
<TBODY>
<TR>
<TD>
<IMG id="hasID2" src="somePicture.png">
<IMG id="hasID3" src="someOtherPicture.png">
</TD>
</tr>
<tr>
<td>other stuff</td>
</tr>
</tbody>
</table>
As you can see from my code table has an id, and the img tags have ids. What I would like to do is add a stype class to the first TD, so that all the images are aligned to the left or middle, that kind of thing.
However, here is a tricky part, I don't want to user JavaScript, because it looks to slow. Everything starts out on the right, and then jump to the center, after everything is loaded.
Also, here is a second tricky part. I can't change add a class to the TD, because it generated by JSF.
So my main question is can I do this with CSS.
UPDATE:
I don't really need to reference a parent. Referencing a child will also work for me.
You can't select a parent via CSS. It was proposed as a feature but it's not even close to implementation.
I will suggest that you move any javascript you have to just after the content above, which means that it will run as soon as that part of the section is rendered, thus removing any delay.
<TABLE id="hasID">
<TBODY>
<TR>
<TD>
<IMG id="hasID2" src="somePicture.png">
<IMG id="hasID3" src="someOtherPicture.png">
</TD>
</tr>
<tr>
<td>other stuff</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var img = document.getElementById("hasID2");
img.parentNode.style.textAlign = "right";
</script>
Inline Javascript is OK to use in these scenarios.
Sorry no way to select parent in css.
Is there a CSS parent selector?
Not sure if this will help, but I'll mention that you can add classes using JSF with styleClass="", depending on how you are generating the table. There is also a columnClass="" if you are putting these in a datatable.

Categories