javascript - Bootstrap dropdown not working after initial ajax form submission

Question

I have a dropdown on my page, manager.php, here. Sorry for the formatting - bootstrap.:

  <!-- Bootstrap -->
  <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../../css/bootstrapstyle.css">
  <!-- Bootstrap Dropdown Enhancements-->
  <script type="text/javascript" src="../../js/dropdowns-enhancement.js"></script>
  <link rel="stylesheet" href="../../css/dropdowns-enhancement.css">

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn dropdown-toggle btn-primary" data-toggle="dropdown" aria-expanded="false">Search By <span class="caret"></span></button>
        <ul id="searchBy" class="dropdown-menu" role="menu">
          <li class="disabled"><a href="#">Search By...</a></li>
          <li><a href="#">cost</a></li>
          <li><a href="#">name</a></li>              
        </ul>
      </div>               
    </div>
  </div>
</div>

<div id="everything">
</div>

This code works fine when I load manager.php directly and the dropdown initializes, but this is not how I need the code to work.

The user begins on return.php; this page collects a bunch of data from the user and returns it to manager.php.

Once the user selects to do so on return.php, this code is run:

$.ajax({
      type: 'POST',
      url: 'manager.php',      
      data: {number:number, location:location, project:project, comments:comments},        
        success:function(data){
        $('#everything').html(data);                                                            
        }
  });

The ajax call works correctly, and it loads the data returned from manager.php into the everything div. It passes along the data as expected. The only thing that DOESN'T work upon loading manager.php into the DIV is the drop-down. I need to understand what I'm doing wrong to cause this functionality so I can prevent doing it in the future.

Answer 1

you can't initialize the bootstrap component after page load by adding bootstrap clasaes. To do this you have to initialize it by your self

To initialize a dropdown write this code

$('.dropdown-toggle').dropdown();

after

  $('#everything').html(data);

for more details: http://getbootstrap.com/javascript/#dropdowns