Skip to main content
added 30 characters in body
Source Link
Keith C
  • 137.3k
  • 29
  • 218
  • 458

The ltng:require component allows multiple libraries to be specified andbut loads them asynchronously. However, it provides an afterScriptsLoaded event which is the best place to hook up your logic as that call will be made once all the required libraries have been loaded:

<aura:component >
    <div aura:id="calendar"></div>
    <ltng:require scripts="{! ... }" afterScriptsLoaded="{! c.scriptsLoaded }"/>
</aura:component>

then in the controller:

({
    scriptsLoaded : function(component, event, helper) {
        $(document).ready(function() {
            var c = component.find("calendar");
            var el = c.getElement();
            $(el).fullCalendar({...});
        });
    }
})

Note the use of find rather than the hard-coding of a HTML Id (which would only allow one instance of your component and also potentially clash with other hard coding of the same Id value).

I am unsure about the value of $(document).ready in this case but don't think it will do any harm.

Be sure to use the library versions listed in LockerService and Lightning Container Component: Securely Using Third-Party Libraries in Lightning Components.

The ltng:require component allows multiple libraries to be specified and provides an afterScriptsLoaded event which is the best place to hook up your logic as that call will be made once all the required libraries have been loaded:

<aura:component >
    <div aura:id="calendar"></div>
    <ltng:require scripts="{! ... }" afterScriptsLoaded="{! c.scriptsLoaded }"/>
</aura:component>

then in the controller:

({
    scriptsLoaded : function(component, event, helper) {
        $(document).ready(function() {
            var c = component.find("calendar");
            var el = c.getElement();
            $(el).fullCalendar({...});
        });
    }
})

Note the use of find rather than the hard-coding of a HTML Id (which would only allow one instance of your component and also potentially clash with other hard coding of the same Id value).

I am unsure about the value of $(document).ready in this case but don't think it will do any harm.

Be sure to use the library versions listed in LockerService and Lightning Container Component: Securely Using Third-Party Libraries in Lightning Components.

The ltng:require component allows multiple libraries to be specified but loads them asynchronously. However, it provides an afterScriptsLoaded event which is the best place to hook up your logic as that call will be made once all the libraries have been loaded:

<aura:component >
    <div aura:id="calendar"></div>
    <ltng:require scripts="{! ... }" afterScriptsLoaded="{! c.scriptsLoaded }"/>
</aura:component>

then in the controller:

({
    scriptsLoaded : function(component, event, helper) {
        $(document).ready(function() {
            var c = component.find("calendar");
            var el = c.getElement();
            $(el).fullCalendar({...});
        });
    }
})

Note the use of find rather than the hard-coding of a HTML Id (which would only allow one instance of your component and also potentially clash with other hard coding of the same Id value).

I am unsure about the value of $(document).ready in this case but don't think it will do any harm.

Be sure to use the library versions listed in LockerService and Lightning Container Component: Securely Using Third-Party Libraries in Lightning Components.

Source Link
Keith C
  • 137.3k
  • 29
  • 218
  • 458

The ltng:require component allows multiple libraries to be specified and provides an afterScriptsLoaded event which is the best place to hook up your logic as that call will be made once all the required libraries have been loaded:

<aura:component >
    <div aura:id="calendar"></div>
    <ltng:require scripts="{! ... }" afterScriptsLoaded="{! c.scriptsLoaded }"/>
</aura:component>

then in the controller:

({
    scriptsLoaded : function(component, event, helper) {
        $(document).ready(function() {
            var c = component.find("calendar");
            var el = c.getElement();
            $(el).fullCalendar({...});
        });
    }
})

Note the use of find rather than the hard-coding of a HTML Id (which would only allow one instance of your component and also potentially clash with other hard coding of the same Id value).

I am unsure about the value of $(document).ready in this case but don't think it will do any harm.

Be sure to use the library versions listed in LockerService and Lightning Container Component: Securely Using Third-Party Libraries in Lightning Components.