• Chadwick Sakonchick
  • NEWBIE
  • 15 Points
  • Member since 2016

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 3
    Questions
  • 2
    Replies
I've seen the thread in documentation here on loading static resources using ltng:require, but I don't quite get the formatting via the example. I'm looking for some assistance to make sure what i'm doing is correct, because i'm getting an error while attempting to load these resources in the browser.

These are my files in static resources

 - Resource Name: MomentJS | Filename: /moment.min.js
 - Resource Name: FullCalendarCSS | Filename: /fullcalendar.css
 - Resource Name: FullCalendarJS | Filename: /fullcalendar.js
 - Resource Name: jQuery | Filename: /jquery.min.js

This is the code I have to attach these files to my lightning component

fullCalendar.cmp
<aura:component controller="FullCalendarController" implements="force:appHostable">
      <ltng:require styles="{!$Resource.FullCalendarCSS + '/fullcalendar.css'}"
          scripts="{!join(',', 
          $Resource.FullCalendarJS + '/fullcalendar.js', 
          $Resource.jQuery + '/jquery.min.js',
          $Resource.MomentJS + '/moment.min.js')}"
          afterScriptsLoaded="{!c.scriptsLoaded}"/>
      <aura:attribute name="events" type="Events[]" />
      <div id="calendar"></div>
  </aura:component>


 
I'm testing a calendar that pulls from a custom object and displays its records. I'm getting a blank page when I load my harness app and it seems I'm not loading my requires properly. Here is the error I'm seeing in Chrome's console
Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,300italic,300' because it violates the following Content Security Policy directive: "style-src https://d1j5o6e2vipffp.cloudfront.net https://dzdsh0uck5hox.cloudfront.net https://extension-local.mixmax.com https://livereload-extension-local.mixmax.com https://api.keen.io/ https://*.intercom.io/ https://*.intercomcdn.com/ https://*.facebook.net https://*.facebook.com https://*.twitter.com 'self' chrome-extension: 'unsafe-inline'".

Failed to load resource: the server responded with a status of 404 (Not Found)
https://poseidonimaging-dev-ed.lightning.force.com/resource/1484095772000/FullCalendarCSS/fullcalendar.css

Failed to load resource: the server responded with a status of 404 (Not Found)
https://poseidonimaging-dev-ed.lightning.force.com/resource/1484095745000/FullCalendarJS/fullcalendar.js 

Failed to load resource: the server responded with a status of 404 (Not Found)
https://poseidonimaging-dev-ed.lightning.force.com/resource/1484095772000/FullCalendarCSS/fullcalendar.css 


Here is how i'm calling the requires via fullCalendar.cmp. 
<aura:component controller="FullCalendarController" implements="force:appHostable">
	<ltng:require
    styles="{!$Resource.FullCalendarCSS + '/fullcalendar.css'}"
    scripts="{!join(',', 
    $Resource.FullCalendarJS + '/fullcalendar.js', 
    $Resource.jQuery + '/jquery.min.js',
    $Resource.MomentJS + '/moment.min.js')}"
    afterScriptsLoaded="{!c.scriptsLoaded}"/>
    <aura:attribute name="events" type="Booking__c[]" />
    <div id="calendar"></div>
</aura:component>
I've spent hours trying to figure this challenge out and finally got it working, but now when I go to 'Check' the challenge, it's not giving me the credit I deserve! The task seems pretty straightforward, but i'm sure i'm missing some code they think is necessary. Like the teacher telling you that you "solved the problem wrong" even though you got the right answer...

Error is: Challenge Not yet complete... here's what's wrong: 
The campingListItem JavaScript controller isn't setting the 'item' attribute correctly.

------ campingListItem.cmp ------
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" default="{'sobjectType':'Camping_Item__c','Packed__c':false}"/>
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
        <ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed:
        <ui:outputCheckbox aura:id="checkbox" value="{!v.item.Packed__c}"/>
    </p>
    <ui:button label="Packed!" press="{!c.packItem}"/>  
</aura:component>


------ campingListItemController ------
({
    packItem : function(component, event, helper) {
        component.set("v.item.Packed__c",true);
        event.getSource().set("v.disabled",true);
    }
})
I've seen the thread in documentation here on loading static resources using ltng:require, but I don't quite get the formatting via the example. I'm looking for some assistance to make sure what i'm doing is correct, because i'm getting an error while attempting to load these resources in the browser.

These are my files in static resources

 - Resource Name: MomentJS | Filename: /moment.min.js
 - Resource Name: FullCalendarCSS | Filename: /fullcalendar.css
 - Resource Name: FullCalendarJS | Filename: /fullcalendar.js
 - Resource Name: jQuery | Filename: /jquery.min.js

This is the code I have to attach these files to my lightning component

fullCalendar.cmp
<aura:component controller="FullCalendarController" implements="force:appHostable">
      <ltng:require styles="{!$Resource.FullCalendarCSS + '/fullcalendar.css'}"
          scripts="{!join(',', 
          $Resource.FullCalendarJS + '/fullcalendar.js', 
          $Resource.jQuery + '/jquery.min.js',
          $Resource.MomentJS + '/moment.min.js')}"
          afterScriptsLoaded="{!c.scriptsLoaded}"/>
      <aura:attribute name="events" type="Events[]" />
      <div id="calendar"></div>
  </aura:component>


 
I've spent hours trying to figure this challenge out and finally got it working, but now when I go to 'Check' the challenge, it's not giving me the credit I deserve! The task seems pretty straightforward, but i'm sure i'm missing some code they think is necessary. Like the teacher telling you that you "solved the problem wrong" even though you got the right answer...

Error is: Challenge Not yet complete... here's what's wrong: 
The campingListItem JavaScript controller isn't setting the 'item' attribute correctly.

------ campingListItem.cmp ------
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" default="{'sobjectType':'Camping_Item__c','Packed__c':false}"/>
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
        <ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed:
        <ui:outputCheckbox aura:id="checkbox" value="{!v.item.Packed__c}"/>
    </p>
    <ui:button label="Packed!" press="{!c.packItem}"/>  
</aura:component>


------ campingListItemController ------
({
    packItem : function(component, event, helper) {
        component.set("v.item.Packed__c",true);
        event.getSource().set("v.disabled",true);
    }
})