1

I have issue with resize component in community builder. Currently I added to init window.addEventListener but I know - LOCKER SERVICE:

controller:

     doinit : function(component) {

                var action = component.get("c.serverEcho");
                action.setCallback(this, function(response) {
                    var state = response.getState();
                if (state === "SUCCESS") {

                    console.log('response', response.getReturnValue());

                }
                else if (state === "ERROR") {
                    var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            console.log("Error message: " + 
                                     errors[0].message);
                        }
                    } else {
                        console.log("Unknown error");
                    }
                }
            });
            $A.enqueueAction(action);

            component.set('v.resizeCallback', $A.getCallback(function(){
                if(component.isValid()) {
                    helper.helperMethod(component, event, helper);
                }
            }));
            window.addEventListener('resize', component.get('v.resizeCallback')); 
        }

but in Community I can't use window etc -> I have exception in helper.helperMethod:

Error:

Error: ->>>> TypeError: component1.getElement is not a function at Object.scrollArrowsState (DTE_MainMenu.js:636) at eval (DTE_MainMenu.js:38) at callbackWrapper (aura_proddebug.js:26148) at nrWrapper (?app=commeditor&view=editor&viewid=278adb0d-f4af-44b4-bffa-21d80fd59041&formFactor=DESKTOP&language=en_CA:3)

I have problem in 2 line in helper:

helperMethod : function(component, event, helper) {
    var component1 = component.find('comp1');
    var comp1Scroll = component1.getElement().scrollWidth; //problem
    console.log('scrollWidth', comp1Scroll);
}

In this concept I tried consol log with properly value every time when I resize component

  • A little more code would help further. your markup would help it further . – Mohith Shrivastava Jan 9 '18 at 15:35
  • I a litle corrected special for you. But I can't copy paste only concept. – JJanek Jan 9 '18 at 15:43
  • Best guess would be that "component" and "component1" are components from different namespaces. So component1 is a SecureComponentRef and will prevent component from accessing its dom elements. You cannot reach into the internals of a component from another namespace. – Ravi Jayaramappa Jan 10 '18 at 19:27
  • if I use <div> or <aura:html tag="div"> I have problem because this is in different namespace ? – JJanek Jan 11 '18 at 14:26
0

This seems to work fine in the test below:

testResize.app

<aura:application >
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <h1>Test Resize Callback</h1>
    <div aura:id="comp1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...
    </div>
</aura:application>

testResizeController.js

({
    init : function(component, event, helper) {
        window.addEventListener('resize', $A.getCallback(function(){
            if(component.isValid()) {
                helper.helperMethod(component, event, helper);
            }
        }));        
    }
})

testResizeHelper.js

({
    helperMethod : function(component) {
        var component1 = component.find('comp1');
        var comp1Scroll = component1.getElement().scrollWidth; //problem
        console.log('scrollWidth', comp1Scroll);
    }
})

There is no need to add the component attribute, but it still works with it:

testResize.app

<aura:application >
    <aura:attribute name="resizeCallback" type="Object"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <h1>Test Resize Callback</h1>
    <div aura:id="comp1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...
    </div>
</aura:application>

testResizeController.js

({
    init : function(component, event, helper) {
        component.set('v.resizeCallback', $A.getCallback(function(){
            if(component.isValid()) {
                helper.helperMethod(component, event, helper);
            }
        }));
        window.addEventListener('resize', component.get('v.resizeCallback')); 
    }
})

The problem is most likely with the aura:id on your target element.

|improve this answer|||||

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.