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.
Related
I have been trying for multi select dropdown from 5 months!!. Finally found chosen jquery library. I have tried it with all possible combinations and referred over 10 different links. Still css not working.Please help.
Problem specifications:
I m using codeigniter.
Downloaded chosen library from https://github.com/harvesthq/chosen
Included css and js files under projectfolder/chosen/
I havnt find chosen.css file in Github repository Chosen Github repository so i copied it from source code of This Example
Below is my view file
<!doctype html>
<html>
<body>
<head>
<title>Add a title</title>
<!--Css used for chosen dropdown -->
<link rel="stylesheet" href="<?php echo base_url(); ?>chosen/css/chosen.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>chosen/css/prism.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>chosen/css/style.css">
</head>
<body>
<h1>HELLO DD</h1>
<select class="chosen-select" tabindex="8" multiple style="width:350px;" data-placeholder="Your Favorite Types of Bear">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
<option>Brown Bear</option>
<option>Giant Panda</option>
<option selected>Sloth Bear</option>
<option disabled>Sun Bear</option>
<option>Polar Bear</option>
<option disabled>Spectacled Bear</option>
</select>
<script src="<?php echo base_url(); ?>chosen/js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>chosen/js/chosen.jquery.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>chosen/js/prism.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo base_url(); ?>chosen/js/init.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function() {
$(".chosen-select").chosen();
});
</script>
</body>
</html>
I have tried to integrate jQuery star rating plugin called jQuery master in to my PHP application, but its not working. Can anyone help me? Below is my code:
{literal}
<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jRatingmaster/jquery/jRating.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jRating.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// alert('hi');
// get the clicked rate !
$(".basic").jRating({
onClick : function(element,rate) {
alert(rate);
}
});
});
</script>
{/literal}
<div class="exemple">
<div class="basic" data-average="8" data-id="2"></div>
</div>
Firstly, run your page in Mozilla FireFox, and check if any javascript/CSS file is not getting included.
In the Net tab, it shows a 404 with red color.
In the code, <?php echo CONST_SITE_ADDRESS;?> will not work in Smarty as it is being seen from your code.
From your PHP file, assign this to some variable display it in template.
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jRating.jquery.js"></script>
So, the corrected code:
<script type="text/javascript" src="{$YOUR_PATH}jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="{$YOUR_PATH}jRatingmaster/jquery/jRating.jquery.js"></script>
As per the documentation specified, there is no onclick handler in jrating plugin.
Your code should be like,
<script type="text/javascript">
$(document).ready(function(){
$(".basic").jRating();
});
</script>
I wrote a simple Codeigniter PHP app to implement Chosen.
Here's the page:
<!DOCTYPE html>
<html>
<head>
<script src="<?php echo base_url();?>js/jquery-1.11.0.min.js"></script>
<script src="<?php echo base_url();?>js/chosen.jquery.js"></script>
<script>
jQuery(document).ready(
function() {
jQuery(".chosen").chosen();
}
);
</script>
</head>
<body>
<h2>Chosen Plugin Test</h2>
<select class="chosen" style="width: 200px; display: none;">
<option>Choose...</option>
<option>jQuery</option>
<option selected="selected">MooTools</option>
<option>Prototype</option>
<option>Dojo Toolkit</option>
</select>
<select class="chosen" multiple="true" name="faculty">
<option value="AC">A</option>
<option value="AD">B</option>
<option value="AM">C</option>
<option value="AP">D</option>
</select>
</body>
</html>
Since I am quite new to this platform, and do not have a high reputation, I cannot post a screen-capture of what it looks like. I will describe it instead:
I get a select control that looks nothing like the nice control I see in the demos, and it does not behave the same way.
May I ask what am I doing wrong?
you have not included the css file of chosen, chosen works with its js file and its css file.
these files are needed for it:
<link href="/PulseBeta/css/chosen.css" rel="stylesheet" type="text/css">
<link href="/PulseBeta/css/prism.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/PulseBeta/js/chosen.jquery.js"></script>
<script type="text/javascript" src="/PulseBeta/js/prism.js"></script>
On the select tag just needed to add class "chosen-select" you are missing that as well.
Html:
<select class="chosen-select" id="SubDepartmentsDDL" name="SubDepartmentsDDL">
<option value="1">Hematology (2)</option>
<option value="2">Clinical Chemistry (0)</option>
<option value="3">Histopatholgy (0)</option>
</select>
Initialization Script:
<script type="text/javascript">
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%"}//,
//'.chosen-search': {disable_search: false}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
See Tutorial Here at my Blog I made few months ago
I am using code igniter, and I want to add a datetime picker using datetimepicker. The script can be found here
I have 2 sections on my webpage - the header and the content. On the controller, I load them both. Here is my javascript head
<script href="<?php echo base_url(); ?>js/datetimepicker.js" type="text/javascript"></script>
and here is my textbox code
<input id="tanggal" type="text" class="textbox" disabled="disabled"> <img src="<?php base_url(); ?>img/cal.gif">
when I refresh the page, I can hover the cal.gif, but when I click em, cal.gif is not responding. What went wrong in my code?
This is not the correct way of including javascript files:
<script href="<?php echo base_url(); ?>js/datetimepicker.js" type="text/javascript"></script>
It should be:
<script src="<?php echo base_url(); ?>js/datetimepicker.js" type="text/javascript"></script>
Just to keep in mind, base_url allows to do this:
<script src="<?php echo base_url('js/datetimepicker.js')?>" type="text/javascript"></script>
I have a story uploading system on my webpage, which uploads stories in a specified folder, and from that it lists their content to the webpage. I made a split, so only 300 chars are shown of the text, when the user clicks it, the rest of it is shown.
Here is my code:
This one lists it:
<?php foreach($dataArray as $data) { ?>
<div class="visible">
<?php echo $data[0]; ?>
</div>
<div class="hidden">
<?php echo $data[1]; ?>
</div>
<?php } ?>
This is my jQuery:
$('.hidden').css('display', 'none');
$('.visible').click(function () {
$('.hidden').css('display', 'inline');
});
This page('tortenetek.php') is ajaxed to the main page ('blog.php'). I included Jquery in blog.php like this:
<link href='http://fonts.googleapis.com/css?family=Niconne&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../css/stilus.css"/>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/tinybox.js"></script>
<script type="text/javascript" src="../js/ajax.js"></script>
<link href="../css/lightbox.css" rel="stylesheet" />
<script src="../js/lightbox.js"></script>
<script src="../js/story.js"></script>
Story.js is the script file i'm using.
Thanks folks!
Use .on method to attach event to dynamically added elements.
Change it to
$('.visible').on('click',function () {
$('.hidden').css('display', 'inline');
});