Bootstrap Modal

Srinivas_S
Tera Contributor

Hi Everyone,

 

I'm using the bootstrap for modal pop-up (in widget),  I have implemented few fields as a form and that form itself is a modal. The issue is that by default we have the data/value in the field gets saved once submitted. If I try to click Add button for next modal the same data in the fields would be displayed (the same modal gets displayed by default).

 

Now when I try to manually clear fields and try to add new values and submit, the values are displaying in multiple. 

 

For scenario if I have the choice field country with options a,b,c and if I select 'a' and submit, the 'a' is getting updated on the multi row variable set(not of record producer) under country but if I click Add button for new modal, the same modal is getting opened with same values in the fields. Now if I try to clear and select 'b' and submit, the initial 'a' is getting replaced with 'b' and also one more row is added with 'b' and output is two 'b's. 

 

Kindly could anyone help me to get new Modal once Add button is clicked and also to avoid duplicacy of values after entering new values.

 

1 ACCEPTED SOLUTION

Ahmmed Ali
Mega Sage

Hi @Srinivas_S 

 

Got the issue now.

 

You need to use client script to show the modal and before showing modal you need to clear out the variables to which your input fields are tied to.

 

<button type="button" class="btn btn-primary" ng-click="c.showModalPopup()">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myPopupToGetInputData">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form>
        <input type="text"  ng-model="c.short_description"/><br>
      </form>
    </div>
  </div>
</div>

 

Client script:

c.showModalPopup = function(){
c.short_description = "";
$("#myPopupToGetInputData").modal("show");
}
If I could help you with your Query then, please hit the Thumb Icon and mark my answer as Correct!!

Thank you,
Ali

View solution in original post

7 REPLIES 7

Ahmmed Ali
Mega Sage

Hi @Srinivas_S 

 

Got the issue now.

 

You need to use client script to show the modal and before showing modal you need to clear out the variables to which your input fields are tied to.

 

<button type="button" class="btn btn-primary" ng-click="c.showModalPopup()">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myPopupToGetInputData">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form>
        <input type="text"  ng-model="c.short_description"/><br>
      </form>
    </div>
  </div>
</div>

 

Client script:

c.showModalPopup = function(){
c.short_description = "";
$("#myPopupToGetInputData").modal("show");
}
If I could help you with your Query then, please hit the Thumb Icon and mark my answer as Correct!!

Thank you,
Ali

Hi @Ahmmed Ali 

I tried this with normal form, it works thank you.

 

Srinivas

Hello @Ahmmed Ali 

I tried with the normal form, and it worked but the duplication of values is not solved yet.

It still updates the old value with the new value whatever I provide. I want that functionality to stop. Could you please help me with that?

 

Thanks

Srinivas