We are upgrading jquery from 1.8.2 to 3.0.0 in a legacy project which have many plugin. We are using migrate plugin for ease of up-gradation ,it not showing any error in console except couple of unrelated deprecation warning message.So I inspect one table row to understand what's going wrong
pre upgrade(jquery 1.8.2) :
<div id="encounter_ambulatory" class="fixed-table-container active tab-pane tablewrapper summary-section" data-ajax-url="encounters" data-section="encounter_ambulatory" data-title="Ambulatory Encounters" data-singular-label="Ambulatory Encounter">
<div class="section-list"><div class="header-background"> </div><div class="fixed-table-container-inner"><table class="table table-condensed table-striped persist-area tablesorter tablesorter-default tablesorter02b1d507cf7ac" role="grid">
<thead><tr class="persist-header tablesorter-headerRow" role="row">
<th style="width: 10px; user-select: none;" data-column="0" class="tablesorter-header sorter-false tablesorter-headerUnSorted" scope="col" role="columnheader" aria-disabled="true" unselectable="on" aria-sort="none" aria-label=": No sort applied, sorting is disabled"><div class="tablesorter-header-inner"><div class="th-inner" style="margin:auto -1px"><input type="checkbox" class="headerCheckBox" onchange="toggleShareCheckBoxes('encounter_ambulatory');"></div></div></th><th class="header date tablesorter-header tablesorter-headerUnSorted" <div="" data-column="1" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" aria-sort="none" aria-label="Date: No sort applied, activate to apply an ascending sort" style="user-select: none;"><div class="tablesorter-header-inner"><div class="th-inner"><a>Date</a><span class="sortArrow"></span></div></div></th><th class="header undefined tablesorter-header tablesorter-headerUnSorted" <div="" data-column="2" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" aria-sort="none" aria-label="Admission Type: No sort applied, activate to apply an ascending sort" style="user-select: none;"><div class="tablesorter-header-inner"><div class="th-inner"><a>Admission Type</a><span class="sortArrow"></span></div></div></th><th class="header sourceFacilityShortLabel tablesorter-header tablesorter-headerUnSorted" <div="" data-column="3" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" aria-sort="none" aria-label="Source: No sort applied, activate to apply an ascending sort" style="user-select: none;"><div class="tablesorter-header-inner"><div class="th-inner"><a>Source</a><span class="sortArrow"></span></div></div></th></tr></thead><tbody aria-live="polite" aria-relevant="all"><tr data-clinical-item-key="3405" data-date="Sun Aug 23 17:00:00 PDT 2020" data-source-key="1013" data-extra="[{"title":"Attending","value":"Collishaw, Donnie"},{"title":"Referring","value":"Lickert, Rosa"},{"title":"Reason","value":"Admit Reason"},{"title":"Source","value":"LAB1"},{"title":"Dates","value":"08-23-2020 to (No End Date)"},{"title":"Subject Type/Class","value":"Unknown / Recurring patient"},{"title":"Admission Type","value":"Emergency"},{"title":"Encounter (ID)","value":"R (Fma6om7tKI)"}]" role="row"><td style="width:10px"><input type="checkbox" class="ci-checkbox" onchange="showSelectedClinicalItemsActions(this);" value="3405"></td><td data-sort-by="startTime">08/23/2020</td><td class="ellipsis" style="max-width:90px">Emergency</td><td class="ellipsis" style="max-width:60px" data-original-title="" title="">LAB1</td></tr></tbody></table></div></div>
</div>
post upgrade(jquery 3.0.0):
<div id="encounter_ambulatory" class="fixed-table-container active tab-pane tablewrapper summary-section" data-ajax-url="encounters" data-section="encounter_ambulatory" data-title="Ambulatory Encounters" data-singular-label="Ambulatory Encounter">
<div class="section-list"><div class="header-background"> </div><div class="fixed-table-container-inner"><table class="table table-condensed table-striped persist-area tablesorter">
<thead><tr class="persist-header"><th style="width:10px"><div class="th-inner" style="margin:auto -1px"><input type="checkbox" class="headerCheckBox" onchange="toggleShareCheckBoxes('encounter_ambulatory');"></div></th><th class="header date" <div=""><div class="th-inner"><a>Date</a><span class="sortArrow"></span></div></th><th class="header undefined" <div=""><div class="th-inner"><a>Admission Type</a><span class="sortArrow"></span></div></th><th class="header sourceFacilityShortLabel" <div=""><div class="th-inner"><a>Source</a><span class="sortArrow"></span></div></th></tr></thead><tr data-clinical-item-key="23617" data-date="Mon Aug 24 00:00:00 UTC 2020" data-source-key="1" data-extra="[{"title":"Attending","value":"Collishaw, Donnie"},{"title":"Referring","value":"Lickert, Rosa"},{"title":"Reason","value":"Admit Reason"},{"title":"Location","value":"LAB_P"},{"title":"Source","value":"LAB1"},{"title":"Dates","value":"08-15-2012 to 05-27-2014"},{"title":"Duration","value":"21 months"},{"title":"Subject Type/Class","value":"Subject Type / Recurring patient"},{"title":"Admission Type","value":"Emergency"},{"title":"Encounter (ID)","value":"URO (Fma6om7tKI)"}]"><td style="width:10px"><input type="checkbox" class="ci-checkbox" onchange="showSelectedClinicalItemsActions(this);" value="23617"></td><td data-sort-by="startTime">08/15/2012</td><td class="ellipsis" style="max-width:90px">Emergency</td><td class="ellipsis" style="max-width:60px" data-original-title="" title="">LAB1</td></tr></table></div></div>
</div>
I have observed "tbody" html element not getting populated post upgrade and because of this my table went for a toss. So i explicitly added in a loop for each table row, this resolved my initial table issue.But after this tablesorter stopped working,even it was not working before explicitly adding. But this reference was taking about tbody might cause this problem, jQuery - TableSorter not working Here is the code for tablesorter
headers[zeroIndex] = {sorter: 'text'}; // question column
headers[oneIndex] = {sorter: 'text'}; // answer column
headers[twoIndex] = {sorter: 'text'}; // source column
$('#' + sectionId + ' .tablesorter').tablesorter({
'headers': headers,
sortLocaleCompare: true
});
Here is the list of plugin being used
<!-- jQuery Plugins -->
<t:script localPath="/js/tablesorter/jquery.tablesorter.min.js" />
<t:script localPath="/js/combobox2.1/select2.js" />
<t:script localPath="/js/tipsy/jquery.tipsy.js" />
<t:css localPath="/js/tipsy/tipsy.css" />
<t:script localPath="/js/jquery.maskedinput-1.4.1.js" />
<t:script localPath="/js/jquery.hotkeys.js" />
<t:css localPath="/js/redmond/jquery-ui-1.10.2.custom.min.css" />
<t:script localPath="/js/jquery-ui-1.10.2.custom.min.js" />
<t:script localPath="/js/bootstrap.js" />
<t:script localPath="/js/pnotify-1.2.0/jquery.pnotify.js" />
Any input to resolve sorting issue will be much appreciated. Thank you.
I resolved this issue by doing some extra debugging.I was adding tbody in a loop ,so for each tr it was adding a tbody , i couldn't figure this out last since i was checking with a single row.After adding multiple row the issue was clear
<tbody aria-live="polite" aria-relevant="all">
<tr data-clinical-item-key="33801" data-date="Thu Aug 27 00:00:00 UTC 2009" data-source-key="1" data-extra="[{"title":"Condition Type","value":"Problem"},{"title":"Title","value":"Food poisoning"},{"title":"Dates","value":"08-27-2009 to 05-29-2011"},{"title":"Source","value":"LAB1"},{"title":"Problem Type","value":"Outpatient"},{"title":"Prognosis","value":"Good"},{"title":"Certainty","value":"Medium"},{"title":"Code","value":"Food poisoning"}]" class="" data-clinical-item-group-key="FOODPOISONING" role="row">
<td style="width:10px"><input type="checkbox" class="ci-checkbox" onchange="showSelectedClinicalItemsActions(this);" value="33801"></td>
<td class="ellipsis">Food poisoning</td>
<td data-sort-by="startTime">08/27/2009</td>
<td class="ellipsis">LAB1</td>
<td></td>
<td data-original-title="" title=""><span class="grouped-count"></span></td>
</tr>
</tbody>
<tbody aria-live="polite" aria-relevant="all">
<tr data-clinical-item-key="33802" data-date="Thu Dec 06 00:00:00 UTC 2001" data-source-key="1" data-extra="[{"title":"Condition Type","value":"Problem"},{"title":"Title","value":"Hypoglycemic coma"},{"title":"Dates","value":"12-06-2001 to 07-06-2011"},{"title":"Source","value":"LAB1"},{"title":"Problem Type","value":"Discharge"},{"title":"Prognosis","value":"Good"},{"title":"Certainty","value":"Fairly Certain"},{"title":"Code","value":"Hypoglycemic coma"}]" class="" data-clinical-item-group-key="HYPOGLYCEMICCOMA" role="row">
<td style="width:10px"><input type="checkbox" class="ci-checkbox" onchange="showSelectedClinicalItemsActions(this);" value="33802"></td>
<td class="ellipsis">Hypoglycemic coma</td>
<td data-sort-by="startTime">12/06/2001</td>
<td class="ellipsis">LAB1</td>
<td></td>
<td data-original-title="" title=""><span class="grouped-count"></span></td>
</tr>
</tbody>
I got the hint from , jQuery - TableSorter not working and then i refactor my code and everything works fine.
Underlying Issue: there is some issue with tbody in jquery 3.x or later version and interestingly this issue doesn't get caught in migrate plugin.If you have used tbody in your code better to add it explicitly, more details can be found at https://github.com/jquery/jquery/issues/3976. Thank You.