title: Unable to open Modal using JS Function
body: <p>I've been fiddling with the codes the last few days. It's from an old project that I had to modify.</p>
  
  <p>Scripts</p>
  
  <pre><code>&lt;script src='http://code.jquery.com/jquery-latest.min.js'&gt;&lt;/script&gt; 
  &lt;script src="/lib/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="/css/styles.css" rel="stylesheet" /&gt;
  @*&lt;script src="/js/jquery.js"&gt;&lt;/script&gt;
    &lt;script src="/js/date.js"&gt;&lt;/script&gt;*@
  
  &lt;script src="/wijmo/controls/wijmo.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/wijmo/controls/wijmo.input.min.js"&gt;&lt;/script&gt;
  &lt;script src="/wijmo/controls/wijmo.grid.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/wijmo/controls/wijmo.chart.min.js"&gt;&lt;/script&gt;
  &lt;link href="/wijmo/styles/wijmo.min.css" rel="stylesheet" /&gt;
  @*&lt;link href="/css/bootstrap.min.css" rel="stylesheet" /&gt; --- this S.O.B will make things white. Big "NO, NO" *@
  </code></pre>
  
  <p>Modal:</p>
  
  <pre><code>&lt;!-- Test Modal--&gt;
  &lt;div class="modal fade" id="TestModal" tabindex="-1" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;!--Modal Header--&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;
                      &amp;times;
                  &lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Modal Test&lt;/h4&gt;
              &lt;/div&gt;
              &lt;!--Modal Body--&gt;
              &lt;div class="modal-body"&gt;
                  &lt;dl class="dl-horizontal"&gt;
                      &lt;dt&gt;Branch Code&lt;/dt&gt;
                      &lt;dd&gt;
                          &lt;input class="form-control" id="BC" type="text" /&gt;
                      &lt;/dd&gt;
                      &lt;dt&gt;Branch&lt;/dt&gt;
                      &lt;dd&gt;
                          &lt;input class="form-control" id="B" type="text" /&gt;
                      &lt;/dd&gt;
                      &lt;dt&gt;Company ID&lt;/dt&gt;
                      &lt;dd&gt;
                          &lt;input class="form-control" id="CID" type="text" /&gt;
                      &lt;/dd&gt;
                  &lt;/dl&gt;
              &lt;/div&gt;
              &lt;!--Modal Footer--&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-primary" data-dismiss="modal" id="TestEdit" onclick="CmdBranchEditOk_OnClick()"&gt;
                  Ok
                  &lt;/button&gt;
                  &lt;button type="button" class="btn btn-danger" data-dismiss="modal" id="TestModalCancel"&gt;
                  Cancel
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript Function:</p>
  
  <pre><code>&lt;Script&gt;
      @*Test Function*@
      function OpenModal() {
          $('#TestModal').modal('show');
  
          document.getElementById('BC').value = "Test";
          document.getElementById('B').value = "Test";
          document.getElementById('CID').value = "Test";
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Trigger(Button):</p>
  
  <pre><code>&lt;button style="float:left" id="CmdAddBranch" type="button" class="btn btn-default" onclick="OpenModal()"&gt;Open Modal&lt;/button&gt;
  </code></pre>
  
  <p>What am I missing here?</p>