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.
Related
I have a function that is the following:
$('#myDataTable').on('click', 'i', function(e) {
//Do stuff
I want to be able to directly put an onclick function in the html so I can put the event function in its own function and be able to call it from other places in my codebase. I want to do something like this:
<table id="myDataTable" class="table table-bordered table-striped table-hover" width='100%' onclick="myFunction()>
<thead><th></th></thead>
<tbody></tbody>
</table>
I know I can pass parameters through to myFunction() but how do I pass the i parameter to my onclick function in the html?
I tried doing onclick('i')="ticketLogging.removeDomainFromTable()" which doesn't fire off so I'm assuming its wrong syntax and I can't find any examples online that pass parameters to onclick.
just pass the 'i' in the function where it is called
<table id="myDataTable" class="table table-bordered table-striped table-hover" width='100%' onclick="myFunction('i')">
<thead><th></th></thead>
<tbody></tbody>
</table>
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
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 am creating a webpage which gets displayed as a popup.It calls the model function and fills the table with the returned Model data.
Since Model.GetActiveIncidentsAssignedToMe() is the only difference between three webpages, is there a way that i can dynamically select which model method i can call to populate data?
<div class="table-responsive">
<table class="table table-hover" id="IncidentTable">
<thead>
<tr>
Header for the table...
</tr>
</thead>
<tbody>
#foreach (var incident in Model.GetActiveIncidentsAssignedToMe())
{
<tr>
Multiple fields ......
</tr>
}
</tbody>
</table>
</div>
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/