I tried to add JQuery Chosen plugin to my website, but i can't make it work on a <select> , there are 2 classes in it that are from bootstrap, i tried to chosen-select on it, didn't work.
Heres the code, also, this page is being built in PHP.
PHP-Dropbox
<select class="form-control bfh-countries chosen-select" data-country="PT">
<option value="PT">Portugal</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">
(...)
and so on.
I added the plugin at the end of the file
Import JS libray and plugin
<script src="<?php echo site_url('https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');?>" type="text/javascript"></script>
<script src="<?php echo site_url('recursos/chosen/chosen.jquery.js'); ?>" type="text/javascript" > </script>
<link rel="stylesheet" href="<?php echo base_url();?>recursos/chosen/chosen.css" />
<script type="text/javascript">
$(window).load(function(){
$(".chosen-select").chosen()
});
</script>
Why I can't load the plugin to the selector?
You are adding your site's url infront of the google api's url , which is wrong and the jquery is not working for you at all. What site_url or base_url from codeigniter (which is your framework) does is , generate an url which is specified inside config.php file. if you put a path of any file inside these functions , it will become sort of :
yoursite.com/your/another/path/file.js
Change your code from this :
<script src="<?php echo site_url('https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');?>" type="text/javascript"></script>
<script src="<?php echo site_url('recursos/chosen/chosen.jquery.js'); ?>" type="text/javascript" > </script>
<link rel="stylesheet" href="<?php echo base_url();?>recursos/chosen/chosen.css" />
<script type="text/javascript">
$(window).load(function(){
$(".chosen-select").chosen()
});
</script>
to this Updated:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo site_url('recursos/chosen/chosen.jquery.js'); ?>" type="text/javascript" > </script>
<script type="text/javascript">
$(document).ready(function(){
$(".chosen-select").chosen();
});
</script>
and add this line to your <head> tag not in footer :
<link rel="stylesheet" href="<?php echo base_url();?>recursos/chosen/chosen.css" />
By looking at the comment you have posted. Your path to the chosen plugin files are wrong. Please make sure you are targeting the right path.