3

I have a form in modal pop up that is poped up(dynamically created) on click of button from another pop up where I am using a lightning:buttonIcon and on click of it, even if no code is written, the whole page refreshes. This happens in classic as well as lightning experience. This is really strange as I don't have same IDs neither do I have any refresh action mentioned on click. If I use or this problem does not occur.

Following is the markup code of inner modal form:

<aura:component >

<aura:attribute name="isField" type="Boolean" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="fieldValue" type="String" />


<!-- Field details start -->
<form aura:id="fieldDiv" class="slds-form--inline slds-hide">
    <div aura:id="fieldName" class="slds-form-element">
        <ui:inputText aura:id="fieldNameID" label="Sample Field"
                      class="slds-input"
                      labelClass="slds-form-element__label"
                      value="{!v.fieldValue}"
                      />
    </div>
    <div class="slds-form-element">
        <lightning:buttonIcon iconName="utility:check" size="large" variant="bare" onclick="{! c.handleFieldDone }" alternativeText="Done!" />
        <div class="slds-icon_container slds-icon_containercircle">
            <lightning:icon aura:id="doneFieldIcon" iconName="action:approval" size="small" alternativeText="Done" class="slds-hide"/>
        </div>
    </div>
</form>
<!-- Field details stop-->

Controller of inner modal form:

handleFieldDone : function(component, event, helper){
    //helper.handleDone(component, true);
    return false;
},
Improve this question
3
  • In the general case, you should not be using a form in your components. It makes you life a lot more complicated if you do. You can substitute a div for the form, and use the same style classes.
    – sfdcfox ♦
    Commented Jan 13, 2017 at 14:06
  • @sfdcfox : thanks for the comment. I removed the form tags and used only divs and it removed the problem of reloading. But not able to understand what is problem with forms? And in which case should we use the forms you would suggest?
    – Sarang
    Commented Jan 16, 2017 at 5:45
  • 1
    Lightning doesn't use forms; it uses JavaScript to control the state of the page. I can't say that you should "never" use a form element, but it is highly unusual to do so. I suggest you try the Lightning Trailhead that deals with input.
    – sfdcfox ♦
    Commented Jan 16, 2017 at 5:50

1 Answer 1

Reset to default
6

Try with event.preventDefault() in controller

handleFieldDone : function(component, event, helper){
    //helper.handleDone(component, true);
        event.preventDefault();
    return false;
}
Improve this answer
0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .