0

I am building a Lightning component for a community and we are being asked to use Bootstrap to stay consistent with the corporate style guide.

There is a modal form in the component, and I want to make use of some of the component attributes in defining the behavior of this form.

What I'm seeing is that when the modal is not open, the values on those attribute references are correct. I see this when inspecting the html of the modal body.

When the modal is open, though, those values do not all persist.

<div class="modal fade" id="modalVideoPlayer" aura:id="modal" tabindex="-1" role="dialog" aria-labelledby="modalVideoPlayerLabel">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content shadow-depth-2">
                <div class="modal-header">

                        <h3>
                            {!v.formHeaderText} 
                        </h3>

                </div>

                <div class="modal-body" id="modalVideoPlayerLabel">
                    <div class="container-fluid">
                        {!v.body}
                    </div>
                    {!v.TextValueAssignedFromParentComponent}
                    {!v.BooleanValueSetInInit}
                    {!v.TextValueDeclaredInAttributeDefinition}
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="{!c.closeModal}" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

In the example above, the only value that seems to keep is {!v.TextValueDeclaredInAttributeDefinition}. Everything else is false or empty:

<h3 data-aura-rendered-by="235:2;a">
falseDeclaredAttributeText
</h3>

If I inspect the html in the modal prior to opening it:

<h3 data-aura-rendered-by="120:2;a">
ParentTextValueTrueDeclaredAttributeText
</h3>

What's going on here? It looks like the data is being generated again in the modal, and maybe doesn't have visibility to the existing attributes? Is this a function of how Bootstrap creates the modal?

What approach (while using the bootstrap modal style) would work around this?

1

When the modal is launched the DOM is manipulated such that the div of your modal loses access to the same scope as your original attributes.

Bind your values outside the modal context above as regular javascript variables then put them in the modal as javascript variables. This way they will persist as static values even when scope changes upon launch of the modal.

  • I suspected that would be the case. How would you suggest I bind the values and put them into the modal? – api-testuser45690 Mar 16 '17 at 17:50

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.