Bootstrap nav-tabs not working with php script

Question

My nav-tabs works fine using static data for my dropdown list but when I add the script to populate the dropdown list, the tabs don't work anymore.

I don't think there's any problem with the query since the list gets populated. Probably with the echo?

          <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#tab_1" data-toggle="tab">Boarding House Info</a></li>
              <li><a href="#tab_2" data-toggle="tab">Other Info</a></li>
              <li><a href="#tab_3" data-toggle="tab">Location</a></li>
            </ul>

            <div class="tab-content">
              <div class="tab-pane active" id="tab_1">
                <div class="box-body">
                  <div class="form-group">
                    <label for="boarding-house-name">Boarding House Name</label>
                    <input type="text" class="form-control" id="bh-name" name="bh-name" placeholder="boarding house name">
                  </div>
                  <div class="form-group" style="margin-bottom:50px">
                    <label for="price">Price</label><br>
                    <div class="col-md-2" style="margin-left:-15px;">
                      <input type="text" class="form-control" id="pricemin" name="bh-pricemin" placeholder="min">
                    </div>
                    <div class="col-md-2" style="margin-left:-15px;">
                      <input type="text" class="form-control" id="pricemax" name="bh-pricemax" placeholder="max">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="address">Address</label>
                    <input type="text" class="form-control" id="address" name="bh-address" placeholder="address">
                  </div>
                  <div class="form-group">
                    <label for="barangay">Barangay</label>
                      <select class="form-control" name="bh-barangay">
                        <option value="Brgy 1">Brgy 1</option>
                        <option value="Brgy 2">Brgy 2</option>
                        <option value="Brgy 3">Brgy 3</option>
                        <option value="Brgy 4">Brgy 4</option>
                      </select>
                  </div>
                  <div class="form-group">
                    <label for="contactperson">Contact Person</label>
                    <input type="text" class="form-control" id="contactperson" name="bh-contactperson" placeholder="contact person">
                  </div>
                  <div class="form-group">
                    <label for="contactnumber">Contact Number</label>
                    <input type="text" class="form-control" id="contactnumber" name="bh-contactnumber" placeholder="contact number">
                  </div>
                  <div class="form-group">
                    <label for="owner">Owner</label>
                    <select class="form-control" name="bh-owner-id">
                      <?php 
                        $query = "SELECT id_owner, owner_name FROM tbl_owner";
                        $result = $conn->query($query) or die("Connection failed: " . $conn->connect_error);

                        while($row = mysqli_fetch_assoc($result)) {
                          echo "<option value='".$row['id_owner']."'>".$row['owner_name']."</option>";
                        } mysql_free_result($result);
                      ?>
                    </select>
                  </div>
                </div>
              </div>

              <div class="tab-pane" id="tab_2">
                <div class="box-body">
                  <div class="form-group">
                    <label for="tenant" style="margin-bottom:-15px;">Tenant</label>
                    <div class="checkbox">
                      <label class="checkbox-inline">
                        <input type="checkbox" id="tenant_checkbx" value="Male"> Male
                      </label>
                      <label class="checkbox-inline">
                        <input type="checkbox" id="tenant_checkbx" value="Female"> Female
                      </label>
                    </div>
                  </div>
                  <div class="form-group" style="margin-bottom:50px">
                    <label for="specification">Specification</label><br>
                    <div class="col-md-6" style="margin-left:-15px;">
                      <select class="form-control">
                        <option>Boarding House</option>
                        <option>Dormitory</option>
                        <option>Apartelle</option>
                        <option>Lodge</option>
                        <option>Motel</option>
                      </select>
                    </div>
                  </div>
                  <div class="form-group" style="margin-bottom:50px">
                    <label for="noofrooms">No. of Rooms</label><br>
                    <div class="col-md-6" style="margin-left:-15px;">                          
                      <input type="text" class="form-control" id="exampleInputEmail1" placeholder="# of rooms">
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="form-group" style="margin-left:-15px;">
                      <label for="curfew">Curfew</label>                    
                      <div class="radio">
                        <label>
                          <input type="radio" name="curfew_radio" id="curfew_yes" value="Yes" checked> Yes
                        </label>
                      </div>
                      <div class="radio">
                        <label>
                          <input type="radio" name="curfew_radio" id="curfew_no" value="No"> No                            
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="form-group" style="margin-left:-15px;">
                      <label for="guests">Guests</label>
                      <div class="radio">
                        <label>
                          <input type="radio" name="guests_radio" id="guests_yes" value="Yes" checked> Yes
                        </label>
                      </div>
                      <div class="radio">
                        <label>
                          <input type="radio" name="guests_radio" id="guests_no" value="No"> No
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="form-group" style="margin-left:-15px;">
                      <label for="crtype">CR Type</label>
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" id="crtype_checkbx" value="Private"> Private
                        </label>
                      </div>
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" id="crtype_checkbx" value="Public"> Public
                        </label>
                      </div>
                    </div>   
                  </div>             
                </div>
              </div>

              <div class="tab-pane" id="tab_3">
                <div class="box-body">
                  <!-- INSERT MAP HERE -->            
                </div>
              </div>

            </div>
          </div>

Here is the query php script I used to populate the owner dropdown list:

                      <?php 
                        $query = "SELECT id_owner, owner_name FROM tbl_owner";
                        $result = $conn->query($query) or die("Connection failed: " . $conn->connect_error);

                        while($row = mysqli_fetch_assoc($result)) {
                          echo "<option value='".$row['id_owner']."'>".$row['owner_name']."</option>";
                        } mysql_free_result($result);
                      ?>

Answer 1

It's working now. Did some more debugging with the script and it seems like the line:

mysql_free_result($result);

(after the while condition) is the culprit.

I removed it and the tabs are working now. :)