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
Related
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>
With my code below, I am trying to style my bootstrapped select picker with the "btn-warning style" as seen here: https://silviomoreto.github.io/bootstrap-select/
Here what my code looks like:
<head>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="drake.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="http://silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css">
</head>
<body>
<div id="course2">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js"></script>
<select class="selectpicker" data-style="btn-primary" data-width="500px">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('.selectpicker').selectpicker();
});
</script>
</div>
</body>
As you can see, the select picker is not taking on the style or width attributes. What am I doing wrong? Thanks so much!
Fixed the URLs for you.
Notice I've moved the javascript files just before the closing tag </body> for faster page loading, and keep the css files at the <head>.
The problem was that you were using the incorrect url for bootstrap-select libraries. You can easily address those errors by using browser's developer tools, and then... well.. do some magic. :D
<head>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
</head>
<body>
<div id="course2">
<select class="selectpicker" data-style="btn-primary" data-width="500px">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.selectpicker').selectpicker();
});
</script>
</body>
EDIT: Also, why are you linking two bootstrap versions? 3.3.5 css and 2.3.1 js/css? You should use the latest only... try it
<head>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
</head>
<body>
<div id="course2">
<select class="selectpicker" data-style="btn-primary" data-width="500px">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.selectpicker').selectpicker();
});
</script>
</body>
I cant seem to see what has changed in the change logs for jquery ui from version 1.8.20 to what I'm now using 1.10.3
I am pulling data dynamically from a database and it replicates tabs as it needs. The tabs don't work, instead it displays all divs open on the page all over the place. So I guess its as if the hide css doesn't work. Tabs do nothing also when you click on them.
It is creating the tabs and also displaying the content. just as i said, the ALL divs show instead of being hidden unless you select a tab. So in turn clicking on the tabs does nothing because everything is already showing.
I think apart of the script that needs changing is here:
<html style="height:100% !important;">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--Loading bootstrap css-->
<link type="text/css"
href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,400,700,800">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
<link type="text/css" rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="vendors/bootstrap/css/bootstrap.min.css">
<!--LOADING SCRIPTS FOR PAGE-->
<link type="text/css" rel="stylesheet" href="vendors/dhtmlxGantt/dhtmlxgantt.css">
<!--Loading style vendors-->
<link type="text/css" rel="stylesheet" href="vendors/animate.css/animate.css">
<link type="text/css" rel="stylesheet" href="vendors/jquery-pace/pace.css">
<!--Loading style-->
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="style-mango.css" id="theme-style">
<link type="text/css" rel="stylesheet" href="css/themes/default.css" id="color-style">
<link type="text/css" rel="stylesheet" href="css/vendors.css">
<link type="text/css" rel="stylesheet" href="css/style-responsive.css">
<link type="text/css" href="vendors/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="shortcut icon" href="images/icons/favicon.ico">
</head>
<!--BEGIN CONTENT-->
<div class="page-content" style="min-height:1400px;">
<div class="col-md-9" id="nfw_body_body" style="height:100%;">
<style>
div.ui-tabs { width:100%; height:80%; min-height:700px; margin:5px; float:left; border:none; }
#tabs .ui-widget-content { border:none; padding:0px; margin:0px; background-color:#fff !important;" }
}
</style>
<script language="javascript">
var dyna_tabs = {
tabs: null,
init: function (id) {
var tabs = $('<div></div>').append('<div id="'+ id + '"></div>');
$('#nfw_body_body').append(tabs);
var list = $('<ul></ul').append('<li></li>');
tabs.append(list);
tabs.tabs();
// remove the dummy tab
tabs.tabs('remove', 0);
tabs.hide();
this.tabs = tabs;
},
add: function (tab_id, tab_name, tab_content) {
if (this.tabs != null) {
if (this.tabs.css('display') == 'none') {
this.tabs.show();
}
var data = $('<div id="'+tab_id+'"></div>').append(tab_content);
this.tabs.append(data).tabs('add', '#' + tab_id, tab_name);
this.tabs.tabs('beforeActivate', '#' + 1);
} else {
alert('Tabs not initialized!');
}
}
};
$(document).ready(function() {
dyna_tabs.init('mytabs');
dyna_tabs.add(
'tabs-' + 1,
' User Details',
'<div id="tabs-1" ></div>'
);
$('#tabs-1').load("content/change_user_details.php?user_id=");
dyna_tabs.add(
'tabs-' + 2,
'Pest Control',
'<div id="tabs-2"><h2>Pest Control</h2></div>'
);
$('#tabs-' + 2).load("content/change_service_details.php?service_id=");
2
dyna_tabs.add(
'tabs-' + 3,
'House Cleaning',
'<div id="tabs-3"><h2>House Cleaning</h2></div>'
);
$('#tabs-' + 3).load("content/change_service_details.php?service_id=);
3
});
</script>
</div>
<!--END CONTENT-->
</div>
<!--END CONTENT-->
<!--START FOOTER -->
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<!--loading bootstrap js-->
<script src="vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script src="vendors/metisMenu/jquery.metisMenu.js"></script>
<script src="vendors/slimScroll/jquery.slimscroll.js"></script>
<script src="vendors/jquery-cookie/jquery.cookie.js"></script>
<script src="js/jquery.menu.js"></script>
<script src="vendors/jquery-pace/pace.min.js"></script>
<!--LOADING SCRIPTS FOR PAGE-->
<!--CORE JAVASCRIPT-->
<script src="js/main.js"></script>
<script src="js/holder.js"></script>
<!--END FOOTER-- >
This was solved as multiple versions and calls of jquery. Only one can be called.
What am I missing to get my javascript working via the asset pipeline?
When I try using jQuery chained to work through the assets, it doesn't work properly, however when I put the javascript function directly into the view it works perfectly.
I've got the the jquery-rails and coffee-rails gems installed. I saved the jquery.chained.mini.js code to vendor\assets\javascript\jquery.chained.mini.js.
I updated my application.js to include the plugin.
I included the
$("#series").chained "#mark"
script block into my app\assets\javascript\vehicle.js.coffee file.
When the view loads, the following is listed under head-
<head>
. Edited for brevity
.
.
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/equipment.js?body=1" type="text/javascript"></script>
<script src="/assets/sessions.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/vehicles.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.chained.mini.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
.
.
.
</head>
The jquery plugin is there, as is the vehicles.js page. The source for vehicle.js comes out as follows-
(function() {
$("#series").chained("#mark");
}).call(this);
This should make the drop down lists in the edit view depend on each other. However, all the options are available no matter what in the second drop down box.
If I put the script directly into the view though, as show below, it works perfectly.
edit.html.erb
<!DOCTYPE html>
<html>
<head>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/equipment.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/sessions.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vehicles.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/equipment.js?body=1" type="text/javascript"></script>
<script src="/assets/sessions.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/vehicles.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.chained.mini.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="PJnMEwkx/Ap2MQIHUsIcu0rYh+C6Or8VoVB9j2q9ptU=" name="csrf-token" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div>
<select id="mark" class="span2">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option></select>
<select id="series" class="span2"><option value="">--</option>
<option value="series-3" class="bmw">3 series</option>
<option value="series-5" class="bmw">5 series</option>
<option value="series-6" class="bmw">6 series</option>
<option value="a3" class="audi">A3</option>
<option value="a4" class="audi">A4</option>
<option value="a5" class="audi">A5</option>
</select>
<script type="text/javascript" charset="utf-8">
$(function(){$("#series").chained("#mark");
});
</script>
</div>
</div>
</body>
</html>
Can someone explain why the code isnt working on the assett pipeline but is when I put it into the view direct?
Try precompiling the assets:
bundle exec rake assets:precompile
http://guides.rubyonrails.org/asset_pipeline.html
and then restarting Rails.
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.