I'm trying style the select tag using bootstrap. The problem is coming from the JQuery library file. The PHP code doesn't work because of the JQUery file. And if I remove the Jquery file, the PHP code functions properly but the selectpicker class doesn't work in the select tag.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- JQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--- Select libraries --->
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/js/bootstrap-select.min.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo SITEURL; ?>/lib/js/jscal2/src/js/jscal2.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo SITEURL; ?>/lib/js/jscal2/src/js/lang/en.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo SITEURL; ?>/lib/js/jscal2/src/css/jscal2.css" />
<link rel="stylesheet" type="text/css" href="<?php echo SITEURL; ?>/lib/js/jscal2/src/css/border-radius.css" />
<link rel="stylesheet" type="text/css" href="<?php echo SITEURL; ?>/lib/js/jscal2/src/css/gold/gold.css" />
</head>
<-------SELECT CODE----->
<select class="selectpicker" name="partyCode" id="partyCode" data-width="530px">
<?php //echo getAgentASMOption($partyCode);
echo getAgentASMOption($_SESSION['party_Code']);
// echo '<br/>' .$mort01. '<br/>';
?>
</select>
Related
I have bootstrap js file inside assets folder like> assets/js/bootstrap.min.js and I have added in my index.HTML page with scrip tag <script src="assets/js/bootstrap.min.js"></script> but is not applying in my component.
What is wrong here or is there any way to use it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="96">
<meta property="og:image:height" content="96">
<meta content="width=2000" name="viewport">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta charset="utf-8">
<title>HomeClueWebApp</title>
<base href="/">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/icofont.css">
<link rel="stylesheet" type="text/css" href="assets/css/stellarnav.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/featherlight.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/featherlight.gallery.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/hover.css">
<link rel="stylesheet" type="text/css" href="assets/css/flexslider.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/slick.css">
<link rel="stylesheet" type="text/css" href="assets/css/slick-theme.css">
<link rel="stylesheet" type="text/css" href="assets/css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="assets/css/animations.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/morphext.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.css">
<link rel="stylesheet" type="text/css" href="assets/css/jquery.mb.YTPlayer.min.css">
<!-- Main stylesheet -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Responsive stylesheet -->
<link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
<!-- Favicon -->
<link href="assets/images/favicon.png" rel="shortcut icon" type="image/png">
<link href="assets/images/apple-icon.png" rel="icon" type="image/png">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="assets/js/popper.min.js"></script>
<!-- all plugins and JavaScript -->
<script type="text/javascript" src="assets/js/css3-animate-it.js"></script>
<script type="text/javascript" src="assets/js/stellarnav.min.js"></script>
<script type="text/javascript" src="assets/js/featherlight.min.js"></script>
<script type="text/javascript" src="assets/js/featherlight.gallery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.flexslider.js"></script>
<script type="text/javascript" src="assets/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="assets/js/jarallax.js"></script>
<script type="text/javascript" src="assets/js/slick.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.js"></script>
<script type="text/javascript" src="assets/js/jquery-scrolltofixed-min.js"></script>
<script type="text/javascript" src="assets/js/morphext.min.js"></script>
<script type="text/javascript" src="assets/js/dyscrollup.js"></script>
<script type="text/javascript" src="assets/js/jquery.ripples.js"></script>
<script type="text/javascript" src="assets/js/jquery.mb.YTPlayer.min.js"></script>
<script type="text/javascript" src="assets/js/app.js"></script>
<!-- Main Custom JS -->
<script type="text/javascript" src="assets/js/main.js"></script>
<app-root></app-root>
</body>
</html>
file structure is here
https://kuldeepkoranga-connekt.tinytake.com/tt/Mzk1NjkyMl8xMjE0NjIyMw
https://kuldeepkoranga-connekt.tinytake.com/tt/Mzk1NjkyNF8xMjE0NjIyNQ
Thanks for any response
you should add jquery and bootstrap scripts in angular.json scripts section.
As all the scripts and styles you are trying to load are inside some folders in assets so you need to tell angular to load and consider those folders as assets.
You can do that in angular.json file as follows:
"assets": [
"src/favicon.ico",
"src/assets",
"src/assets/*" // Add this line at end.
],
With this line at end we are telling angular to build other folders inside assets folder to consider as assets.
As already suggested by #Chirag Chaudhari
This is normally not a good way to load scripts and styles as assets, instead load them with scripts and styles array present in angular.json file.
Hope it helps.
While building a page, I have imported multiple (more than 10) external CSS and Javascript, including but not limited to timerangepicker, bootstrap and tabber.
The problem is, there seems to be some conflict when all of them load together, as they cause my UI to be totally messed up (some elements would show up in the wrong places, some features such as timerangepicker won't work).
I'm pretty sure the conflict is caused by all these files loading together, because some UI will become normal again when I disable some of the external files. These are the external files:
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css">
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<link rel="stylesheet" type="text/css" href="<?php echo APP_WEBSITE;?>/css/style.css">
<link href="<?php echo APP_WEBSITE;?>/css/tabber.css" rel="stylesheet" type="text/css" />
<link href="<?php echo APP_WEBSITE;?>/css/styles-pop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo WEBSITE;?>/js/tabs_slides.js"></script>
<script type="text/javascript" src="<?php echo WEBSITE;?>/js/tabber.js"></script>
<script src="<?php echo WEBSITE; ?>/js/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../templates/layout/css/bootstrap.css">
<link rel='stylesheet' href="<?php echo APP_WEBSITE;?>/css/browsebootstrap.css">
<link rel="stylesheet" type="text/css" href="<?php echo APP_WEBSITE; ?>/css/checkbox.css">
<link rel="stylesheet" type="text/css" href="<?php echo APP_WEBSITE;?>/css/ver02/search_payment.css">
<script src="<?php echo WEBSITE; ?>/js/browse.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/form.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/scrollbar.css">
<link href="css/topmenu.css" rel="stylesheet" type="text/css" />
<link href="css/search.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome-animation.min.css" rel="stylesheet" type="text/css" />
I know there are some redundancies, but strangely, some of the features will only work if I put it this way.
My question is, how do I pinpoint exactly which files are in conflict with which files? There are just too many of them. And how can I avoid the conflict?
Thanks and cheers.
First move is to strip of the duplicate file references. For example you have 4 referenced jquery files of different vesions. Use just one.
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css">
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<link rel="stylesheet" type="text/css" href="<?php echo APP_WEBSITE;?>/css/style.css">
<link href="<?php echo APP_WEBSITE;?>/css/tabber.css" rel="stylesheet" type="text/css" />
<link href="<?php echo APP_WEBSITE;?>/css/styles-pop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo WEBSITE;?>/js/tabs_slides.js"></script>
<script type="text/javascript" src="<?php echo WEBSITE;?>/js/tabber.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="<?php echo APP_WEBSITE; ?>/css/checkbox.css">
<link rel="stylesheet" type="text/css" href="<?php echo APP_WEBSITE;?>/css/ver02/search_payment.css">
<script src="<?php echo WEBSITE; ?>/js/browse.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/form.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/scrollbar.css">
<link href="css/topmenu.css" rel="stylesheet" type="text/css" />
<link href="css/search.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome-animation.min.css" rel="stylesheet" type="text/css" />
I'm beginner for developing the website. Would someone help me to solve these problems? The directory for the file is correct but don't know why I'm still getting the error. Wordpress cannot load the CSS file as well as the JavaScript.
I have used two techniques but still cannot work which can be shown as below:
Anyone can teach me why I cannot load CSS file and Javascript file although using these techniques.
First Technique that I used is <?php echo get_template_directory_uri();?> and <?php bloginfo('template_directory');?>
Header.php
<html lang="en">
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/ie/v8.css" /><![endif]-->
<script>
var template_dir_js = "<?php echo get_template_directory_uri();?>";
</script>
<!--[if lte IE 8]><script src="<?php bloginfo('template_directory');?>/css/ie/html5shiv.js"></script><![endif]-->
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.dropotron.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/skel.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/skel-layers.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/init.js" type="text/javascript"></script>
<!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/ie/v8.css" /><![endif]-->
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-desktop.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-mobile.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-1000px.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/skel.css" />
</head>
Second Technique that I used is wp_enqueue_script and wp_enqueue_style
Header.php
<html lang="en">
<head>
<title>Untitled</title>
<?wp_head();?>
</head>
Footer.php
...
<?php wp_footer();?>
</body>
</html>
Functions.php
<?php
function wpt_theme_styles() {
wp_enqueue_style('abs',get_template_directory_uri().'/css/font-awesome.min.css',array(),'1.0.0','all');
wp_enqueue_style('foundation_css', get_template_directory_uri().'/css/style.css',array(),'1.0.0','all');
wp_enqueue_style('normali_css', get_template_directory_uri().'/css/style-1000px.css',array(),'1.0.0','all');
wp_enqueue_style('normalze1_css', get_template_directory_uri().'/css/style-mobile.css',array(),'1.0.0','all');
wp_enqueue_style('normalze_css', get_template_directory_uri().'/css/style-desktop.css',array(),'1.0.0','all');
wp_enqueue_style('main_css', get_template_directory_uri().'/css/skel.css',array(),'1.0.0','all');
wp_enqueue_script( 'modernizr_js', get_template_directory_uri().'/js/jquery.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'foundation_js', get_template_directory_uri().'/js/jquery.dropotron.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'init_js', get_template_directory_uri().'/js/skel.min.js', array(),'1.0.0', true );
wp_enqueue_script( 'init1_js', get_template_directory_uri().'/js/skel-layers.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'init2_js', get_template_directory_uri().'/js/init.js', array(), '1.0.0', true );
wp_enqueue_style('abs');
wp_enqueue_style('foundation_css');
wp_enqueue_style('normali_css');
wp_enqueue_style('foundation_css');
wp_enqueue_style('foundation_css');
wp_enqueue_style('foundation_css');
wp_enqueue_script('modernizr_js');
wp_enqueue_script('foundation_js');
wp_enqueue_script('normalze1_css');
wp_enqueue_script('normalze_css');
wp_enqueue_script('main_css');
}
add_action('wp_enqueue_scripts', 'wpt_theme_styles');
?>
error
File Directory
When I view the source
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/jquery.min.js" type="text/javascript"></script>
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/jquery.dropotron.min.js" type="text/javascript"></script>
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/skel.min.js" type="text/javascript"></script>
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/skel-layers.min.js" type="text/javascript"></script>
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/init.js" type="text/javascript"></script>
<!--[if lte IE 8]><link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/momentum/css/ie/v8.css" /><![endif]-->
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style-desktop.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style-mobile.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style-1000px.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/skel.css" />
that means the URL is correct
i use the following configuration:
header.php
<!DOCTYPE html>
<html lang="en">
<head>
...
...
...
<link href="<?php echo get_bloginfo('template_url'); ?>/css/mycss.css" rel="stylesheet">
<script src="<?php echo get_bloginfo('template_url'); ?>/js/myjs.js"></script>
...
...
<?php
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>
<div class="myheader">
...
...
</div>
index.php (or page.php, single.php, etc...)
<?php get_header(); ?>
<div class="mycontainer">
....
....
....
</div>
<?php get_footer(); ?>
footer.php
<div class="myfooter">
...
...
...
</div>
<?php
/* Always have wp_footer() just before the closing </body>
* tag of your theme, or you will break many plugins, which
* generally use this hook to reference JavaScript files.
*/
wp_footer();
?>
</body>
</html>
im not using anything in functions.php to do this, just in the required files
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
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:
Always check browser console log for errors.
MySQL is deprecated, start using MySQLi
I know this is an old post but I think it will help people like me
Chaining select box can be easily done using jQuery. This is what I did.
HTML
<select id=select_1>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select id=select_2>
<option>2-1</option>
<option>2-2</option>
<option>2-3</option>
</select>
<select id=select_3>
<option>3-1</option>
<option>3-2</option>
<option>3-3</option>
</select>
Now the jQuery part. All you have to do is trigger change method when one of the select is change.
$('#select_1').on('change', function(){
$('#select_2').val(1).trigger('change'); //change value of second select and trigger change function
});
$('#sub_category').on('change', function(){
$('#select_3').val('2);
});
</script>
Thats it.
Cheers
I used more than three JavaScripts in Magento and I tried to fix some of the scripts (conflict I think) and it works but the last jQuery (jcarousel) it can be swapped to another category if I click the tabs "new arrival" and "most popular" but now it doesn't work, but if I comment out accordion js file it works but accordion can't work.. :(
Click here : http://thaiamuletstore.com/main1/index.php
head.phtml
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<link href="http://thaiamuletstore.com/main1/style/tabs.css" rel="stylesheet" type="text/css">
<link href="http://thaiamuletstore.com/main1/style/tabs.css" rel="stylesheet" type="text/css">
<link href="http://thaiamuletstore.com/main1/style/tango/skin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/jquery.min.js"></script>
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/Untlitie.js"></script> <!-- this-control-jcarousel-->
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/470fe3190c7d0ea4aacc14677c226000.js"></script> <!--this-control-Accordion-->
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/jquery.jcarousel.min.js"></script> <!-- this-control-jcarousel-->
<!--[if lt IE 8]>
<link rel="stylesheet" href="http://thaiamuletstore.com/main1/style/ie.css" type="text/css" media="screen" charset="utf-8" />
<![endif]-->
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/hoverIntent.js"></script>
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/superfish.js"></script>
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/organictabs.jquery.js"></script>
<script src=http://thaiamuletstore.com/main1/js/menu_effect/script.js" type="text/javascript"></script>
jQuery.noConflict();
This is the thing for your rescue.