0

I must be doing something wrong. All of my debug lines output properly but It isn't opening up the popup modal window

<aura:attribute name="ShowCannotDeleteModel" type="Boolean" default="false" />  

in js controller :

}else if (menuValue == component.get("v.DeleteLabel")){
            console.log("in delete");
            component.set("v.SelectedRecord", selectedRecordId);
            console.log("set record");
            var action = component.get("c.candelete");    
            console.log("action");
            action.setParams({
            contactid : selectedRecordId
            });
           action.setCallback(this, function(response) {
            var bcandelete = response.getReturnValue();
               if(bcandelete){
                   component.set("v.ShowDeleteModel", true);
                   console.log("can delete");
               }else {
            component.set("v.ShowCannotDeleteModel", true);
                   console.log("cannot delete");
               }   
        })
              console.log("before enqueue");
        $A.enqueueAction(action);
            console.log("after");

        }

back in component:

  <!-- Cannot Delete Modal -->      
    <aura:if isTrue="{!v.ShowCannotDeleteModel}">
        <div class="demo-only" style="height: 640px;">
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">

                            <span class="slds-assistive-text">Close</span>
                        </button>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal Header</h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <p>You do not own this contact</p>
                    </div>
                    <footer class="slds-modal__footer">
                        <button class="slds-button slds-button_neutral" onclick="{!c.CloseModel}">Ok</button>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </div>
    </aura:if> 
5
  • where according to you are you calling an action to open a modal?
    – glls
    Mar 2 '18 at 3:11
  • I must misunderstand, the modal is in an auraif which means it is visible if it's true, therefore after i $A.enqueueAction(action); and set v.ShowCannotDeleteModel to true, then it should open up the modal
    – Tim Willis
    Mar 2 '18 at 3:13
  • Just a little sidenote, but instead of craftin your own modal - best use someone else's open source version:lightningstrike.io/#!/strikeModal You'd invoke it using component.find('modalAuraID').show() or by firing an event, whichever is more convenient. Finally, don't waste your time with console.log but put debugger in your code or event better - setup inline breakpoints using Chrome's tools. That will allow to inspect code live at run-time and avoid cluttering your code. Just press cmd+option+f and search for your function name and click on line number you want to pause on
    – dzh
    Mar 5 '18 at 6:27
  • or use lightning:overlayLibrary, and the modal the OP is using is the component markup provided by SLDS's documentation.
    – glls
    Mar 5 '18 at 6:36
  • @Tim Willis, any reason why you do not leverage the lightning:overlayLibrary
    – glls
    Mar 6 '18 at 15:44
1

I implemented similar type of modal popup myself using aura:if, this should work. It seems you are missing a semi colon at the end of the action.setCallback.

action.setCallback(this, function(response) {
     var bcandelete = response.getReturnValue();
        if(bcandelete){
             component.set("v.ShowDeleteModel", true);
             console.log("can delete");
         } else {
             component.set("v.ShowCannotDeleteModel", true);
             console.log("cannot delete");
         }   
 });
1
  • Pukeee, semicolons are optional in JS. It can lead to semicolon confusion, but not in this case.
    – dzh
    Mar 6 '18 at 1:27

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.