I have to open the same modal but with different fields. I'm using this modal to add product to my opportunity. So when I click on Add i want the fields inside the modal to render properly. Currently the modal is not refreshing. when I click on Add, the modal opens.. i cancel and open click on Add again, Modal doesnt refresh. The old modal shows again.


<button type="button" onclick="{!c.DetailPage}" class="btn btn-warning btn-lg pull-right" data-toggle="modal" data-target="#myModal">Add</button>

        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Enter Product Details</h4>
                    <div class="modal-body">
                        <form aura:id="pform">
                            <ui:inputNumber aura:id="quantity" label="Quantity" class="form-control" value="{!v.newLineItem.Quantity__c}" required="true" change="{!c.computeHybrid}"/> 

                            <!-- Renders when the product is of type SDDC -->
                            <aura:renderIf isTrue="{!v.product.isSDDCProd || v.product2.isSDDCProd }">             
                                <ui:inputNumber aura:id="packs" label="Number of Packs" class="form-control"  value="{!v.newLineItem.of_Packs__c}"/>
                            <!-- Renders when the product is of type HYBRID -->
                            <aura:renderIf isTrue="{!v.product.isHybridProd || v.product2.isHybridProd}">
                                <ui:inputNumber aura:id="durationMonths" label="Duration Months" class="form-control" value="{!v.newLineItem.Duration_Months__c}" required="true" change="{!c.computeHybrid}"/>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default btn-lg" data-dismiss="modal">Cancel</button>
                        <ui:button press="{!c.addProductLineItem}" class="btn btn-success pull-right btn-lg">Submit</ui:button>
  • i tried this : 1. $(document.body).on('hidden.bs.modal', function () { $('#myModal').removeData('bs.modal') .find(".modal-content").html(''); }); but no success in rendering the fields.Only old values are cleared.Let me know any other function to refresh the modal. – Anchal Jindal Nov 24 '15 at 8:37
  • Share the attributes and JS logic as well, and which fields you want to reset after server call? – itzmukeshy7 Apr 20 '18 at 4:09

What do you mean by refreshing the modal? Are you saying to change the values of the view during c.computeHybrid?


 component.set("v.newLineItem", yourNewValue);
  • No Benjamin.. My question is... i have a List of Products (hybrid..sddc) on each product i have a "Add" button.. when i click on Add.. modal form should come up with fields rendered for the designated product(used aura:renderif to render fields based on Products).. in this code.. the issue is... For eg.. my first product is "sddc" so, modal renders based on aura renderif tag... now i closed the window.. click on Add of "Hybrid" product.. i still see the same modal form fields of SDDC – Anchal Jindal Nov 24 '15 at 10:37
  • create a helper method to clear all the fields showing in modal or call another server side controller to do a new newLineItem() and set your line item in javascript controller to clear all the value – Avijit Chakraborty Apr 20 '18 at 1: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.