You need to sign in to do that
Don't have an account?
M.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) {
}
})
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) {
}
})
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.