I'm having a bit of trouble getting some nested, containerless foreach bindings to work. It works in grownup browsers, but not IE (8 OR 9).
The closest I could find was this question, but the root of that problem seems to be a lack of a tbody tag, which I have. The error IE is giving is
Cannot find closing comment tag to match: ko foreach: seniors
Sorry for the wall of text, but below is my markup.
<tbody data-bind="foreach: superGroups">
<tr>
<td style="font-weight: bold;" data-bind="text: superName() || 'No Super Set'" colspan="8">
</tr>
<!-- ko foreach: seniors -->
<tr>
<td></td>
<td style="font-weight: bold;" data-bind="text: seniorName() || 'No Senior Set'" colspan="7"></td>
</tr>
<!-- ko foreach: items -->
<tr>
<td>
<span data-bindX="text:superName"></span>
</td>
<td>
<span data-bindX="text:seniorName"></span>
</td>
<td>
<span data-bind="text:clientName"></span>
<i class="icon-tags" data-bind="attr:{title: labels}, visible: labels"></i>
</td>
<td>
<span data-bind="text:description"></span>
</td>
<td>
<span data-bind="visible:superPayAmount">$<span data-bind="text:superPayAmount"></span></span>
<span data-bind="visible:superPayAmount.length == 0">-</span>
</td>
<td>
<span data-bind="shortDate: superStartDate"></span> - <span data-bind="shortDate: superEndDate"></span>
</td>
<td>
<span data-bind="visible:seniorPayAmount">$<span data-bind="text:seniorPayAmount"></span></span>
<span data-bind="visible:!seniorPayAmount.length == 0">-</span>
</td>
<td>
<span data-bind="shortDate: seniorStartDate"></span> - <span data-bind="shortDate: seniorEndDate"></span>
</td>
</tr>
<!-- /ko -->
<!-- /ko -->
</tbody>
You missed closing td tag in the first tr:
<tr>
<td style="font-weight: bold;" data-bind="text: superName() || 'No Super Set'" colspan="8"></td>
</tr>
Related
Context: There are a set of months in a table (e.g. May, Jun, July) and under those months will be all of the readings for the given month.
The code:
<tbody data-bind="visible: !MeterReadingHistory_IsBusy(), foreach: HeaderLines()" style="display: none">
<tr data-toggle="collapse" data-target=".order1">
<td>
<!-- ko if: meterReadings.length > 0-->
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="reading-history-data" data-bind="html: monthName"></span>
<!-- /ko -->
<!-- ko if: meterReadings.length == 0-->
<span class="reading-history-data" data-bind="html: monthName"></span>
<!-- /ko -->
</td>
<td>
<span class="reading-history-data" data-bind="html: latestReadingDate"></span>
</td>
<td>
<span class="reading-history-data" data-bind="html: latestReadingType"></span>
</td>
<td>
<span class="reading-history-data" data-bind="html: latestReadingElectric"></span>
</td>
<td>
<span class="reading-history-data" data-bind="html: latestReadingGas"></span>
</td>
</tr>
<!-- ko if: meterReadings.length > 0 -->
<tr class="collapse order1" >
<td colspan="5">
<table class="table mb-none desktop-only">
<thead>
<tr>
<th>Day</th>
<th>Reading Source</th>
<th>Electricity</th>
<th>Gas</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: meterReadings -->
<tr>
<td data-bind="text: readingDateParsed"></td>
<td data-bind="html: readingType"></td>
<!-- ko foreach: readings -->
<td data-bind="html: reading"></td>
<!-- /ko -->
<!-- ko if: readings.length == 0 -->
<td></td>
<td></td>
<!-- /ko -->
<!-- ko if: readings.length == 1 -->
<td></td>
<!-- /ko -->
</tr>
<!-- /ko -->
</tbody>
</table>
</td>
</tr>
<!-- /ko -->
</tbody>
The problem: When i click on any of the rows, it expands every month row exposing all of the data when in fact i only want to display the sub-rows for the actual month that has been clicked.
The main problem is that this table is dynamic, and we wont know how many header rows will be produced, therefore it will be difficult to assign each row to a specific data source via the data-bind attribute.
So......how can I get this code to display only the row of data that I have clicked on, e.g. May, and display all the readings for this given month while all of the other header rows remain closed?
Thanks!
$([data-toggle="collapse"]).on('click',function(){
var thisCollapse = $(this).attr('data-target');
$(thisCollapse).slideToggle('slow');
})
I have this table and I want to access the prod_sku value and define it as a variable:
<tr class="border first last" id="order-item-row-386470">
<td><h3 class="product-name">prod_name</h3>
</td>
<td data-rwd-label="SKU">prod_sku</td>
<td class="a-right" data-rwd-label="Preço">
<span class="price-excl-tax">
<span class="cart-price">
<span class="price">prod_price</span>
</span>
</span>
<br>
</td>
</tr>
I get this table with this line:
data = document.getElementsByClassName("odd")[0].innerHTML;
From this tbody
<tbody class="odd">
<tr class="border first last" id="order-item-row-386470">
<td><h3 class="product-name">prod_name</h3>
</td>
<td data-rwd-label="SKU">prod_sku</td>
<td class="a-right" data-rwd-label="Preço">
<span class="price-excl-tax">
<span class="cart-price">
<span class="price">prod_price</span>
</span>
</span>
<br>
</td>
<td class="a-right" data-rwd-label="Qtd">
<span class="nobr">
Solicitado: <strong>1</strong><br>
</span>
</td>
<td class="a-right last" data-rwd-label="Subtotal">
<span class="price-excl-tax">
<span class="cart-price">
<span class="price">prod_price</span>
</span>
</span>
<br>
</td>
</tr>
</tbody>
How can I access prod_sku?
You can use a query selector to match the data-rwd-label attribute.
document.querySelector('td[data-rwd-label=SKU]').innerHTML
If you don't have to support stone age browsers, then you can use querySelector to grab your td based on data attribute. If you have to support a myriad of outdated browsers and you need to d a lot of these types of lookups, then jquery is quite good at it.
var data = document.querySelector('td[data-rwd-label="SKU"]').innerHTML;
But would be more interesting to improve the html structure of your table.
Having this anywhere in the code :
$(".dates > tr > td > .notInTheMonth").bind('click', '.notInTheMonth', function() {
...
$(this).one("updatedCalendar",function(){
$(this).addClass("active");
})
});
To trigger it, i've tried this :
$(".dates > tr > td > .notInTheMonth").trigger("updatedCalendar");
Why it will not work and how to make it work ?
EDIT
Here is the html :
<body>
<div class="planner">
<div class="calendar">
<div class="calendar-header">
...
</div>
<table class="itemsCalendar">
<thead>
<tr>
<th>
Lun
</th>
...
</tr>
</thead>
<tbody class="dates">
<tr>
<td>
<span class="notInTheMonth">25</span>
</td>
<td>
<span class="notInTheMonth">26</span>
</td>
...
</tr>
<tr>
<td>
<span class="today">2</span>
</td>
<td>
<span date="3-4-2016" class="">3</span>
</td>
...
</tr>
<tr>
[...]
</tr>
<tr>
<td>
<span date="30-4-2016">30</span>
</td>
<td>
<span date="31-4-2016">31</span>
</td>
<td>
<span class="notInTheMonth">1</span>
</td>
<td>
<span class="notInTheMonth">2</span>
</td>
<td>
<span class="notInTheMonth">3</span>
</td>
<td>
<span class="notInTheMonth">4</span>
</td>
<td>
<span class="notInTheMonth">5</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Everything is generated by javascript. It will output a planner, with the correct day according to the month and the years
I have a table with 4 rows that are repeated by a knockout foreach in the <tbody>. The first row is a Basketball Match and the other 3 rows are the Task performers (referee etc) of the match. I have in the match row a hyperlink to a details page of the location of the sportshall in the city were the match will be played.
The problem is that the performer rows can be expanded and collapsed. This all works fine but now the hyperlink is not working anymore because then the knockout click event is fired. When I do a right mouse click on the hyperlink and say "open in new tab" the hyperlink works fine. So the problem is that the row knockout click is overruling the hyperlink.
Of course I can exclude the TD of the hyperlink and add the collapse click event to the other TDs but that is not what I want.
<tbody data-bind="foreach: Matches">
<tr class="hover-row" data-rowtype="Match" data-bind="click: ExpandTaskToggle">
<td><i class="glyphicon" data-bind="css: IconExpanded"></i></td>
<td data-bind="text: Time"></td>
<td class="hidden-lg hidden-md" data-bind="text: Team.ShortName"></td>
<td class="hidden-sm hidden-xs" data-bind="text: Team.Name"></td>
<td data-bind="text: Opponent"></td>
<td class="hidden-xs" data-bind="text: Location.City"></td>
<td><a data-bind="text: Location.SportsHallName, attr: { href: '/SportLocation/Details/' + Location.Id() }"></a></td>
</tr>
<!-- ko if: IsExpanded -->
<tr data-rowtype="Task">
<td class="striped"></td>
<td colspan="2" class="striped">
<strong>Scheidsrechters </strong>
</td>
<td colspan="2" class="striped" data-bind="foreach: Referees">
<span data-bind="text: PerformerFullName, style: { 'background-color': SelectedPerformerBackground }"></span><span data-bind="if: $index() != ($parent.Referees.length - 1)">, </span>
</td>
<td class="hidden-xs striped"></td>
</tr>
<tr data-rowtype="Task">
<td class="striped"></td>
<td class="striped">
<strong>Scorer </strong>
</td>
<td class="striped" data-bind="foreach: Scorers">
<span data-bind="text: PerformerFullName, style: { 'background-color': SelectedPerformerBackground }"></span><span data-bind="if: $index() != ($parent.Scorers.length - 1)">, </span>
</td>
<td class="striped">
<strong>Timer </strong>
</td>
<td class="striped" data-bind="foreach: Timers">
<span data-bind="text: PerformerFullName, style: { 'background-color': SelectedPerformerBackground }"></span><span data-bind="if: $index() != ($parent.Timers.length - 1)">, </span>
</td>
<td class="hidden-xs striped"></td>
</tr>
<tr data-rowtype="Task">
<td class="striped"></td>
<td colspan="2" class="striped">
<strong>Zaalwacht </strong>
</td>
<td colspan="2" class="striped" data-bind="foreach: SportsHallGuards">
<span data-bind="text: PerformerFullName, style: { 'background-color': SelectedPerformerBackground }"></span><span data-bind="if: $index() != ($parent.SportsHallGuards.length - 1)">, </span>
</td>
<td class="hidden-xs striped"></td>
</tr>
<!-- /ko -->
</tbody>
From the documention to knockout:
Note 3: Allowing the default click action By default, Knockout will prevent the click event from taking any default action. This means that if you use the click binding on an a tag (a link), for example, the browser will only call your handler function and will not navigate to the link’s href.
<...> However, if you do want to let the default click action proceed, just return true
from your click handler function.
And:
Note 4: Preventing the event from bubbling <...> If necessary, you can prevent the event from bubbling by including an
additional binding that is named clickBubble and passing false <...>
I think something like this should work:
<a data-bind="text: Location.SportsHallName, attr: { href: '/SportLocation/Details/' + Location.Id() }, click: function() { return true; }, clickBubble: false"></a>
For some reason my code is generating the error below in IE8, but not in any of the normal browsers.
SCRIPT5022: Unable to parse bindings.
Message: TypeError: 'logoSrc' is undefined;
Bindings value: 'attr': { 'src': logoSrc }
I confirmed that the logoSrc property is indeed defined, even in IE8, right before binding, but still it fails. And disabling the binding to logoSrc just causes the next binding in line to fail.
The html is below. I know I've used a with binding before, so I'm pretty sure that's not the problem, and the html seems to be properly closed.
<div data-bind="visible: mode() === 'print'" class="container-fluid">
<!-- ko with: printVm -->
<div class="row-fluid">
<div class="span12">
<div class="page-header">
<div class="pull-right" style="width:140px;height:60px;overflow:hidden;">
<img data-bind="'attr': { 'src': logoSrc }" src="" />
</div>
<h2>Invoice Statement - <span data-bind="text: itemZeroClientName"></span></h2>
</div>
<strong>Invoice number:</strong> <span data-bind="text: invoiceId"></span>
<strong>Invoice date:</strong> <span data-bind="text: userInfo().invoiceDateDisplay"></span>
<strong>Client number:</strong> <span data-bind="text: itemZeroClientId">22365</span>
<hr />
</div>
</div>
<div class="row-fluid">
<div class="span6 cr-tablet6 cr-phone6">
<h4>Billed by <span data-bind="text: companyNameDisplay"></span></h4>
<span data-bind="html: companyInfo"></span>
</div>
<div class="span6 cr-tablet6 cr-phone6">
<h4>Billed to</h4>
<span data-bind="html: clientInfoDisplay"></span>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<hr />
<table id="printInvoiceTable" class="table">
<thead>
<tr>
<th class="date">Date</th>
<th class="name">Provider</th>
<th class="code">Proc Code</th>
<th class="location">Location</th>
<th class="time">Hours</th>
<th class="units">Units</th>
<th class="charge">Charges</th>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: dateDisplay"></td>
<td data-bind="text: orgName"></td>
<td data-bind="text: procedureCodeString"></td>
<td data-bind="text: location"></td>
<td class="formatted-number" data-bind="text: timeWorkedHrs"></td>
<td class="formatted-number" data-bind="text: (unitsOfService() || 0).toFixed(2)"></td>
<td class="formatted-currency" data-bind="text: (clientCharges() || 0).toFixed(2)"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="formatted-number" data-bind="text: totalWorkedHours"></td>
<td class="formatted-number" data-bind="text: totalUnitsOfService"></td>
<td class="formatted-currency" data-bind="text: totalClientRate"></td>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- /ko -->
</div>
As suggested above, it seems the issue is with IE8 removing comments (and thus virtual bindings in some conditions) and has been reported on the knockout forums
I have had issues using with and jquery file upload in IE8. I also had issues with comments and was able to fix it by escaping the comment condition. the knockout webpage mentions this warning.