I am currently working on a web application that provides a function for user to upload an excel file, which will read into a "dataframe" then subsequently be filtered according to the user's preferences. To upload the file, I have included "Flask-Dropzone". And for configuration of filters, I have implemented "selectpicker" to allow multi-selection. The html code for the "selectpicker" will be generated from my python code as user will indicate the number of filters to use then we will have to generate the specific number of filters for user to configure. And one of the `options are dynamic, whereby it will change based on the selection on the first "selectpicker". (that will be taken care of in the JS code in config_filter.html) But right now, my "selectpicker" does not display all of the options. When I view the source code, the options are there, but it is not displaying on the web page itself. What could be the problem?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/basic.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Font Awesome -->
<title>Market Data Terminal Analysis</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/homepage">Revenue Analysis Report<a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/homepage">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/select_query_filter">Generate Report</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="nvDropdown_SQ" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Standard Queries
</a>
<div class="dropdown-menu" aria-labelledby="nvDropdown_SQ">
<a class="dropdown-item" href="#">Top 20 Declined Terminal Numbers</a>
<a class="dropdown-item" href="#">Top 20 increased terminal numbers </a>
<a class="dropdown-item" href="#">Customers with 0 terminal</a>
<a class="dropdown-item" href="#">New Customers with > X terminals</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Update Records</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="nvDropdown_Import" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Import Data
</a>
<div class="dropdown-menu" aria-labelledby="nvDropdown_Import">
<a class="dropdown-item" href="/upload_files">Transactions</a>
<a class="dropdown-item" href="/add_product">Product Mapping</a>
<a class="dropdown-item" href="/add_company">Company Mapping</a>
<a class="dropdown-item" href="/add_country">Country Mapping</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container-fluid">
<body>
<h1>Choose necessary columns and values to filter by:</h1>
<form action="/add_filter_config" method="POST">
<select id="col1" name="col1" class="selectpicker" onchange="refreshList(event, 1);">
<option value="Product">Product</option>
<option value="Price Category">Price Category</option>
<option value="Firm Location">Firm Location</option>
<option value="Customer Name">Customer Name</option>
<option value="Customer Address">Customer Address</option>
<option value="Customer Address(2)">Customer Address(2)</option>
<option value="City">City</option>
<option value="State">State</option>
<option value="Zip">Zip</option>
<option value="Country">Country</option>
<option value="Change">Change</option>
<option value="Change#">Change#</option>
<option value="Change Date">Change Date</option>
<option value="Terminal Count">Terminal Count</option>
<option value="Billable">Billable</option>
<option value="Bill Contact">Bill Contact</option>
<option value="Phone#">Phone#</option>
<option value="Email">Email</option>
<option value="Source">Source</option>
<option value="Reporting_Date">Reporting_Date</option>
<option value="Channel">Channel</option>
</select> <select id ="fil_mode1" name="fil_mode1" class="selectpicker" data-live-search="true">
<option value="exclude">exclude</option>
<option value="include">include</option>
<option value="less than and equal to">less than and equal to</option>
<option value="more than and equal to">more than and equal to</option>
<option value="between">between</option>
</select> <select id ="val1" name="val1" class="selectpicker" multiple data-live-search="true">
<option value="SBBO">SBBO</option>
<option value="SCQ2">SCQ2</option>
<option value="SG20">SG20</option>
<option value="SIMX">SIMX</option>
<option value="SINA">SINA</option>
<option value="SING">SING</option>
</select> <br><br>
<input type="submit" value="Proceed to data mapping" formaction="/filter_records/column_mapping">
<input type="submit" value="Summarize records" formaction="/filter_records/config_summary">
<input type='hidden' id='no_of_filters' name="no_of_filters" value=1>
<input type='hidden' id='source' name='source' value=>
</form>
<script>
console.clear()
function refreshList(event, i){
var col_select = document.getElementById('col'.concat(i));
var uv_select = document.getElementById('val'.concat(i));
column = col_select.value;
fetch('/col/' + column).then(function(response) {
response.json().then(function(data) {
var optionHTML = ' ';
for (var uv of data.unique_val) {
optionHTML += '<option value="' + uv.id + '">' + uv.value + '</option>';
}
uv_select.innerHTML = optionHTML;
$('#val'.concat(i)).on('change', function() {
$('#val'.concat(i)).selectpicker('refresh');
});
})
});
}
</script>
</body>
</div>
</body>
</html>
Seems like you have included bootstrap library twice in your code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/basic.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Font Awesome -->
<title>Market Data Terminal Analysis</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/homepage">Revenue Analysis Report<a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/homepage">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/select_query_filter">Generate Report</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="nvDropdown_SQ" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Standard Queries
</a>
<div class="dropdown-menu" aria-labelledby="nvDropdown_SQ">
<a class="dropdown-item" href="#">Top 20 Declined Terminal Numbers</a>
<a class="dropdown-item" href="#">Top 20 increased terminal numbers </a>
<a class="dropdown-item" href="#">Customers with 0 terminal</a>
<a class="dropdown-item" href="#">New Customers with > X terminals</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Update Records</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="nvDropdown_Import" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Import Data
</a>
<div class="dropdown-menu" aria-labelledby="nvDropdown_Import">
<a class="dropdown-item" href="/upload_files">Transactions</a>
<a class="dropdown-item" href="/add_product">Product Mapping</a>
<a class="dropdown-item" href="/add_company">Company Mapping</a>
<a class="dropdown-item" href="/add_country">Country Mapping</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container-fluid">
<body>
<h1>Choose necessary columns and values to filter by:</h1>
<form action="/add_filter_config" method="POST">
<select id="col1" name="col1" class="selectpicker" onchange="refreshList(event, 1);">
<option value="Product">Product</option>
<option value="Price Category">Price Category</option>
<option value="Firm Location">Firm Location</option>
<option value="Customer Name">Customer Name</option>
<option value="Customer Address">Customer Address</option>
<option value="Customer Address(2)">Customer Address(2)</option>
<option value="City">City</option>
<option value="State">State</option>
<option value="Zip">Zip</option>
<option value="Country">Country</option>
<option value="Change">Change</option>
<option value="Change#">Change#</option>
<option value="Change Date">Change Date</option>
<option value="Terminal Count">Terminal Count</option>
<option value="Billable">Billable</option>
<option value="Bill Contact">Bill Contact</option>
<option value="Phone#">Phone#</option>
<option value="Email">Email</option>
<option value="Source">Source</option>
<option value="Reporting_Date">Reporting_Date</option>
<option value="Channel">Channel</option>
</select> <select id ="fil_mode1" name="fil_mode1" class="selectpicker" data-live-search="true">
<option value="exclude">exclude</option>
<option value="include">include</option>
<option value="less than and equal to">less than and equal to</option>
<option value="more than and equal to">more than and equal to</option>
<option value="between">between</option>
</select> <select id ="val1" name="val1" class="selectpicker" multiple data-live-search="true">
<option value="SBBO">SBBO</option>
<option value="SCQ2">SCQ2</option>
<option value="SG20">SG20</option>
<option value="SIMX">SIMX</option>
<option value="SINA">SINA</option>
<option value="SING">SING</option>
</select> <br><br>
<input type="submit" value="Proceed to data mapping" formaction="/filter_records/column_mapping">
<input type="submit" value="Summarize records" formaction="/filter_records/config_summary">
<input type='hidden' id='no_of_filters' name="no_of_filters" value=1>
<input type='hidden' id='source' name='source' value=>
</form>
<script>
console.clear()
function refreshList(event, i){
var col_select = document.getElementById('col'.concat(i));
var uv_select = document.getElementById('val'.concat(i));
column = col_select.value;
fetch('/col/' + column).then(function(response) {
response.json().then(function(data) {
var optionHTML = ' ';
for (var uv of data.unique_val) {
optionHTML += '<option value="' + uv.id + '">' + uv.value + '</option>';
}
uv_select.innerHTML = optionHTML;
$('#val'.concat(i)).on('change', function() {
$('#val'.concat(i)).selectpicker('refresh');
});
})
});
}
</script>
</body>
</div>
</body>
</html> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js">
After I remove one of them, seems like all your option shown again, see if this is what you want.