CODEWITHSUNDEEP
twitter-bootstrap-3
user247326
user247326

Reputation: 151

Bootstrap Modal not launching in form div

Weird issue. When the button that launches the modal window is located inside the form div, the modal window fails to launch. Chrome says "Resource interpreted as Script but transferred with MIME type text/x-js:" I already put a type for the source js but it didnt help. I also moved the call to earlier on in the page and that didnt work. The really weird part is, if I move the button outside of the form div, the modal opens just fine with no issue. Has anyone experienced this and can point me in the right direction. Thanks in advance

Edit: Here is the code(I cut out the content)

<div class="container">
<form class="form-inline" role="form">
  <div class="form-group">
    <label for="companyName">Company Name</label>
    <input type="text" class="form-control" id="companyName" placeholder="Company Name">
  </div>
  <div class="form-group">
    <label for="chainCode">Chain Code</label>
    <input type="text" class="form-control" id="chainCode" placeholder="Chain Code">
  </div>
  <div class="form-group">
    <label for="nCode">N-Code</label>
    <input type="text" class="form-control" id="nCode" placeholder="N-Code">
  </div>
  <button type="submit" class="btn btn-success">Search</button>
  <button class="btn btn-warning" data-toggle="modal" data-target="#advancedModal"> Advanced
    <span class="glyphicon glyphicon-cog"></span>
  </button>
</form>

<!-- Advanced Modal -->
<div class="modal fade" id="advancedModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Advanced Options</h4>
      </div>
      <div class="modal-body">
        <form role="form" id="myForm" method="post">
          <div class="form-group">
</form><!-- end advanced form -->
      </div><!-- end modal-body -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-   dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div><!-- end modal-footer -->
    </div><!-- end modal content -->
  </div><!-- end modal dialog large -->
</div><!-- end Advanced Modal -->
</div><!-- End Form Container -->

Upvotes: 0

Views: 515

Answers (1)

nozzleman
nozzleman

Reputation: 9649

somehow it seems to me, that bootstrap gets confused with the button in the form somehow. so try using 

<a class="btn btn-warning" data-toggle="modal" data-target="#advancedModal">
    Advanced <span class="glyphicon glyphicon-cog"></span>
</a>

instead of 

<button class="btn btn-warning" data-toggle="modal" data-target="#advancedModal">
    Advanced <span class="glyphicon glyphicon-cog"></span>
</button>

It should work, and looks just the same.

Upvotes: 1

Related Questions