glendon philipp Baculio glendon philipp Baculio - 6 months ago 10
PHP Question

Chained select in bootstrap 3?

I am trying to put a chained select on my form but i cannot just do it in bootstrap, and im wondering if my code is wrong or not, i am following the code in this site http://www.appelsiini.net/projects/chained

and tried to put it in my code, its yet on proper form but here:

<!DOCTYPE html>
<?php
include('connect.php');
include('session.php');
error_reporting(E_ALL);
?>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Autocomplete</title>
<meta name="viewport" content='width=700' content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src="jquery.chained.min.js"></script>
<!-- datepicker -->
<link href="dp/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="dp/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<!-- bootstrap 3.0.2 -->
<link href="../../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="text.css.scss" rel="stylesheet" type="text/css" />
<link href="../../css/bootstrap.min.js" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="../../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="../../css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- DATA TABLES -->
<link href="../../css/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="../../css/AdminLTE.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/typeahead.js"></script>
<style type='text/css'>
/* regular css */
.tabs {
padding: 10px 2em
}

@media screen and (max-width: 500px) {
/* applies only if the screen is narrower than 500px */
.tabs {
padding: 3px 1em
}
}
input, textarea {
max-width:100%
}
WebFont.load({
google: {
families: ['Open Sans']
}
});

.header {
font-family: Arial
}
.wf-opensans-n4-active .header {
font-family: 'Open Sans'
}
</style>

</head>
<body class="skin-blue">
<select id="branch" name="branch">
<option>
<?php
$sql1=mysql_query("SELECT * from branch")or die(mysql_error);
while($row = mysql_fetch_array($sql1)){
echo "<option value=".$row["branch_id"]." class=".$row["branch_id"].">" .$row["branch_name"]. "</option>";
}
?>
</option>
</select>
<select id="service" name="service">
<option>
<?php
$sql1=mysql_query("SELECT * from service")or die(mysql_error);
while($row = mysql_fetch_array($sql1)){
echo "<option value=".$row["service_id"]." class=".$row["branch_id"].">" .$row["service_name"]. "</option>";
}
?>
</option>
</select>
<script>
$("#service").chained("#branch"); /* or $("#series").chainedTo("#mark"); */
</script>


I put it on the top to see if its functioning but it's not?

The working code is here, no bootstrap just plain HTML,

<html>
<head>
<?php include('connect.php'); ?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src="jquery.chained.min.js"></script>
</head>
<body>
<select id="branch" name="branch">
<option>
<?php
$sql1=mysql_query("SELECT * from branch")or die(mysql_error);
while($row = mysql_fetch_array($sql1)){
echo "<option value=".$row["branch_id"]." class=".$row["branch_id"].">" .$row["branch_name"]. "</option>";
}
?>
</option>
</select>

<select id="service" name="service">
<option>
<?php
$sql1=mysql_query("SELECT * from service")or die(mysql_error);
while($row = mysql_fetch_array($sql1)){
echo "<option value=".$row["service_id"]." class=".$row["branch_id"].">" .$row["service_name"]. "</option>";
}
?>
</option>
</select>
<script>
$("#service").chained("#branch"); /* or $("#series").chainedTo("#mark"); */
</script>
</body>
</html>


I've searched every chained select but I just cant make it work

Answer

In your question, you said Chained select is working 2nd code example when there is no bootstrap reason you have jQuery library first

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.chained.min.js"></script>

and the reason Chained select is not working in first code example because right after meta you have this JS library in following sequence

<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.chained.min.js"></script>

Notice above that jQuery library is placed second after bootstrap-datetimepicker.fr.js and if you check browser console log you will see errors saying Uncaught ReferenceError: $ is not defined

and this is really a mess

<!-- datepicker -->
<link href="dp/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="dp/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<!-- bootstrap 3.0.2 -->
<link href="../../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="text.css.scss" rel="stylesheet" type="text/css" />
<link href="../../css/bootstrap.min.js" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="../../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="../../css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- DATA TABLES -->
<link href="../../css/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="../../css/AdminLTE.css" rel="stylesheet" type="text/css" />

you have 2 bootstrap.min.css so remove one and you have included bootstrap.js as stylesheet link <link href="../../css/bootstrap.min.js" rel="stylesheet" type="text/css" />

Remember jQuery library always comes first so put jQuery library at top and then bootstrap library and also include first all CSS and then all JS libraries as following.

<!-- CSS -->

<link href="dp/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="dp/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<link href="text.css.scss" rel="stylesheet" type="text/css" />
<link href="../../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../../css/ionicons.min.css" rel="stylesheet" type="text/css" />
<link href="../../css/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../../css/AdminLTE.css" rel="stylesheet" type="text/css" />

<!-- JS -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../../css/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
<script src="jquery.chained.min.js"></script>

Now let's fix the <select> elements. you have <option></option> inside <option></option> and you are missing quotes '

<select id="service" name="service">
    <option>
    <?php
    $sql1=mysql_query("SELECT * from service")or die(mysql_error);
        while($row = mysql_fetch_array($sql1)){
            echo "<option  value=".$row["service_id"]." class=".$row["branch_id"].">".$row["service_name"]."</option>";
        }
    ?>
    </option>
</select>

so remove <option></option> before and after query and mixing PHP with HTML is not good practice so do like this

<select id="service" name="service">
    <?php
    $sql1=mysql_query("SELECT * from service")or die(mysql_error);
        while($row = mysql_fetch_array($sql1)){
    ?>
    <option  value="<?php echo $row["service_id"];?>" class="<?php echo $row["branch_id"];?>"><?php echo $row["service_name"];?></option>
    <?php } ?>        
</select>

make same change in other <select> element too.

and last make script DOM ready

<script>
$(document).ready(function() {
    $("#service").chained("#branch"); /* or $("#series").chainedTo("#mark"); */
});
</script>

Note:

  1. Always check browser console log for errors.
  2. MySQL is deprecated, start using MySQLi
Comments