Apex Code Development You need to sign in to do that
Don't have an account?
Modal lightning component: document.getElementById() cannot read property style of null
Hi All,
May i ask help in finding out the solution to solve the error above. I am trying to invoke a modal componpent from a 2nd component. So meaning, 1st component is used as a tab in account record page, it has a button that routes to another lightning component, then on that component, it invokes this 3rd component which is the modal component. But its not going through with the error above and stopping at this 2 lines of code:
Below are the complete codes:
USB_CoverageTeamRelatedList.cmp - 1st component
USB_CoverageTeamRelatedListController.js
USB_CoverageTeamViewAll.cmp - 2nd component
USB_CoverageTeamViewAllController.js
USB_CoverageTeamModalComponentController.js
May i ask help in finding out the solution to solve the error above. I am trying to invoke a modal componpent from a 2nd component. So meaning, 1st component is used as a tab in account record page, it has a button that routes to another lightning component, then on that component, it invokes this 3rd component which is the modal component. But its not going through with the error above and stopping at this 2 lines of code:
showModal : function(component, event, helper) {
console.log('@@@ before showModal');
document.getElementById("backGroundSectionId").style.display = "block";
document.getElementById("newAccountSectionId").style.display = "block";
console.log('@@@ after showModal');
},
Below are the complete codes:
USB_CoverageTeamRelatedList.cmp - 1st component
<aura:component controller="USBCoverageTeamRelatedListController" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId">
<aura:attribute name="coverateTeams" type="USBCoverageTeamRelatedListController.CoverageTeamWrapper[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<article class="slds-card">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media--center slds-has-flexi-truncate">
<div class="slds-media__figure">
<c:svg class="slds-icon slds-icon-standard-contact slds-icon--small"
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#team_member"
ariaHidden="true"/>
</div>
<div class="slds-media__body slds-truncate">
<h2>
<a href="javascript:void(0);" class="slds-text-link--reset">
<span class="slds-text-heading--small">Coverage Teams ({!v.coverateTeams.length})</span>
</a>
</h2>
</div>
</header>
<div class="slds-no-flex">
<button class="slds-button slds-button--neutral" onclick="{!c.navigateToMyComponent}">Manage</button>
</div>
</div>
<div class="slds-card__body">
<table class="slds-table slds-table--bordered slds-no-row-hover slds-table--cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">
<div class="slds-truncate" title="Name">Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Company">Team Role</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Title">Department</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Email">User?</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.coverateTeams}" var="obj">
<tr class="slds-hint-parent">
<th scope="row">
<div class="slds-truncate" title="{!obj.name}">
<a id="{!obj.personId}" href="javascript:void(0);" onclick="{!c.gotoRecord}">{!obj.name}</a>
</div>
</th>
<td>
<div class="slds-truncate" title="{!obj.role}">{!obj.role}</div>
</td>
<td>
<div class="slds-truncate" title="{!obj.department}">{!obj.department}</div>
</td>
<td>
<div class="slds-truncate" >
<ui:outputCheckbox value="{!obj.isUser}"/>
</div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
<div class="slds-card__footer">
<a href="javascript:void(0);" onclick="{!c.navigateToMyComponent}">View All
<span class="slds-assistive-text">entity type</span>
</a>
</div>
</article>
</aura:component>
USB_CoverageTeamRelatedListController.js
({
doInit : function(component, event, helper) {
var action = component.get("c.getCoverageTeams");
action.setParams({
accountId : component.get("v.recordId")
});
action.setCallback(this, function(a) {
if (a.getState() === "SUCCESS") {
var out_Map = [];
var objWrap = a.getReturnValue();
console.log('*****SUCCESS');
console.log(objWrap);
var wrappers=new Array();
for (var idx=0; idx<objWrap.length; idx++) {
console.log('*****iterate object');
console.log(objWrap[idx]);
/*
var wrapper = { 'acc' : objWrap[idx],
'recordId' : false
//@AuraEnabled
public Id recordId {get;set;}
@AuraEnabled
public String name {get;set;}
@AuraEnabled
public String role {get;set;}
@AuraEnabled
public String department {get;set;}
@AuraEnabled
public Boolean isUser {get;set;}
@AuraEnabled
public Id userId {get;set;}
};
*/
//wrappers.push(wrapper);
//alert('objWrap'+objWrap[idx]);
}
//cmp.set('v.wrappers', wrappers);
component.set("v.coverateTeams", objWrap);
} else if (a.getState() === "ERROR") {
console.log('*****ERROR');
$A.log("Errors", a.getError());
}
});
$A.enqueueAction(action);
},
gotoRecord : function (component, event, helper) {
var navEvt = $A.get("e.force:navigateToSObject");
var recordId = event.target.id;
navEvt.setParams({
"recordId": recordId,
"slideDevName": "detail"
});
navEvt.fire();
},
navigateToMyComponent : function(component, event, helper) {
console.log("navigateToMyComponent: START");
var evt = $A.get("e.force:navigateToComponent");
evt.setParams({
componentDef : "c:USB_CoverageTeamViewAll",
componentAttributes: {
parentId : component.get("v.recordId")
}
});
evt.fire();
console.log("navigateToMyComponent: END");
}
})
USB_CoverageTeamViewAll.cmp - 2nd component
<aura:component controller="USBCoverageTeamRelatedListController" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId,force:lightningQuickAction">
<aura:attribute name="coverateTeams" type="USBCoverageTeamRelatedListController.CoverageTeamWrapper[]"/>
<aura:attribute name="parentId" type="Id"/>
<aura:attribute name="parentName" type="String"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<article class="slds-card">
<br/>
<div class="slds-grid slds-wrap slds-grid--pull-padded">
<div class="slds-card__header slds-grid">
<nav role="navigation" aria-label="Breadcrumbs">
<ol class="slds-breadcrumb slds-list--horizontal">
<li class="slds-breadcrumb__item slds-text-title--caps"><a href="javascript:void(0);" onclick="{!c.navHome}">Accounts</a></li>
<li class="slds-breadcrumb__item slds-text-title--caps"><a id="{!v.parentId}" href="javascript:void(0);" onclick="{!c.gotoRecord}">{!v.parentName}</a></li>
</ol>
</nav>
</div>
</div>
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media--center slds-has-flexi-truncate">
<div class="slds-media__figure">
<c:svg class="slds-icon slds-icon-standard-contact slds-icon--small"
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#team_member"
ariaHidden="true"/>
</div>
<div class="slds-media__body slds-truncate">
<h2>
<a href="javascript:void(0);" class="slds-text-link--reset">
<span class="slds-text-heading--small">Coverage Teams ({!v.coverateTeams.length})</span>
</a>
</h2>
</div>
</header>
<div class="slds-no-flex">
<button class="slds-button slds-button--neutral" onclick="{!c.showModal}">Add Team Member</button>
</div>
</div>
<div class="slds-card__body">
<table class="slds-table slds-table--bordered slds-no-row-hover slds-table--cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">
<div class="slds-truncate" title="Name">Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Company">Team Role</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Title">Department</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Email">User?</div>
</th>
<th scope="col">
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.coverateTeams}" var="obj">
<tr class="slds-hint-parent">
<th scope="row">
<div class="slds-truncate" title="{!obj.name}">
<a id="{!obj.personId}" href="javascript:void(0);" onclick="{!c.gotoRecord}">{!obj.name}</a>
</div>
</th>
<td>
<div class="slds-truncate" title="{!obj.role}">{!obj.role}</div>
</td>
<td>
<div class="slds-truncate" title="{!obj.department}">{!obj.department}</div>
</td>
<td>
<div class="slds-truncate" >
<ui:outputCheckbox value="{!obj.isUser}"/>
</div>
</td>
<td>
<div class="slds-shrink-none">
<lightning:buttonMenu class="slds-button slds-button--icon-border-filled slds-button--icon-x-small"
alternativeText="More options" iconName="utility:down" iconSize="x-small" onselect="{! c.doSomething }">
<lightning:menuItem label="Edit" value="edit" />
<lightning:menuItem label="Delete" value="delete" />
</lightning:buttonMenu>
</div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
<div class="slds-card__footer"><a href="javascript:void(0);">View All <span class="slds-assistive-text">entity type</span></a></div>
</article>
</aura:component>
USB_CoverageTeamViewAllController.js
({
doInit : function(component, event, helper) {
var action = component.get("c.getCoverageTeams");
action.setParams({
accountId : component.get("v.parentId")
});
action.setCallback(this, function(a) {
if (a.getState() === "SUCCESS") {
var out_Map = [];
var objWrap = a.getReturnValue();
console.log('*****SUCCESS');
console.log(objWrap);
var wrappers=new Array();
component.set("v.coverateTeams", objWrap);
component.set("v.parentId", objWrap[0].parentId);
component.set("v.parentName", objWrap[0].parentName);
} else if (a.getState() === "ERROR") {
console.log('*****ERROR');
$A.log("Errors", a.getError());
}
});
$A.enqueueAction(action);
},
gotoRecord : function (component, event, helper) {
var navEvt = $A.get("e.force:navigateToSObject");
var recordId = event.target.id;
navEvt.setParams({
"recordId": recordId,
"slideDevName": "detail"
});
navEvt.fire();
},
navHome : function (component, event, helper) {
var homeEvent = $A.get("e.force:navigateToObjectHome");
homeEvent.setParams({
"scope": "Account"
});
homeEvent.fire();
},
doSomething : function (component, event, helper) {
},
showModal : function(component, event, helper) {
console.log('@@@ before showModal');
document.getElementById("backGroundSectionId").style.display = "block";
document.getElementById("newAccountSectionId").style.display = "block";
console.log('@@@ after showModal');
},
})
USB_CoverageTeamModalComponent.cmp - 3rd (modal) component
<aura:component controller="USB_CoverageTeamModalComponentController">
<aura:attribute name="newMember" type="Coverage_Team__c"
default="{ 'sobjectType': 'Coverage_Team__c',
'Team_Member__c': '',
'Team_Role__c': '',
'Account__c': ''
}"/>
<!--START OF MODAL CONTAINER-->
<div aria-hidden="false" id="newAccountSectionId" role="dialog" class="slds-modal slds-fade-in-open" style="display:none;">
<div class="slds-modal__container">
<!--START OF MODAL HEADER-->
<div class="slds-modal__header">
<h2 class="slds-text-heading--medium">Add Coverage Team Member</h2>
<button class="slds-button slds-button--icon-inverse slds-modal__close" onclick="{!c.showModalBox}">
<c:svg class="slds-button__icon slds-button__icon--large"
xlinkHref="/resource/SLDS/assets/icons/action-sprite/svg/symbols.svg#close"
ariaHidden="true"
/>
<span class="slds-assistive-text">Close</span>
</button>
</div>
<!--END OF MODAL HEADER-->
<!--START OF MODAL BODY-->
<div class="slds-modal__content">
<div>
<div>
<h3 class="slds-section-title--divider">Information</h3>
</div>
<!--START OF 1ST GRID-->
<div class="slds-grid">
<div class="slds-col">
<div class="slds-text-align--center">
<div class="slds-p-around--medium">
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputText aura:id="accname" label="Name"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newMember.Team_Member__c}"
required="true"/>
</div>
</div>
</div>
</div>
</div>
<div class="slds-col">
<div class="slds-text-align--center">
<div class="slds-p-around--medium">
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputText aura:id="accname" label="Role"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newMember.Team_Role__c}"
required="true"/>
</div>
</div>
</div>
</div>
</div>
</div> <!--end of grid-->
<!--END OF 1ST GRID-->
<div>
<h4 class="slds-section-title--divider">System Information</h4>
</div>
<!--START OF 2ND GRID-->
<div class="slds-grid">
<div class="slds-p-horizontal--small slds-size--1-of-2">
<div class="slds-p-around--medium">
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputText aura:id="accname" label="Account"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newMember.Account__c}"
required="true"/>
</div>
</div>
</div>
</div>
</div>
<!--END OF 2ND GRID-->
</div>
</div>
<!--END OF MODAL CONTAINER-->
<!--START OF MODAL FOOTER-->
<div class="slds-modal__footer">
<div class="slds-x-small-buttons--horizontal">
<button class="slds-button slds-button--neutral" onclick="{!c.showModalBox}" >Cancel</button>
<button class="slds-button slds-button--neutral" >Save New</button>
<button class="slds-button slds-button--neutral slds-button--brand" onclick="{!c.saveMember}">Save</button>
</div>
</div>
<!--END OF MODAL FOOTER-->
</div>
</div>
<!--START OF MODAL CONTAINER-->
<div class="slds-backdrop slds-backdrop--open" id="backGroundSectionId" style="display:none;"></div>
</aura:component>
USB_CoverageTeamModalComponentController.js
({
showModalBox : function(component, event, helper) {
console.log('@@@@ before show modal');
document.getElementById("backGroundSectionId").style.display = "none";
document.getElementById("newAccountSectionId").style.display = "none";
console.log('@@@@ after show modal');
},
saveMember : function(component, event, helper) {
var action = component.get("c.saveMembers");
action.setParams({
"member" : component.get("v.newMember")
});
action.setCallback(this, function(a) {
if (a.getState() === "SUCCESS") {
document.getElementById("backGroundSectionId").style.display = "none";
document.getElementById("newAccountSectionId").style.display = "none";
} else if (a.getState() === "ERROR") {
$A.log("Errors", a.getError());
}
});
$A.enqueueAction(action);
},
})
in your USB_CoverageTeamViewAll.cmp - 2nd component where is modal which id is "backGroundSectionId" , and "newAccountSectionId" ???
you can not access other component doument id