Bootstrap Modal

[Srinivas_S]

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.

[Ahmmed Ali]

Hello @Srinivas_S 

Can you post the code you are currently using?

Thanks,

Ali

[Srinivas_S]

<div class="container">
<h2>Large Modal</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
ADD
</button><br>
<table class="table table-bordered">
        <thead>
          <tr class="coldata"> 
            <th>Requestor</th>
          </tr>
        </thead>   
        <tbody>
          <tr ng-repeat="x in c.data.arr track by x.index">
            <td>&nbsp;&nbsp;&nbsp;&nbsp; class="fa fa-pencil">  
            <td>{{x.requestor.displayValue}}</td>
          </tr>
        </tbody>
      </table>

<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">

<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>

<!-- Modal body -->
<div class="modal-body">
<label ng-class="{ 'required' : c.data.mandatoryUser == true}">&nbsp;Requestor</label><br>
<sn-record-picker id='requestorID' field="data.requestor" table="'sn_hr_core_profile'" ng-change="c.removeMandatory('user')" display-field="'user'" default-query="data.actualUsers" value-field="'user'" search-fields="'user.name'" page-size="100" ></sn-record-picker><br>
</div>

<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>

</div>
</div>
</div>

</div>

Hi @Ahmmed Ali , That's the bootstrap I have used. If user selected and submitted then if ADD button clicked, the same data shows by default and if manually cleared and submitted then old value gets replaced with new value by getting multiplied into two.

[Ahmmed Ali]

Hello @Srinivas_S 

The configuration is difficult to understand without client and server scripts. also I did not get what use case you are trying to solve. I do not see submit button for popup, just close button.

Thank you,

Ali

[Srinivas_S]

Hi @Ahmmed Ali 

I cannot share the code or the task as it is confidential, but here I have shared the issue where the button named Large modal is being used to pop-up the modal of a form.

There are input fields so if you input something and click anywhere outside the modal, the modal gets closed and again when you click the button the same values would be present.

So this is default behaviour but my requirement is to get new form in modal without any previous values. Kindly help me with this.

Thanks

Srinivas

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

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