You need to sign in to do that
Don't have an account?
Pedro Garcia G
jquery in aura, I got random error in selector
Hi... I've taken my time reading many articles before making this question.
I want to use the jquery library in aura:component.
I can not get the element using the jquery selector... some time it works and another time it doesn't.
here is the code:
aura:component
aura:controller... it's only a test before implementing the filtering code
>>loaded
1.0>>undefined
my purpose with this is to filter the tr element from the table base on typing in searchid
this is the code for the filter
Thanks!
I want to use the jquery library in aura:component.
I can not get the element using the jquery selector... some time it works and another time it doesn't.
here is the code:
aura:component
<aura:component controller="CASExportFile" > <ltng:require scripts="{!$Resource.jquery}" afterScriptsLoaded="{!c.search}" /> <!-- attributes --> <aura:attribute name="data" type="Object"/> <aura:attribute name="columns" type="List"/> <aura:attribute name="selectedRowsCount" type="Integer" default="0"/> <aura:attribute name="maxRowSelection" type="Integer" default="1000"/> <aura:attribute name="hasRecords" type="Boolean" default="false"/> <!-- handlers--> <aura:handler name="init" value="{! this }" action="{! c.init }"/> <!-- the container element determine the height of the datatable --> <aura:if isTrue="{!v.hasRecords}"> <article class="slds-card"> <div class="slds-card__header slds-grid"> <header class="slds-media slds-media_center slds-has-flexi-truncate"> <div class="slds-media__body"> <h2 class="slds-card__header-title"> <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="CAS Config"> <span>CAS Export Files</span> </a> </h2> </div> </header> </div> <div > <div class="search"> <div class="search-wrapper"> <div class="search-input-wrapper"> <input id="searchid" class="search-input thesearcher" type="text" placeholder="My Search" /> </div> </div> </div> <h1>Selected Rows: {! v.selectedRowsCount }</h1> <lightning:datatable columns="{! v.columns }" data="{! v.data }" keyField="id" maxRowSelection="{! v.maxRowSelection }" onrowselection="{! c.updateSelectedText }"/> </div> </article> </aura:if> </aura:component>
aura:controller... it's only a test before implementing the filtering code
search : function(component, event, helper){ jQuery("document").ready(function(){ console.log('>>loaded'); console.log('1.0>>'+$('#searchid').val()); }); }I got in the console:
>>loaded
1.0>>undefined
my purpose with this is to filter the tr element from the table base on typing in searchid
this is the code for the filter
//Searching & removing $('#searchid').keyup(function() { search_table($(this).val()); }); function search_table(value) { $('.slds-hint-parent') .each( function() { var found = 'false'; $(this) .each( function() { if ($( this) .text() .toLowerCase() .indexOf( value .toLowerCase()) >= 0) { found = 'true'; } }); if (found == 'true') { $(this).show(); } else { $(this).hide(); } }); //END: Searching & removing }
Thanks!