Apex Code Development You need to sign in to do that
Don't have an account?
Lightning Component Error in $A.getCallback() [Cannot read property 'style' of null]
Hello outhere!
Looking for some help with this js controller that is giving me the following error (attached a full image of the component error too):
Uncaught Error in $A.getCalleback() [Cannot read property 'style' of null]It's referencing the JS controller as the culprit: floatingMarqueeHelper.js
The scrolling marquee does show up but I have to clear the error message out each time which isn't good practice.
I will include all my component code below for any insights into this.
Thanks!
floatingMarquee.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="intervalId" type="Integer" default="0"/>
<div id="parentDIV" style="overflow:hidden">
<p style="position:relative;" id="tofloat">
<b><span style="color:red">Important Note : </span>
Get it Done Today</b>
</p>
</div>
</aura:component>
floatingMarqueeController.js
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="intervalId" type="Integer" default="0"/>
<div id="parentDIV" style="overflow:hidden">
<p style="position:relative;" id="tofloat">
<b><span style="color:red">Important Note : </span>
Get it Done Today</b>
</p>
</div>
</aura:component>
floatingMarquee.css
.THIS#parentDIV{
font-size: 1rem;
background: white;
background-clip: padding-box;
height: 50px;
margin: 0px;
padding: 1rem;
}
floatingMargueeHelper.js
({
shiftDiv: function(component, event,lWidth) {
var changeposition = component.get("v.intervalId");
var floatElement = document.getElementById('tofloat');
if(changeposition < lWidth){
floatElement.style.left = changeposition+'px';
changeposition = changeposition + 5;
component.set("v.intervalId",changeposition);
}
else{
component.set("v.intervalId",0); //reset left to 0
floatElement.style.left = "0px";
changeposition = component.get("v.intervalId"); //resets to trigger the IF block, similar to a loop
}
}
})
All Answers
1 . You are not suppose to use document.getElementById insted use component.find('tofloat')
2 .Set the Styles by Using
var cmpTarget = cmp.find('changeIt');
$A.util.addClass(cmpTarget, 'Change');
({ shiftDiv: function(component, event,lWidth) { var changeposition = component.get("v.intervalId"); var floatElement = component.find('tofloat'); if(changeposition < lWidth){ var cmpTarget = cmp.find('changeIt'); $A.util.addClass(cmpTarget, 'Change'); changeposition = changeposition + 5; component.set("v.intervalId",changeposition); } else{ component.set("v.intervalId",0); //reset left to 0 floatElement.style.left = "0px"; changeposition = component.get("v.intervalId"); //resets to trigger the IF block, similar to a loop } } })I have tested the below code it's working fine to me.
====================================
Component : floatingMarquee.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="intervalId" type="Integer" default="0"/>
<div id="parentDIV" style="overflow:hidden">
<p style="position:relative;" id="tofloat">
<b><span style="color:red">Important Note : </span>
Get it Done Today</b>
</p>
</div>
</aura:component>
====================================
Controller : floatingMarqueeController.js
({
doInit : function(component, event, helper) {
var lWidth = window.innerWidth ;//Get the window's width
//The setInterval() method calls a function or
//evaluates an expression at specified intervals (in milliseconds).
window.setInterval($A.getCallback(function() {
helper.shiftDiv(component, event,lWidth);
} ), 100);
},
})
==================================
Controller Helper : floatingMargueeHelper.js
({
shiftDiv: function(component, event,lWidth) {
var changeposition = component.get("v.intervalId");
var floatElement = document.getElementById('tofloat');
if(changeposition < lWidth){
floatElement.style.left = changeposition+'px';
changeposition = changeposition + 5;
component.set("v.intervalId",changeposition);
}
else{
component.set("v.intervalId",0); //reset left to 0
floatElement.style.left = "0px";
changeposition = component.get("v.intervalId"); //resets to trigger the IF block, similar to a loop
}
}
})
=================================
CSS : floatingMarquee.css
.THIS#parentDIV{
font-size: 1rem;
background: white;
background-clip: padding-box;
height: 50px;
margin: 0px;
padding: 1rem;
}
Can you please Let me know if it helps or not!!!
If it helps don't forget to mark this as a best answer!!!
Thanks,
Raj
Checking in Google Inspector and I see this error:
This is the error showing up on the front end.
Let me know what else I can provide as I'm trying to figure this out too.
Any help is greatly appreciated.
Thanks!
If u are facing issue when redirecting page time, Then simple do remove time interval first and the redirect the page.
cmp:
-------
add below attribute
<aura:attribute name="timeInterval" type="Integer" />
helper.js:
------------
change below lines
var timInt = window.setInterval( $A.getCallback(function(){
helper.timeChangeInterval(component,event,pgWidth);
}),300);
component.set("v.timeInterval" , timInt);
redirecting js code like:
------------------------------
openRecordDetailPage : function( component , event, helper ){
window.clearInterval(component.get("v.timeInterval"));
var currentId = event.currentTarget.dataset.id;
//$A.get('e.force:refreshView').fire();
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({
"recordId": currentId
});
navEvt.fire();
},
i hope this is useful for all