+ Start a Discussion
M.sfM.sf 

Jquery is not working when we activate the Locker Service in the org in custom lightning component

Jquery is not working when we activate the Locker Service in the org. If I try to deactivate my code works fine.
Is there any workaround to include jquery when locker service is enabled.
Requirement: I have a custom lightning component and we are displaying list of records based on custom query.
Now need to download the same records in csv. 
Solution Approach: Trying to provide a button and include jquery.js in component and use jquery functions to read html from component and then download from controller.
Any help will be appreciated.
Below is my code.

Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <ltng:require scripts='/resource/jqueryltng' afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
    <br/>
    <label class="slds-form-element__label" for="org">Click on Download Button to Download CSV</label>
    <ui:button aura:id="button" class="slds-button slds-button--brand" press="{!c.getCsv1}">Download CSV</ui:button>
    <br/>
    <div class="slds-grid" aura:id="displayData" id="dataTable">
        <table class="slds-table slds-table--bordered slds-table--cell-buffer">
            <thead>
                <tr class="slds-text-title--caps">
                    <th class="slds-truncate">First Name</th>
                    <th class="slds-truncate">Last Name</th>
                    <th class="slds-truncate">Company</th>
                </tr>
            </thead>
            <tbody>
                <tr class="slds-truncate">
                    <td class="slds-truncate">AAAAA</td>
                    <td class="slds-truncate">YYYYY</td>
                    <td class="slds-truncate">CCCCC</td>
                </tr>
            </tbody>
        </table>
    </div>
</aura:component>

Controller

({
    getCsv : function(component, event, helper) {
            var $rows = $('#dataTable>table').find('tr:has(td)'),
            // Temporary delimiter characters unlikely to be typed by keyboard
            // This is to avoid accidentally splitting the actual contents
            tmpColDelim = String.fromCharCode(11), // vertical tab character
            tmpRowDelim = String.fromCharCode(0), // null character

            // actual delimiter characters for CSV format
            colDelim = '","',
            rowDelim = '"\r\n"',
            //alert(colDelim);
            //alert(rowDelim);
            // Grab text from table into CSV formatted string
            csv = '"' + $rows.map(function (i, row) {
                var $row = $(row),
                    $cols = $row.find('td');

                return $cols.map(function (j, col) {
                    var $col = $(col),
                        text = $col.text();
                    return text;
                    //return text.replace(/"/g, '""'); // escape double quotes
                }).get().join(tmpColDelim);

            }).get().join(tmpRowDelim)
                .split(tmpRowDelim).join(rowDelim)
                .split(tmpColDelim).join(colDelim) + '"',

        // Data URI
        csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
        window.location.href = 'data:text/csv;charset=UTF-8,'+ encodeURIComponent(csv);
        $(this)
            .attr({
            'download': 'filename.csv',
                'href': csv,
                'target': '_blank'
        });;
    },
    afterScriptsLoaded : function(component, event, helper) {
    }
})
Peter FribergPeter Friberg
Can't you use the data directly from the controller returning data in JSON format? Why do you need to go through rendered html?
In locker service you only have access to your own part of the DOM. Try to get rid of JQuery and use raw data from controller and the render the HTML as needed from the raw data instead.