title: Bootstrap generic modal with callbacks
body: <p>I've replace my JS <code>Confirm</code> function with a bootstrap modal, this modal is async so I also had to change my code and add callbacks.</p>
  
  <p>What I'm trying to is:</p>
  
  <p><strong>Pseudo Code</strong></p>
  
  <pre><code>if `simApp["con1"]` then show first modal with 2 buttons
      if return is clicked -&gt; close modal.
      if continue is clicked -&gt; open second modal
          if return is clicked -&gt; close modal
          if submit is clicked -&gt; submit form (not included in code)
  else open second modal
      if return is clicked -&gt; close modal
      if submit is clicked -&gt; submit form (not included in code)
  </code></pre>
  
  <p>This is all very simple when you don't use callbacks, which I'm fairly new to.</p>
  
  <p>So this is what I did, its <strong>NOT</strong> working, I guess it has something to do with the generic use of the modal. - <a href="http://jsfiddle.net/LiranBo/53Lyv4ez/" rel="nofollow"><strong>JSFIDDLE</strong></a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="modal fade" id="generalModalTwoButtons" role="dialog"&gt;
      &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header bg-primary"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                   &lt;h4 class="modal-title"&gt;&lt;/h4&gt;
  
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;&lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" id="btn-return" class="btn btn-primary" data-dismiss="modal"&gt;&lt;/button&gt;
                  &lt;button type="button" id="btn-submit" class="btn btn-primary" data-dismiss="modal"&gt;&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;button id="go"&gt;GO&lt;/button&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>simApp = {};
  simApp["con1"] = true;  //in this code I hard-coded the conditions to ture
  simApp["arr"] = [1];
  
  $("#go").click(function () {
      if (simApp["con1"] &amp;&amp; simApp["arr"].length &lt; 5) {
          var msg = '&lt;p&gt;msg1&lt;/p&gt;';
  
          updateGeneralTwoButtonsModal('#a94442', 'header1', msg, 'Return', 'Continue', function (result) {
              if (result === true) {
                  confirmBeforeSubmit(submitFormApproved);
              }
          });
      } else {
          confirmBeforeSubmit(submitFormApproved)
      }
  });
  
  function submitFormApproved(result) {
      if (result === true) {
          console.warn("submitted");
      }
  }
  
  function confirmBeforeSubmit(callback) {
      var msg = '&lt;p&gt;msg2&lt;/p&gt;';
      if (simApp["con1"]) msg = '&lt;p&gt;msg2-changed&lt;/p&gt;';
  
      updateGeneralTwoButtonsModal('#31708f', 'header2', msg, 'Return', 'Submit', callback);
  }
  
  function updateGeneralTwoButtonsModal(color, title, body, btnReturn, btnSubmit, callback) {
      var confirm = $('#generalModalTwoButtons');
      confirm.find('.modal-header').css('color', color);
      confirm.find('.modal-title').text(title);
      confirm.find('.modal-body').html(body);
      confirm.modal('show');
  
      confirm.find('#btn-return').html(btnReturn).off('click').click(function () {
          confirm.modal('hide');
          callback(false);
      });
      confirm.find('#btn-submit').html(btnSubmit).off('click').click(function () {
          confirm.modal('hide');
          callback(true);
      });
  
  }
  </code></pre>
  
  <p>Any idea what I did wrong?</p>
  
  <p><strong>P.S</strong> - for learning purposes I would like to avoid using promises on this solution.</p>