0

This code runs fine for first selection and also for first time but for second selection it gives following error

This page has an error. You might just need to refresh it. Action failed: c:Persmissionset$controller$onSelectChange [component.find(...).get is not a function] Failing descriptor: {c:Persmissionset$controller$onSelectChange}

And on again selecting the first one it again gives error.

Can anyone check this

My component code is -

<aura:component controller="Persmissionset" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="set" type="PermissionSetAssignment[]"/>
<aura:attribute name="page" type="integer" description="using for store page Number"/>
<aura:attribute name="pages" type="integer" description="using for store All Pages page Number"/>
<aura:attribute name="total" type="integer" description="total records count store "/>
  <aura:attribute name="met" type="PermissionSetAssignment[]"/> 
    <aura:attribute name="pagem" type="integer" description="using for store page Number"/>
<aura:attribute name="pagesm" type="integer" description="using for store All Pages page Number"/>
<aura:attribute name="totalm" type="integer" description="total records count store "/>

   <aura:attribute name="options" type="List" default="[
    {'label': 'BusinessUsers', 'value': 'option1'},
    {'label': 'TechnicalUsers', 'value': 'option2'},                                                  
    ]"/>

    <aura:attribute name="value" type="String" default="option1"/>

    <lightning:radioGroup name="BVAdministrator"
                          label=""
                          options="{! v.options }"
                          value="{! v.value }"
                          type="radio"
                          class="customRadioCls"

                          />


      <aura:if isTrue="{!v.value == 'option1'}">

          <div class="slds-page-header" role="banner">
        <div class="slds-float--right">
        <div class="slds-text-body_regular">
              <button class="slds-button slds-button--brand" style="width:90px" onclick="{!c.downloadCsv}">Download</button> <br/><br/>
        </div>
        </div>
        <div class="slds-page-header__title slds-truncate"> 

         <div class="slds-p-bottom_large slds-p-left_large" style="width:5px"> 
         <div class="slds-text-body_regular">  
              <lightning:button disabled="{!v.pagem == 1}" variant="brand" label="Previous" onclick="{! c.navigatem }" />            
              <lightning:button disabled="{!v.pagem == v.pagesm}" aura:id="Previous" variant="brand" label="Next" onclick="{! c.navigatem }"/>
         </div>
         </div>
            <div class="slds-align_absolute-center" style="height:0rem">        
            <input type="text" id="search-text-input" class="slds-input slds-size--1-of-4 slds-text-body--small slds-text-color_weak slds-text-font_monospace" placeholder="Search" onkeyup="{!c.searchKeyevt}"/>
            <lightning:icon class="slds-input__icon slds-icon slds-icon slds-icon_small slds-icon-text-default" iconName="utility:search" size="x-small" alternativeText="icon" />
                                </div>

         <div class="slds-text-body_regular">
         <div class="slds-xxx-around_small">{!v.totalm} Users Listing • page {!v.pagem} / {!v.pagesm}</div>
         </div>
         <div class="slds-xxx-around_small">
         <div class="slds-p-bottom_large slds-p-left_large" style="width:90px"> 
         <div class="slds-text-body_regular">
              <ui:inputSelect aura:id="recordSizes" label="Display per page: " change="{!c.onMelectChange}">
               <ui:inputSelectOption text="20" label="20" value="true"/>
                  <ui:inputSelectOption text="50" label="50" />
                  <ui:inputSelectOption text="100" label="100"/>
                   <ui:inputSelectOption text="1000" label="All"/>





     </aura:if>



 <aura:if isTrue="{!v.value == 'option2'}">

        <div class="slds-page-header" role="banner">
        <div class="slds-float--right">
        <div class="slds-text-body_regular">
              <button class="slds-button slds-button--brand" style="width:90px" onclick="{!c.downloadCsv}">Download</button> <br/><br/>
        </div>
        </div>
        <div class="slds-page-header__title slds-truncate"> 

         <div class="slds-p-bottom_large slds-p-left_large" style="width:5px"> 
         <div class="slds-text-body_regular">  
              <lightning:button disabled="{!v.page == 1}" variant="brand" label="Previous" onclick="{! c.navigate }" />            
              <lightning:button disabled="{!v.page == v.pages}" aura:id="Previous" variant="brand" label="Next" onclick="{! c.navigate }"/>
         </div>
         </div>
            <div class="slds-align_absolute-center" style="height:0rem">        
            <input type="text" id="search-text-input" class="slds-input slds-size--1-of-4 slds-text-body--small slds-text-color_weak slds-text-font_monospace" placeholder="Search" onkeyup="{!c.searchKeyevt}"/>
            <lightning:icon class="slds-input__icon slds-icon slds-icon slds-icon_small slds-icon-text-default" iconName="utility:search" size="x-small" alternativeText="icon" />
                                </div>

         <div class="slds-text-body_regular">
         <div class="slds-xxx-around_small">{!v.total} Users Listing • page {!v.page} / {!v.pages}</div>
         </div>
         <div class="slds-xxx-around_small">
         <div class="slds-p-bottom_large slds-p-left_large" style="width:90px"> 
         <div class="slds-text-body_regular">
              <ui:inputSelect aura:id="recordSize" label="Display per page: " change="{!c.onSelectChange}">
               <ui:inputSelectOption text="20" label="20" value="true"/>
              <ui:inputSelectOption text="50" label="50"/>
              <ui:inputSelectOption text="100" label="100"/>
              <ui:inputSelectOption text="1000" label="All"/>
              </ui:inputSelect>
         </div>
         </div>
         </div>
         </div>


            </aura:if>

</aura:component>

Controller code is -

 doInit: function(component, event, helper) {
      // this function call on the component load first time     
      // get the page Number if it's not define, take 1 as default
      var page = component.get("v.page") || 1;
      // get the select option (drop-down) values.   
      var recordToDisply = component.find("recordSize").get("v.value");
      // call the helper function   
     helper.getPermissions(component, page, recordToDisply);   

         var pagem = component.get("v.pagem") || 1;
      // get the select option (drop-down) values.   
      var recordToDisplym = component.find("recordSizes").get("v.value");
      // call the helper function   
     helper.metPermissions(component, pagem, recordToDisplym);   

   },
     navigate: function(component, event, helper) {
      // this function call on click on the previous page button  
      var page = component.get("v.page") || 1;
      // get the previous button label  
      var direction = event.getSource().get("v.label");
      // get the select option (drop-down) values.  
      var recordToDisply = component.find("recordSize").get("v.value");
      // set the current page,(using ternary operator.)  
      page = (direction == "Previous" ? (page-1) : (page + 1));
      // call the helper function
   helper.getPermissions(component, page, recordToDisply);


   },

    navigatem: function(component, event, helper) {
      // this function call on click on the previous page button  
      var pagem = component.get("v.pagem") || 1;
      // get the previous button label  
      var direction = event.getSource().get("v.label");
      // get the select option (drop-down) values.  
      var recordToDisplym = component.find("recordSizes").get("v.value");
      // set the current page,(using ternary operator.)  
      pagem = (direction == "Previous" ? (page-1) : (page + 1));
      // call the helper function
   helper.metPermissions(component, pagem, recordToDisplym);

 },

   onSelectChange: function(component, event, helper) {
      // this function call on the select opetion change,    
      var page = 1
      var recordToDisply = component.find("recordSize").get("v.value");
      helper.getPermissions(component, page, recordToDisply);

   },

    onMelectChange: function(component, event, helper) {
      // this function call on the select opetion change,    
      var pagem = 1
      var recordToDisplym = component.find("recordSizes").get("v.value");
      helper.metPermissions(component, pagem, recordToDisplym);

   },
  • 1
    Just a tummy feeling: check out if component.find() returns the same value for both calls. We experienced find() returning (as expected) component but also [component], so you'd need to call component.find()[0].get() – Christian Szandor Knapp Aug 24 '19 at 15:21
  • 1
    Please do make sure to use the {} tool to format your code when you post. – David Reed Aug 24 '19 at 15:23
  • @ChristianSzandorKnapp how it will work iam confused. – psalesforce1989 Aug 24 '19 at 17:11
3

There is a bug in lightning aura conditional rendering aura:if. If you unrender and rerender immediately (i.e., When isTrue condition becomes false and immediately true) then the components do not get unrendered properly. So, from next transaction onwards component.find will be returning an array in which the first element (0 index) will always be the one coming in UI.

Solution:

Change the onSelectChange controller.js method as below:

onSelectChange: function(component, event, helper) {
    var page = 1
    let recordSize = component.find("recordSize");
    recordSize = Array.isArray(recordSize) ? recordSize[0] : recordSize;
    var recordToDisply = recordSize.get("v.value");
    helper.getPermissions(component, page, recordToDisply);
},
| improve this answer | |
  • Thanks A lot @salesforce-sas this works for me and thanks for sharing this valuable information . – psalesforce1989 Aug 25 '19 at 3:38
  • 1
    I'm glad my tummy feeling was right. Thanks for elaborating, @salesforce-sas – Christian Szandor Knapp Aug 26 '19 at 13:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.