I am currently writing a generic table component that provides some basic functionality to all tables I want to display on my site. Each actual table will then use this generic table and yield headers and content into the generic table.
With the - at the time of writing - latest version of Riot JS, there still appears to be a problem when yielding content into a table.
More specifically, when I yield into a table, Riot puts this information into the main tag (minus the tr and td tags) but keeps the actual table empty.
https://jsfiddle.net/ytgv5o5k/1/
Is there a fix coming up or a workaround that I can use right now? Some sources mention the data-is qualifier, but I don't see how to use this if I would like to re-use a generic table component.
Thanks a lot!
This is a major pain point when using a framework that utilizes custom html tags. It actually has nothing to do with riot. What you're trying to do is not valid html, so the browser kicks the invalid tags out of the table.
See here: http://riotjs.com/guide/#riot-dom-caveats
If it makes sense in your application to break your table into separate tags, you should be able to handle it like this:
<table-container>
<table>
<tr data-is='table-row' each={ row in rows } row={ row }></tr>
</table>
</table-container>
You won't be able to yield anything into a table that isn't valid html. As far as I know, riot has no concept of processing html before placing it in the DOM, which is when your tags will be moved out of the table. The only possibility of using <yield/> is to place content into cells
<td>
<yield/>
</td>
Related
I am attempting to modify some tags in a PDF document by using the Action Wizard and creating a new JavaScript action.
My eventual goal is to find all tables and keep the inner tags, but remove the table tags (table, tr, td).
I am not sure if it is even possible to do this or not.
For now, just to test to see if I could find all of the table tags (and get the number), I tried this, but it isn't working:
var tables = app.document.getElementsByTagName('table');
var numTables = tables.length;
app.alert(numTables);
If this isn't possible, do you have any other suggestions to modify the tags in a PDF document?
It's not possible using JavaScript. The Acrobat JavaScript API does not have access to the structure tags in a PDF.
I have found the answer which could help to add table cell as a valid html element of a body, but it doesn't help for some reason. The reason I need this is that I would like to use this particular content as a repeated data for another content, which contains table element.
Example of the initial content:
<td>{{IMAGE}}</td>
<td><span style="font-weight: bold;">{{SHORT_DESCRIPTION}}</span></td>
And the stripped content:
{{IMAGE}}<span style="font-weight: bold;">{{SHORT_DESCRIPTION}}</span>
What I have already tried:
valid_children: "+body[style], +body[td]",
valid_elements : '+*[*]'
Any help appreciated.
After spending couple hours and digging into core of TinyMce realized that the problem is not TinyMce. The table cell element cannot be direct child of a body as of html specs.
So because TinyMce wraps content into iframe, which is another HTML page on the current page, the <td>'s are stripped out.
Instead of doing suggested steps in comments I have added another textarea which is loaded without wrapping it with TinyMce. I think doing this way is better in my case as I have multiple textareas on a page and don't want to affect them all by manipulating with javascript.
I'm a very seasoned writer of JavaScript, so I like to experiment in weird ways to further understand how things work. I've attempted to write an application that works using angular.js and Twitter Bootstrap, yet I am creating all of my elements via JavaScript, not hard-coding them into HTML (I hate writing HTML). So far, everything appears to be working fine, except that Bootstrap will not recognize a class list that I've attached to a table element via JavaScript. Here's a quick snippet example:
var myTbl = document.createElement('table');
myTbl.setAttribute('class', 'table table-hover table-striped table-bordered table-condensed');
The table is created just fine and the class is viewable as an atrribute in the debugger, yet the styles associated to this class list are not being applied to the table via Bootstrap.
I've tried including Bootstrap before I called the function which builds this table as well as I've tried including Bootstrap after I build this table, and this did not make any difference. I am also including angular.min.js after constructing this table and after including Bootstrap. I've also written the same application in HTML, associated an ID to the table with the class, and later pulled that table into a JavaScript variable to investigate it within the debugger, and it is exactly identical to the JavaScript generated table, yet the hard-coded HTML table has the style effects of the class list and the JavaScript generated one does not. If anyone can help me out, it would be greatly, greatly appreciated.
Thanks.
I have an aspx application.
In every GET the server respond with a "basic" html containing everything except table grids.
This "grid information" is contained in a input type hidden (json format) in the page.
This is by design and cannot be changed.
A normal visitor wil see the page HTML:
head, body, scripts, meta tags
text, labels, inputs...
<div id='gridcontainer'></div>
more html
more html
Then onpage load I render dynamically by using javascript a table inside div (gridcontainer).
So after onload event is executed, the user see also the table grid inside div.
In this situation google is not indexing the information in tabular grids, because it is rendered by javascript after page load.
The application has the ability to render the exact same content in HTML without using javascript (loosing some functionality). When I say the same exact content I really mean the same page (same content, same headers, same metatags, same title), but not being render by javascript.
The content length may be diferent if we compare both responses because HTML responses might be bigger than html + json + javascript.
This is what I want the spider to see:
head, body, scripts, meta tags
text, labels, inputs...
<div id='gridcontainer'>
<table> table row 1, table row2.....<table>
</div>
more html
more html
To sum up, I want to deliver the "HTML" version to spiders and the other (javascript rendered) to visitors.
Is this cloaking?
This may be dangerous to search engines or is a total legal method if the content I am displaying is totally the same (no tricks).
Thanks in advance!
If the content is basically the same and a human viewer would say that it's the same content, then it's legal. I know of a fairly major site that does this with Google's blessing. Any site that has a page that is largely generated with client-side JS has to do something like this for Google to see anything useful. Since Google doesn't currently evaluate Javascript, there is no other choice for a page that use JS-generated HTML.
I don't know if there's a way to get Google's blessing to avoid any accidental penalty.
The important point is that the actual content of the page needs to be the same. The details of the formatting does not have to be identical.
Note: For legal advice, contact a lawyer.
Yes, this is 'cloaking'.
Yes, it's morally questionable.
But No, it isn't illegal. *(subject to the disclaimer at the top of this answer)
But either way don't do it, because Yes, Google will kill your rankings if they catch you trying to serve content to them which the user doesn't get to see.
If you use progressive enhancement you won't have any issues at all. What you would do is serve the HTML version so users who don't have JavaScript enabled can still see the content. Then add JavaScript that, when the page loads, removes the current HTML and adds the enhanced version of that same content. They key is that the content is the same, just the experience is different due to lack of JavaScript capabilities. This will never get you in trouble with the search engines and is great accessibility. Accessibility is one of the main tenants of SEO.
SHORT: my python code generates a webpage with a table. i'm considering rewriting it to generate a js file instead, that holds the table contents in an array ... and then let the table be generated client-side. I am not sure of the pros and cons. Anyone care to offer their experience/insight? Are there other solutions?
LONG: the web page contains a single table and an embedded gmap. the table is a set of locations with several columns of location-stats and also two navigation columns. one nav column consists of onclicks that will recenter embedded gmap to the lat,lon of the location. the other nav column consists of hrefs that open a new window with a gmap centered on the lat,lon.
Until recently, my python code would do some number crunching on a list of files, and then generate the html file. also i wrote a js file that keeps the webpage liquid upon browser window resizing.
Recently, I modified my python code so that it:
placed the lat,lon info in a custom attribute of the tr elements
no longer produced the nav column tds
and then wrote a js function that
loops through the trs onLoad
reads the lat,lon from the custom attribute
inserts the nav tds
fwiw, this reduced the size of the html file by 70% while increasing the js by 10%.
ok, so now I am debating if I should go all the way and write my python code to generate 2 files
an essentially abstract html file
a js file containing a js array of the locations and their stats
If your API can output a JSON document with your data, you gain significant flexibility and future-proofing. This might even be something your users will want to access directly for their own external consumption. And of course your JS code can easily generate a table from this data.
However nobody here can tell you whether this is worth doing or not, as that depends entirely on the scope of your project and opportunity cost of time spent re-architecting.