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.
