I am trying to render html element on canvas using html2canvas JS. But I am using AngularJS for data binding on html page and the dynamic data is not rendered on generated canvas from these html elements. For example, I have an html element like this:
<table class="table table-striped table-bordered table-hover">
<tr>
<th>Name</th>
<th>URI</th>
<th>Is Default</th>
<th>Action</th>
</tr>
<tr ng-repeat="printer in printers">
<td>{{printer.name}}</td>
<td>{{printer.url}}</td>
<td>{{printer.default}}</td>
<td><button ng-click="printTestPage(printer.url)">Print Test Page</button></td>
</tr>
</table>
But we can see that the dynamic data is not rendered on canvas:
Any suggestions regarding how to do it properly, with or without using html2canvas js???
When do you call the html2canvas?
You should call the function after the dom renderd
Related
My page has a table
<table class="table table-bordered table-striped table-bordered" id="MapDetails" data-role="grid" role="grid" tabindex="0"> .. </table>
When i reload with
$("#MapDetails").load(url, ...);
It becomes
<table class="table table-bordered table-striped table-bordered" id="MapDetails" data-role="grid" role="grid" tabindex="0">
<table class="table table-bordered table-striped table-bordered" id="MapDetails" aria-activedescendant="MapDetails_active_cell">
<thead>
...
</thead>
<tbody>
...
</tbody>
Now i want to access the child table (second one). when i try
$("#MapDetails:not([role='grid'])")
in the browser it seems to works correctly (.children() then shows a thead and tbody element)
but the same query when written in javascript code doesnot work at all.
The jQuery Load Function loads data from the server and places it INSIDE of the matched element.
I'm running off of the assumption that the page is nothing but the table.
Therefore, when you're calling $('#MapDetails').load(url, ...); you're reloading the page, which is the table, and placing that data inside of the existing table. You could do $('#MapDetails').parent().load(url, ...); then you wouldn't have to worry about accessing the child table.
I have an HTML table which I want to build the most generic as possible.
I am using jquery-datatables, my problem is that I have try to use ng-repeat on headers of the table and jquery-datatables and I got an error of undefied of current data in the headers.
It is clear to me that when I ran the command $(ID).DataTables() in document ready it is run before angular.
The solutions for this situation is using a directive or angular-datatables.
But when I use angular-datatables with attribute datatables="ng" I get a strange error of loading screen. I am clueless about the solutions for this situation, I would be happy for any help.
This my code of my table which should work but doesn't work as expected.
<table id="gases_data_table" datatable="ng" cellpadding="1" cellspacing="1" border="1">
<thead>
<tr>
<th class="gases_data_table_title" ng-repeat="header in headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="dga in listOfDGAs">
<td class="gases_data_table_item" ng-repeat="detail in dga">{{detail}}</td>
</tr>
</tbody>
</table>
I have written a script to get HTML table data to JSON Object.
for this task I have used lightswitch05 jquery plugin.
In this code I can access a HTML table data in same web page in Javascript
using
var table = $('#example-table').tableToJSON();
but I need to access HTML table of external webpage.
Table URL is here - http://ccmcwolf.byethost4.com/index.html
how can I change the it to above "#example-table" to that external web page table ?
<!DOCTYPE html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script
src="http://lightswitch05.github.io/table-to-json/javascripts/jquery.tabletojson.min.js">
</script>
<script>
function myFunction() {
var table = $('#example-table').tableToJSON();
console.log(table);
alert(JSON.stringify(table));
}
$(document).ready(myFunction);
</script>
</head>
<body>
<table id='example-table' class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th data-override="Score">Points</th></tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td data-override="disqualified">50</td></tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td></tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td></tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td></tr>
</tbody>
</table>
</body>
</html>
Thank you very much!
Since, JavaScript has scope in the current page only (i.e. it can access and modify the content of the page where it is embedded or declared/linked using the script tag), I don't think there is any direct way of doing it.
But if that external page is on the same domain where your current JavaScript code is operating, you can always get the html by an Ajax call to the server and then run your code to extract the html table in JSON form.
Please, let me know if I am missing something and I will edit my answer based on your input.
Thank you.
I have a table that is populating with ng-repeat. Table has 100 rows, if you click on any row new table will show up, (with ng-show) with more deep description of the product. But ng-repeat is slow and generating 101 table on-load of the page, and this is slowing down the performance of my web-app. Is there a way, using angular (without external libraries), to run ng-repeat only when user clicks on the some row (ng-show is true)?
NOTE: Every hidden table is unique.
Here is my html table:
<tbody>
<tr ng-repeat-start="car in sortedCarList" ng-click="showTable(car)">
<td><a target="_blank" href="{{car.carLink}}">{{car.name}}</a></td>
<td>{{car.review}}</td>
<td>{{car.rating}}</td>
<td>{{car.fiveStarPercent}}</td>
<td>{{car.recommended}}</td>
<td>{{car.price}}</td>
</tr>
<tr ng-repeat-end ng-show="modelRow.activeRow==car.name && showDetails && car.allReviews.length!=0" class="hidden-table">
<td colspan="6">
<table class="table table-striped table-bordered table-condensed table-hover">
<thead>
<tr>
<th>Year</th>
<th>Reviews</th>
<th>Rating <span class="fiveStar">/5</span></th>
<th>Recommended</th>
<th>Reliability Rating</th>
<th>Performance Rating</th>
<th>Running Costs Rating</th>
</tr>
</thead>
<tbody ng-repeat="rev in car.allReviews">
....
Try using ng-if rather than ng-show to toggle the nested tables. This should delay any ng-repeat in the nested table to happen until it's shown.
I'm thinking in replace Handlebars.js with Ractive.js.
The change seems smooth but this is my first problem and can be a newbie question.
I have a Ractive.js template which contains a table. The table in the template has several Bootstrap classes
class="table table-striped table-bordered table-condensed table-hover"
When I use this template with Handlebars.js the Bootstrap styles in the table are shown ok, as you can see in this jsfiddle.
But when I use the same template with Ractive.js the styles are not shown, as you can see in this jsfiddle.
I tried adding the classes manually:
$("#table").addClass("table")
$("#table").addClass("table-striped table-bordered")
$("#table").addClass("table-condensed table-hover")
Without success. I must be missing something very simple.
I think you just need <tbody> for bootstrap tables to work jsfiddle
With Ractive 0.4.0, you can create a component to encapsulate a bootstrap table:
<script id="bootstrap-table" type="x-template">
<table id="table" class="table table-striped table-bordered table-condensed table-hover" >
<tbody>
{{>content}}
</tbody>
</table>
</script>
Then use it in place of <table>:
<script id="templateOne" type="x-template">
<bootstrap-table>
<tr>
<th>
Column one
...
See http://jsfiddle.net/PCcqJ/2/