Issue with the Bootstrap Modal

Srinivas_S · ‎05-09-2023

Hi Everyone!

I'm using Bootstrap for modal pop-ups (in the widget), I have implemented a 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 the 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 a scenario if I have the choice field country with options a,b,c (sn-record-picker) 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 the output is two 'b's.

Kindly could anyone help me related to the updation of the previous value to the new value automatically so that I can avoid duplicity of the values after entering new values?

Ratnakar7 · ‎05-09-2023

Hi @Srinivas_S ,

It seems like the issue might be related to how the modal is being handled and the data is being saved.

One solution could be to clear the fields and reset the form each time the modal is opened. This can be achieved using JavaScript to listen for the modal open event and then resetting the form.

You can use the following code to achieve this:

$('#myModal').on('shown.bs.modal', function () {
  $('#myForm')[0].reset();
});

Here, "#myModal" is the ID of your modal and "#myForm" is the ID of the form inside the modal.

Additionally, you can also consider updating the multi-row variable set with the selected value only once, when the form is submitted, instead of updating it every time a new modal is opened. This can help avoid duplicity of values.

If my response was helpful in resolving the issue, please consider accepting it as a solution by clicking on the ✅Accept solution button and giving it a thumbs up 👍. This will benefit others who may have a similar question in the future.

Thank you!

Ratnakar

Srinivas_S · ‎05-09-2023

Hello @Ratnakar7 , thank you for updating me with the approach.

I am using the following Modal, I tried with your approach but I am getting the error related to reset and also there is no ID for my form currently. Could you please suggest me the way?

The MRVS that I mentioned here is completely created through HTML and CSS and not the out of the box one.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<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">
    Open modal
  </button>

  <!-- 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">
          Modal body..
         <sn-record-picker>........</sn-record-picker>
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

Thanks

Srinivas

Ratnakar7 · ‎05-09-2023

Hi @Srinivas_S ,

You can add an ID to your form element and use it to reset the form when the modal is opened.

Here is an updated code snippet that you can try:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<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">
    Open modal
  </button>

  <!-- 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">
          <form id="myForm">
            <sn-record-picker>........</sn-record-picker>
          </form>
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

<script>
  $('#myModal').on('shown.bs.modal', function () {
    $('#myForm')[0].reset();
  });
</script>

</body>
</html>

Thanks,

Ratnakar

Srinivas_S · ‎05-09-2023

Hi @Ratnakar7, thanks for the update!

I just checked with this by adding the id but still, it is not working out. I am getting an error with that reset and the values that I input for the first time in record picker are getting retained without getting cleared.

Thanks

Srinivas