1

I am having an issue with using jQuery Tabelize when Locker Services are activated.When Locker services are deactivated code just works fine.

I have created sample code to reproduce the error.

Component Code:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >

<ltng:require styles="/resource/JqueryTabelizer/tabelizer.min.css"/>
<ltng:require scripts="/resource/JQueryLatestLockerService/jquery-2.2.4.min.js,
                       /resource/JQueryLatestLockerService/jquery-ui.min.js,
                       /resource/JqueryTabelizer/jquery.tabelizer.min.js" afterScriptsLoaded="{!c.doInit}"/>


<aura:attribute name="isResourcesLoaded" type="Boolean" default="false"/>


 <table id="demo" class="controller">
  <tr data-level="header" class="header">
    <td></td>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
 </tr>
 <tr data-level="1" id="level_1_a">
  <td>Level 1 A</td>
  <td class="data">2</td>
  <td class="data">2</td>
  <td class="data">2</td>
</tr>
<tr data-level="2" id="level_2_a">
  <td>Level 2 A</td>
  <td class="data">2</td>
  <td class="data">2</td>
  <td class="data">2</td>
</tr>
<tr data-level="3" id="level_3_a">
  <td>Level 3 A</td>
  <td class="data">2</td>
  <td class="data">2</td>
  <td class="data">2</td>
</tr>
<tr data-level="3" id="level_3_b">
  <td>Level 3 B</td>
  <td class="data">2</td>
  <td class="data">2</td>
  <td class="data">2</td>
</tr>
<tr data-level="4" id="level_4_c">
  <td>Level 4 C</td>
  <td class="data">2</td>
  <td class="data">2</td>
  <td class="data">2</td>
</tr>
<tr data-level="4" id="level_4_d">
  <td>Level 4 D</td>
  <td class="data">2</td>
  <td class="data">2</td>
  <td class="data">2</td>
</tr>
<tr data-level="4" id="level_4_e">
  <td>Level 4 E</td>
  <td class="data">2</td>
  <td class="data">2</td>
  <td class="data">2</td>
</tr>
<tr data-level="1" id="level_1_b">
  <td>Level 1 B</td>
  <td class="data">2</td>
  <td class="data">2</td>
  <td class="data">2</td>
</tr>
<tr data-level="2" id="level_2_b">
  <td>Level 2 B</td>
  <td class="data">2</td>
  <td class="data">2</td>
  <td class="data">2</td>
</tr>
<tr data-level="3" id="level_3_c">
  <td>Level 3 C</td>
  <td class="data">2</td>
  <td class="data">2</td>
  <td class="data">2</td>
</tr>
<tr data-level="4" id="level_4_h">
  <td>Level 4 H</td>
  <td class="data">2</td>
  <td class="data">2</td>
  <td class="data">2</td>
</tr>
<tr data-level="4" id="level_4_i">
  <td>Level 4 I</td>
  <td class="data">2</td>
  <td class="data">2</td>
  <td class="data">2</td>
</tr>
<tr data-level="4" id="level_4_j">
  <td>Level 4 J</td>
  <td class="data">2</td>
  <td class="data">2</td>
  <td class="data">2</td>
</tr>
<tr data-level="3" id="level_3_d">
  <td>Level 3 D</td>
  <td class="data">2</td>
  <td class="data">2</td>
  <td class="data">2</td>
</tr>
</table>    
</aura:component>

JS Controller Code :

({
  doInit: function(component,event,helper) {
    $(document).ready(function(){
        $('#demo').tabelize({

            onRowClick : self.rowClicker,

            //must be set before init
            fullRowClickable : true,

            // callbacks
            onBeforeRowClick : null,
            onAfterRowClick : null,
            onReady : null

        }); 
    });           
 }   
})

After activating locker services it throws error as

Uncaught TypeError: Cannot read property 'apply' of undefined throws atresources/ZCuyRUYzK_kAf4cKCIeS2A/lockerservice/safeEval.html:84

Or it throws an error as "PrevRow is not defined". Any help to resolve this would be much appreciated.

Improve this question
4
  • Is there a reason you expect it to work? The list of "known good" with Locker Service JavaScript libraries is quite small.
    – Keith C
    Commented Apr 18, 2017 at 7:58
  • I am sure about the Jquery version I am using ( JQuery 2.2.4) is compliant with locker services but not sure about Tabelizer. Is there any way to know what works and what doesn't work with Locker services ?? We have many components which are using JQuery ,D3 and leaflet.
    – Wasim Shaikh
    Commented Apr 18, 2017 at 8:14
  • The only list I know is the one I linked to but there may be others. The problem might be a small thing that you could patch but you would need decent javaScript debugging skills to work that out.
    – Keith C
    Commented Apr 18, 2017 at 8:24
  • Thanks for inputs Keith.I am trying to resolve it but no luck yet. Its seems ,post locker services activation JQuery Tabelizer is not being loaded in Resource folder rather its being loaded in No Domain section( Debugger Source), I believe this is what causing error .
    – Wasim Shaikh
    Commented Apr 18, 2017 at 8:43

1 Answer 1

Reset to default
3

I'm going to assume you're using this js library called jquery.tablizer. Looking at the source code, I can tell this lib is not LockerService compliant since it is not strict mode compliant. The $prevRow error you're seeing is because in the libraries init function it tries to set $prevRow like so:

$prevRow = null; source

$prevRow was not previously defined so in non-strict mode this would create a new global variable. In strict mode this throws an error.

There may be other violations in there as well but that's the most obvious. You could try manually attaching all global variables to the window object and see if that gets you further.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .