1

I'm currently developing a VF page with LDS. together with Modals. My objective is to load the Modal when a button is clicked. The issue I have is every time the button is clicked, it opens up the Modal. But sooner it will refresh the page and closes the modal. Here is the code:

VF Page for Modal

<div id="loadUnameConfirmationModal" role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal" area-hidden="false">
                <div class="slds-modal__container">
                    <div class="slds-modal__header">
                        <button onClick="hideUnameValidationModal();" class="slds-button slds-modal__close slds-button--icon-inverse" title="Close">
                            <svg class="slds-button__icon slds-button__icon--large" aria-hidden="true">
                                <use xlink:href="{!URLFOR($Resource.SDLS203,'/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>                                    
                            </svg>
                            <span class="slds-assistive-text">Close</span>
                        </button>
                        <h2 id="header43" class="slds-text-heading--medium">Connect To Salesforce Org</h2>
                    </div>
                <div class="slds-modal__content slds-p-around--medium">
                    <div class="slds-form-element__row"> 
                            <div class="slds-form-element"> 
                                <div name="username_lbl" Class="slds-form-element__label slds-size--1-of-4">Enter Username</div>                                    
                                <div class="slds-form-element__control">
                                    <input type="text" id="uName_txt" class="slds-input" placeholder="Username" />
                                </div>
                            </div>                                
                        </div>

                </div>
                <div class="slds-modal__footer">
                    <button class="slds-button slds-button--neutral" onClick="hideEnterDataModal();">Cancel</button>                        
                    <button class="slds-button slds-button--brand" onClick="showEnterDataModal();">Proceed</button>
                </div>
             </div>
          </div> 
          <div id="modalBackDrop" class="slds-backdrop"></div>

Here's the Button to call the Modal

<apex:commandButton id="selectDeferentloginbutton1" styleclass="slds-button slds-button--brand" value="Open Modal" onClick="showUnameValidationModal();"/>

And Here's the JS function to Load the Modal

function showUnameValidationModal(){                
                    j$('#loadUnameConfirmationModal').addClass('slds-fade-in-open'); 
                    j$('#modalBackDrop').addClass('slds-backdrop--open');

}
  • 2
    Try adding return false to onclick event like this : onClick="showUnameValidationModal(); return false;" also add rerender attribute pointing to some dummy id for ex: rerender="IdthatdoesnotexistonThePage" – javanoob Mar 8 '17 at 4:41
  • I think this should be posted as an answer, and selected as best answer. It could help some other guys later. – Fabien Taillon Mar 8 '17 at 10:38
  • Yeah sure. I will be adding it as an answer – L Mudiyanse Mar 8 '17 at 11:38
1

Have to add return false to onclick event like this : onClick="showUnameValidationModal(); return false;" also add rerender attribute pointing to some dummy id for ex: rerender="IdthatdoesnotexistonThePage"

Thanks @javanoob for your 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.