0

I am stuck with the following error :

Uncaught Action failed: c:AccountMap$controller$jsLoaded [component.rerender is not a function]

Here is my component :

<aura:component implements="flexipage:availableForAllPageTypes">

<aura:attribute name="accounts" type="Account[]"/>
<aura:attribute name="selectedAccount" type="Account"/>

<!-- The Leaflet map object -->
<aura:attribute name="map" type="Object"/>
<!-- The Leaflet markers -->
<aura:attribute name="markers" type="Object"/>

<!-- Handler to display markers when account list changes -->
<aura:handler name="change" value="{!v.accounts}" action="{!c.accountsChangeHandler}"/>

<!-- Handler to re-center the map when selected account changes -->
<aura:handler name="change" value="{!v.selectedAccount}" action="{!c.selectedAccountChangeHandler}"/>

<div aura:id="map"></div>

<!-- Load the leaflet library (http://leafletjs.com for details) -->
<ltng:require styles="/resource/leaflet/leaflet.css" 
              scripts="/resource/leaflet/leaflet.js"
              afterScriptsLoaded="{!c.jsLoaded}" />

and the rerender :

({
rerender: function (component, helper) {

    var nodes = this.superRerender();

    // If the Leaflet library is not yet loaded, we can't draw the map: return
    if (!window.L) return nodes;

    var map = component.get("v.map");

    // Draw the map if it hasn't been drawn yet
    if (!map) {
        var mapElement = component.find("map").getElement();
        map = window.L.map(mapElement, {zoomControl: true}).setView([37.784173, -122.401557], 14);
        window.L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
                       {attribution: 'Tiles © Esri'}).addTo(map);
        component.set("v.map", map);
        var markers = new window.L.FeatureGroup();
        component.set("v.markers", markers);


           // If we had received accounts before Leaflet was loaded, add markers for these accounts
            helper.addMarkers(component);
        }
        return nodes;
    }
})

and here is the controller :

({
jsLoaded: function(component, event, helper) {
    component.rerender();
},

accountsChangeHandler: function(component, event, helper) {
    helper.addMarkers(component);
},

// Center the map on the account selected in the list
selectedAccountChangeHandler: function(component, event) {
    console.log('selectedAccountChangeHandler');
    var account = event.getParam("value");
    var map = component.get("v.map");
    console.log(account);
    if (account && map) {
        map.panTo([account.billingLatitude, account.billingLongitude]);
    }
}

})

Any help is greatly appreciated. Thanks a lot!

1
  • 1
    Hi there, and welcome to SFSE! It looks like the problem is actually in your Controller code, not the code you've included so far. Could you please edit your question and include the jsLoaded method so we can further assist you? – sfdcfox Aug 24 '18 at 16:42
2

You don't call the rerender method directly. That will happen automatically whenever you do a component.set() on the component with a new value.

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.