title: How to hide Bootstrap 5 modal only on success?
body: <p>Using bootstrap 5</p>
  <p>I have a modal which I show when <code>#truck_modal</code> is clicked which works just fine like so:</p>
  <p>(this code is at the top of my js file)</p>
  <pre><code>document.addEventListener('DOMContentLoaded', function() {
      document.querySelector('#add_truck').addEventListener('click', AddTruck);
  
      const truck_modal = document.querySelector('#staticBackdrop');
      const modal = new bootstrap.Modal(truck_modal, {
          backdrop: 'static'
      });
  
      document.querySelector('#truck_modal').addEventListener('click', () =&gt; {
          modal.show();
      });
  })
  </code></pre>
  <p>Now, if I add the following to the above function it works.</p>
  <pre><code>document.querySelector('#add_truck').addEventListener('click', () =&gt; {
       modal.hide();
  });
  </code></pre>
  <p>But here it runs when <code>#add_truck</code> is clicked regardless if the <code>AddTruck</code> function was successful or not, I only want it to hide if the <code>AddTruck</code> function is successful, so I tried the following.</p>
  <pre><code>function AddTruck() {
  
      ... some validations ...
  
      fetch('/inbound/add_truck', {
          
          ... some fetch code ...
  
      })
      .then(response =&gt; {
          jsonResponse = response.json();
          status_code = response.status;
  
          // console.log(jsonResponse);
          // console.log(status_code);
  
          if(status_code != 200) {
              alert('There was an error!');
  
          } else{
              origin.value = '';
              produce.value = '';
              license_num.value = '';
              loaded_weight.value = '';
  
              // document.querySelector('#add_truck').addEventListener('click', () =&gt; {
              //     modal.hide();
              // });
              modal.hide();
              // hideFunc();
  
              alert('Success!!!')
          }
  
          return status_code
      })
      .catch(error =&gt; {
          console.log(error)
      })
  
  }
  </code></pre>
  <p>Even tried this:</p>
  <pre><code>function hideFunc() {
      const truck_modal = document.querySelector('#staticBackdrop');
      const modal = new bootstrap.Modal(truck_modal, {
          backdrop: 'static'
      });
  
      modal.hide();
  }
  </code></pre>
  <p>What am I doing wrong here? Please help...</p>
  <p>Or is this a feature?</p>
  <h2>EDIT</h2>
  <p>These are my js, bootstrap and jquery scripts</p>
  <pre><code>&lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot; integrity=&quot;sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;{% static 'utils.js' %}&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>And I added <code>$('#truck_modal').modal('hide');</code> to the else block where I'm trying to hide it.</p>