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
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>
In multi select dropdown Select all option should be displayed at last after displaying all other options...
Ex : Select All
Black
Red
What i want is
Ex : Black
Red
Select All
i am referring below link
https://github.com/davidstutz/bootstrap-multiselect
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<meta name='viewport' content='width=device-width'>
<link href="<?php echo base_url();?>assets/css/fonts.css" rel="stylesheet" type="text/css" />
<script src="<?php echo base_url();?>assets/js/anglr/library/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="<?php echo base_url();?>assets/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="<?php echo base_url();?>assets/css/bootstrap-multiselect.css"
rel="stylesheet" type="text/css" />
<script src="<?php echo base_url();?>assets/js/anglr/controller/bootstrap_multiselect.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#lstFruits').multiselect({
includeSelectAllOption: true,
selectedBottom:true
});
});
</script>
<script type="text/javascript">
var web_link2="<?php echo base_url();?>";
$(function () {
$('#btnSelected2').click(function () {
var selected = $("#lstFruits option:selected");
var message = "";
selected.each(function () {
message += $(this).val() + "\n";
});
var array_split=message.split(',');
var document_array = document.getElementById('selectedtoken').value;
window.location.href = web_link2+"campaign/confirm_unsubscribe/"+document_array+'-'+message;
});
});
</script>
</head>
<body>
<div class="subscribe-Container">
<header class="subscribe-Header">
<a class="link"><img src="<?php echo base_url();?>assets/images/opend-logo.png" class="logo-img" alt="Opend" title="Opend"></a>
</header>
<div class="subscribe-Content">
<h1>admin#opend.com</h1>
<?php if(!isset($msg)||$msg=='')
{
?>
<p>Please Confirm your unsubscribe request Opend by Clicking on "Unsubscribe" button below to remove your email address</p>
<select id="lstFruits" multiple>
<option value="v"><?php echo $vertical_name?></option>
<option value="c">Contact List</option>
</select>
<input type="hidden" id="selectedtoken" value="<?php echo $mail_token_var?>"/>
<!--<button class="" id="btnSelected2" value="Unsubscribe"></button>-->
<a class="unsub_button" id="btnSelected2" >Unsubscribe</a>
<?php } else echo $msg; ?>
</div>
</div>
</body>
</html>
I tried using the below mentioned code
use this script for select all functionality for your multiselect dropdown
html
<select id="lstFruits" multiple>
<option value="v"><?php echo $vertical_name?></option>
<option value="c">Contact List</option>
<option id="select_all">Select All<option>
</select>
JS
$('#select_all').click(function() {
$('#lstFruits option').prop('selected', true);
});
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.
I have a combobox with filled info (filled by mysql_query) i want to add autocomplete.
$urun_bul="";
$sorgug = mysql_query("SELECT x FROM y order by z asc");
while( $yyy = mysql_fetch_array($sorgug))
{
$urun_bul.='<option value="'.$yyy["urun_id"].'">'.$yyy["urun_kodu"].' - '.$yyy["urun_adi"].'</option>';
}
Then prints $urun_bul
just try
click here
you will bind your option tag with mysql using this example...
OR
Example:
index.php file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="chosen.css">
<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop { left: -9000px; }
</style>
</head>
<body>
<form>
<div id="container">
<div id="content">
<div class="side-by-side clearfix">
<?php mysql_connect("hostname","username","password"); mysql_select_db("database_name"); ?>
<div>
<em>Select option with DB using autocomplete</em>
<select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="2">
<option value=""></option>
<?php $sorgug = mysql_query("SELECT x FROM y order by z asc");
while( $yyy = mysql_fetch_array($sorgug)){
?>
<option value="<?php echo $yyy["urun_id"]; ?>"><?php echo $yyy["urun_kodu"].' - '.$yyy["urun_adi"]; ?></option>
<?php } ?>
</select>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></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%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
</form>
</body>
</html>
please copy chosen.css and chosen.jquery.js files from downloaded code from above link and past into your folder where your index.php file is locate.
I have written a code, which is auto-logout when user doesn't perform any activity.
But one thing, I am not able to figure out.
I want that when I select the options from the drop-down, it will be passed to AJAX,
Can you please modify that so that I can send the data from options to AJAX.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style type="text/css">
#idletimeout { background:#CC5100; border:3px solid #FF6500; color:#fff; font-family:arial, sans-serif; text-align:center; font-size:12px; padding:10px; position:relative; top:0px; left:0; right:0; z-index:100000; display:none; }
#idletimeout a { color:#fff; font-weight:bold }
#idletimeout span { font-weight:bold }
</style>
</head>
<body>
<div id="idletimeout">
You will be logged off in <span><!-- countdown place holder --></span> seconds due to inactivity.
<a id="idletimeout-resume" href="#">Click here to continue using this web page</a> Please select reason for being idle.
<select id='idleReason' size="1">
<option value="nothing" selected="selected">Select a site</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
</select>
</div>
Content Lorem Impsum
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script src="jquery.idletimer.js" type="text/javascript"></script>
<script src="jquery.idletimeout.js" type="text/javascript"></script>
<script type="text/javascript">
$.idleTimeout('#idletimeout', '#idletimeout a', {
idleAfter: 3,
pollingInterval: 2,
keepAliveURL: 'keepalive.php',
serverResponseEquals: 'OK',
onTimeout: function(){
$(this).slideUp();
window.location = "timeout.htm";
},
onIdle: function(){
$(this).slideDown(); // show the warning bar
},
onCountdown: function( counter ){
$(this).find("span").html( counter ); // update the counter
},
onResume: function(){
$(this).slideUp(); // hide the warning bar
}
});
//
</script>
</body>
</html>
I would be grateful to you.
The basic form of your jQuery function should look like this:
$('#idleReason').change(function(){
$.ajax({
url: 'http://www.your.ajax.handler'
data: $('#idleReason option:selected').html()
});
);
You should look up the ajax documentation for more information about how to customize your query.