function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Paul WilkinsPaul Wilkins 

Build a Restaurant-Locator Lightning Component - Add Custom CSS- querySelector not a function

I am stuck on the above section of the project to create the restaruant locator.   Up until this point everything looks fine.   But in the last part where I need to display more details the code doesn't work,   The code I have is:
  
<aura:component controller="InTheAreaNew" implements="force:appHostable, flexipage:availableForAllPageTypes, flexipage:availableForRecordHome, force:hasRecordId" access="global" >
<aura:attribute name="recordId" type="Id" />
<aura:attribute name="defaultSearch" type="String" default="Restaurants" />
<aura:attribute name="location" type="Object" default='{"coords":{"latitude":37.7938462, "longitude":-122.3970253}}' />
<aura:attribute name="restaurantList" type="Object" />
<aura:attribute name="openItem" type="String" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  <div class="slds-box small" aura:id="main">
      <div aura:id="panelList">
      <header>
        <h2 class="slds-text-heading--small slds-m-bottom--small">In the Area</h2>
        <div class="slds-form-element">
          <label class="slds-form-element__label slds-assistive-text" for="searchBox">Search</label>
          <div class="slds-form-element__control">
            <ui:inputText aura:id="searchTerm" label="" class="field" placeholder="Search for..." change="{!c.updateSearch}" />
          </div>
        </div>
      </header>
      <div class="slds-scrollable--y scroll-container" aura:id="scrollableArea">
          <ul class="slds-list--vertical slds-has-dividers--top-space">
              <aura:iteration items="{!v.restaurantList}" var="item" indexVar="i">
                  <li class="slds-list__item" onclick="{!c.showDetails}" data-record="{!i}">
                      <h3 class="slds-text-heading--small slds-m-bottom--x-small">{!item.name}</h3>
                      <img src="{!item.ratingImg}" alt="" class="ratingStars" />
                      <div class="slds-hide" data-details="{!i}">
                          <ul class="slds-list--vertical">
                              <li class="slds-list__item">{!item.address}</li>
                              <li class="slds-list__item">{!item.city}, {!item.state}</li>
                              <li class="slds-list__item">{!item.phone}</li>
                          </ul>
                          <div class="slds-media slds-m-top--medium">
                              <div class="slds-media__figure">
                                  <img src="{!item.image}" class="slds-avatar--large slds-avatar--circle" alt="Placeholder" />
                              </div>
                              <div class="slds-media__body">
                                  <p>{!item.review}</p>
                              </div>
                          </div>                        
                      </div>
                  </li>
              </aura:iteration>
        </ul>
      </div>
      </div>
      <div class="slds-spinner_container" aura:id="spinner">
      <div class="slds-spinner--brand slds-spinner slds-spinner--medium" aria-hidden="false" role="alert">
        <div class="slds-spinner__dot-a"></div>
        <div class="slds-spinner__dot-b"></div>
      </div>
    </div>
  </div>
</aura:component>

and:
  
({
    doInit: function(component, event, helper) {
        helper.getLocalList(component);
    },
    updateSearch: function(component, event, helper) {
        helper.getLocalList(component);
    },
    showDetails: function (component, event, helper) {
        var closeItem = component.get('v.openItem');
        console.log("The closedItem: ", closeItem);
        if (closeItem) {
            closeItem = closeItem.querySelector('[data-details]');
            $A.util.addClass(closeItem, 'slds-hide');
        }
        var selectedItem = event.currentTarget;
        component.set('v.openItem', selectedItem);
        console.log("The selectedItem: ", selectedItem);
        var itemDetails = selectedItem.querySelector('[data-details]');
        $A.util.removeClass(itemDetails, 'slds-hide');
    }
})

I get an error of either selectedItem.querySelector or closedItem.querySelector not a function when I click on the restaurant name.   I am brand new to javascript so I am sure I just don't understand this fully.   Any help in this would be amazing.
Paul WilkinsPaul Wilkins
I have worked through a number of examples and whenever I have an onclick event in an li tag The retruning event is empty and doesn't contain anything.   I have seen an example that puts an ui:outputtext field in the li and then the value can be returned in the controller.   Is there something I am missing in the li tag or is this not meant to work.   

I have seen a number of examples of people using the onclick in an li and saying it works but even using those examples it doesn't work for me.   This is in my trailhead org and my companies uat org as well.   
DanForceDanForce
I completed this trailhead project in two separate orgs, both had the exact same error "... querySelector not a function".
Repeatable in both Firefox and Chrome. The error was raised from this line in the showDetails function: 
var itemDetails = selectedItem.querySelector('[data-details]');
As of today, with no changes made to either org, the error does not occur. Something must have changed at 'Salesforce'?
Paul WilkinsPaul Wilkins
DanForce,   Thanks for the reply unfortunately I still get the error.