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);
});
Related
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.
Im using yii framework to do web development , text are call from specific php file in order to help me exchange the language. Some how i have to add some message from JS file, but i still need the yii php to call the text . How to do that? bellow if my coding
I would like to change "English: 26 character","Chinese: 16 character" and "Other: 16 character".
Because in yii calling text from other php is something like this:
In the labels.php is like this:
(eg: 'englishchar'=>'English: 26 character')
So to call the text is like this:
eg:<?php echo Yii::t('labels','englishchar');?>
$(function () {
$('#select_gametitle').change(function () {
var k = $(this).val();
if (k == "E") {
$("#txtgametitle").attr("placeholder", "English: 26 characters").placeholder();
$("#txtgametitle").attr('maxlength', '26');
}
else if (k == "C") {
$("#txtgametitle").attr("placeholder", "Chinese: 16 characters").placeholder();
$("#txtgametitle").attr('maxlength', '26');
}
else if (k == "O") {
$("#txtgametitle").attr("placeholder", "Other: 16 characters").placeholder();
$("#txtgametitle").attr('maxlength', '26');
}
});
$('input[placeholder], textarea[placeholder]').placeholder();
});
PHP code:
<div class="inputWrapper">
<div class="usetitle">* <?php echo Yii::t('labels', 'gametitle'); ?> :</div>
<select id="select_gametitle" name="select_gametitle" class="selectInput" style="width:369px;">
<option value=""><?php echo Yii::t('labels', 'select_gametitle'); ?></option>
<option value="E"><?php echo Yii::t('labels', 'english'); ?></option>
<option value="C"><?php echo Yii::t('labels', 'chinese'); ?></option>
<option value="O"><?php echo Yii::t('labels', 'other'); ?></option>
</select>
<div id="err_select_gametitle" class="error"></div>
<input id="txtgametitle" name="txtgametitle" type="text" class="textInput" style="width:352px;" placeholder="" />
</div>
You can add it as a global var inside tags in your main layout file.
/view/layouts/main.php:
<?php
Yii::app()->getClientScript()->registerCoreScript('jquery.ui');
Yii::app()->clientScript->registerCssFile(Yii::app()->clientScript->getCoreScriptUrl().'/jui/css/base/jquery-ui.css');
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/styles.css" />
<title><?php echo CHtml::encode($this->pageTitle); ?></title>
<?php Yii::app()->bootstrap->register(); ?>
<link rel="stylesheet" href="<?php echo Yii::app()->baseUrl; ?>/css/font-awesome-4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->baseUrl; ?>/css/style.css" />
<script>
eg:<?php echo Yii::t('labels','englishchar');?>
</script>
</head>
<body>
You could add the script before the div, from PHP, for example:
<!--just add your script code-->
<script>
$(function () {
//your js code
<?php echo "with text printed by php"); ?>
});
</script>
<!--and now your html code, also with embedded PHP-->
<div class="inputWrapper">
<div class="usetitle">* <?php echo Yii::t('labels', 'gametitle'); ?> :</div>
<!--the rest of your div-->
</div>
You could echo out the translate into a JSON.
Yii::app()->clientScript->registerScript('test',
'var lang =' . json_encode( array(
'message1'=>Yii::t('app','Message 1'),
'message2'=>Yii::t('app','Message 2'),
)) . '; console.log(lang.word1)');
$this->render('json');
Extending from this, you could use AJAX and JS template
How to use date picker in Codeigniter?
My view part looks like this
<html>
<head>
<link href="css/CalendarControl.css" rel="stylesheet" type="text/css">
<script language="javascript" src="js/CalendarControl.js"></script>
</head>
<body>
<table>
<tr>
<td><input name="txtdatefrom" type="text" id="txtdatefrom" onClick="return showCalendarControl(this);" style="background:#fff;border:1px solid #999;color:#999; text-align:center" value="From" onKeyPress="return disableEnterKey(event)"/></td>
<td><input name="txtdateto" type="text" id="txtdateto" onClick="return showCalendarControl(this);" style="background:#fff;border:1px solid #999;color:#999; text-align:center" value="To" onKeyPress="return disableEnterKey(event)"/></td>
<td><input type="submit" value="submit" name="submit" id="submit" /></td>
</tr>
</table>
</body>
</html>
And my controller
public function calender(){
$this->load->view('news/calender1');
}
install datecker's js then call function datepicker() using jQuery on id on which you want date.
This might help you out: Using Datetime picker
Or for Codeigniter:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="development-bundle/themes/ui-lightness/jquery.ui.all.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Datepicker Example 1</title>
<script type="text/javascript" src="development-bundle/jquery-1.4.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(function(){
$("#date").datepicker();
});
</script>
</head>
<body>
<label>Enter a date: </label><input id="date">
</body>
</html>
Download the jquery.ui for datepicker from the internet and put the file in your folder.the file is stored in assessts/js/jquery_ui.the stored location is on your wish
1. jquery-ui.css
2. jquery-ui.js
3. jquery-ui.min.js
provide the css link in head section
<link href="<?php echo base_url('assests/js/jquery_ui/jquery-ui.css');?>" rel="stylesheet">
provide the javascript in body section
<script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.js');?>"></script>
<script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.min.js');?>"></script>
your code be look like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link href="<?php echo base_url('assests/js/jquery_ui/jquery-ui.css');?>" rel="stylesheet">
<script type="text/javascript">
$(function(){
$("#date").datepicker();
});
</script>
</head>
<body>
<label>Enter a date: </label><input id="date">
<script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.js');?>"></script>
<script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.min.js');?>"></script>
</body>
</html>
and finally in control load the view and javascript library
include datepicker js and see the result.
<div class="text">
<?php
$data = array(
'name' => "registration_date",
'id' => "registrationDate",
'class' => "datepicker",
'readonly' => "true",
'value' => $this->input->post('registration_date')
);
echo form_input($data);
?>
<span class="text-error"><?php
echo form_error('registration_date');
?></span></div>
I am using a jquery banner to show advertisements on my site. When I include one of these banners, it works well, however when I include a second only the first one works, the other just shows as a static image. Does anyone know why this happens?
Find below the html code with the JQuery banner:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple JavaScript Rotating Banner Using jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jqbanner/js/jqbanner1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jqbanner/css/jqbanner1.css" />
</head>
<body>
<div class="sec sec3 ">
<right>
<div id="jqb_object">
<div class="jqb_slides">
<div class="jqb_slide" title=" "><img src="jqbanner/images/ads/entebeJuniorSchool.png" alt=" Entebbe Junior School Logo"/></div>
<div class="jqb_slide" title="" ><span> <br> <br> <br> Achievers in the making </span>...</div>
</div>
<div class="jqb_bar2">
<div class="jqb_info"></div>
<div id="btn_next" class="jqb_btn jqb_btn_next"></div>
<div id="btn_pauseplay" class="jqb_btn jqb_btn_pause"></div>
<div id="btn_prev" class="jqb_btn jqb_btn_prev"></div>
</div>
</div>
</right>
</div>
</body>
</html>
Attached find the code to the jquery file (jqbanner1.js):
// Simple JavaScript Rotating Banner Using jQuery
// www.mclelun.com
var jqb_vCurrent = 0;
var jqb_vTotal = 0;
var jqb_vDuration = 5000;
var jqb_intInterval = 0;
var jqb_vGo = 1;
var jqb_vIsPause = false;
var jqb_tmp = 20;
var jqb_title;
var jqb_imgW = 460;
var jqb_imgH = 250;
jQuery(document).ready(function() {
jqb_vTotal = $(".jqb_slides").children().size() -1;
$(".jqb_info").text($(".jqb_slide").attr("title"));
jqb_intInterval = setInterval(jqb_fnLoop, jqb_vDuration);
//Horizontal
$("#jqb_object").find(".jqb_slide").each(function(i) {
jqb_tmp = ((i - 1)*jqb_imgW) - ((jqb_vCurrent -1)*jqb_imgW);
$(this).animate({"left": jqb_tmp+"px"}, 500);
});
/*
//Vertical
$("#jqb_object").find(".jqb_slide").each(function(i) {
jqb_tmp = ((i - 1)*jqb_imgH) - ((jqb_vCurrent -1)*jqb_imgH);
$(this).animate({"top": jqb_tmp+"px"}, 500);
});
*/
$("#btn_pauseplay").click(function() {
if(jqb_vIsPause){
jqb_fnChange();
jqb_vIsPause = false;
$("#btn_pauseplay").removeClass("jqb_btn_play");
$("#btn_pauseplay").addClass("jqb_btn_pause");
} else {
clearInterval(jqb_intInterval);
jqb_vIsPause = true;
$("#btn_pauseplay").removeClass("jqb_btn_pause");
$("#btn_pauseplay").addClass("jqb_btn_play");
}
});
$("#btn_prev").click(function() {
jqb_vGo = -1;
jqb_fnChange();
});
$("#btn_next").click(function() {
jqb_vGo = 1;
jqb_fnChange();
});
});
function jqb_fnChange(){
clearInterval(jqb_intInterval);
jqb_intInterval = setInterval(jqb_fnLoop, jqb_vDuration);
jqb_fnLoop();
}
function jqb_fnLoop(){
if(jqb_vGo == 1){
jqb_vCurrent == jqb_vTotal ? jqb_vCurrent = 0 : jqb_vCurrent++;
} else {
jqb_vCurrent == 0 ? jqb_vCurrent = jqb_vTotal : jqb_vCurrent--;
}
$("#jqb_object").find(".jqb_slide").each(function(i) {
if(i == jqb_vCurrent){
jqb_title = $(this).attr("title");
$(".jqb_info").animate({ opacity: 'hide', "left": "-50px"}, 250,function(){
$(".jqb_info").text(jqb_title).animate({ opacity: 'show', "left": "0px"}, 500);
});
}
//Horizontal Scrolling
jqb_tmp = ((i - 1)*jqb_imgW) - ((jqb_vCurrent -1)*jqb_imgW);
$(this).animate({"left": jqb_tmp+"px"}, 500);
/*
//Vertical Scrolling
jqb_tmp = ((i - 1)*jqb_imgH) - ((jqb_vCurrent -1)*jqb_imgH);
$(this).animate({"top": jqb_tmp+"px"}, 500);
*/
/*
//Fade In & Fade Out
if(i == jqb_vCurrent){
$(".jqb_info").text($(this).attr("title"));
$(this).animate({ opacity: 'show', height: 'show' }, 500);
} else {
$(this).animate({ opacity: 'hide', height: 'hide' }, 500);
}
*/
});
}
Find attached the php file with the embedded html file:
Focus on :<div class="col4"> <?php include("jqbanner/EntebbeJuniorAd.html");?> </br> </br> <?php include("jqbanner/EntebbeJuniorAd.html");?> </div>
<?php
include("config/functions.inc.php");
include("config/function.php");
$detail=Get_Contents(16);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo ms_stripslashes($detail['meta_title'])?></title>
<meta name="description" content="<?php echo ms_stripslashes($detail['page_keyword'])?>" />
<meta name="keywords" content="<?php echo ms_stripslashes($detail['page_metadesc'])?>" />
<!-- Stylesheets -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="css/contentslider.css" />
<link href="css/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />
<!-- Javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/featuredcontentglider.js"></script>
<script type="text/javascript" src="js/jquery.min14.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/contentslider.js"></script>
<script type="text/javascript" src="js/ddaccordion.js"></script>
<script type="text/javascript" src="js/acordin.js"></script>
<script type="text/javascript" src="js/paging.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/Trebuchet_MS_400-Trebuchet_MS_700-Trebuchet_MS_italic_700-Trebuchet_MS_italic_400.font.js"></script>
</head>
<body>
<!-- Wrapper -->
<div id="wrapper_sec">
<!-- Header -->
<div id="masthead">
<div class="inner">
<?php include("include/logo.php");?>
<div class="right_head">
<?php include("include/search.php");?>
<!-- Navigation -->
<?php include("include/nav_top.php");?>
</div>
</div>
</div>
<div class="clear"></div>
<!-- Bread Crumb -->
<?php include("include/breadcrumb.php");?>
<!-- Content -->
<div id="content_sec">
<div class="inner2">
<div class="col3">
<h3 class="heading colr">About Jigsaw</h3>
<div class="">
<p><?php echo ms_stripslashes($detail['page_desc'])?></p>
<br />
</div>
<div class="clear"></div>
</div>
<div class="col4"> <?php include("jqbanner/EntebbeJuniorAd.html");?> </br> </br> <?php include("jqbanner/EntebbeJuniorAd.html");?> </div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="content_botm"> </div>
</div>
<div class="clear"></div>
<!-- Footer -->
<div id="footer">
<div class="inner">
<?php include("include/footer/left.php");?>
<?php include("include/footer/share.php");?>
<?php include("include/footer/connect.php");?>
<?php include("include/footer/resource.php");?>
</div>
</div>
</div>
</body>
</html>
since you are initialising your banners via IDs $("#jqb_object"), it only matches your first banner, all others wont get initialised.
To work around this, give a really UNIQUE Id to all the elements you currently address via id (e.g. attach a unique string with php). Or you could use classes, but that most likey breaks your pause/next/prev - buttons.
In my site I have added a jQuery color picker textbox as like:
http://www.eyecon.ro/colorpicker/
When loading page through ajax then this color picker is not working. That means color picker is not working after ajax call.
How can i solve this problem?
My site is a CodeIgniter site:
This is my index page source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rock website</title>
<link href="<?php echo base_url();?>style/style_user_admin.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>style/jquery-jvert-tabs-1.1.4.css" />
<script type="text/javascript" src="<?php echo base_url();?>/js/ajaxupload.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/colorpicker.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/eye.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/utils.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/layout.js?ver=1.0.2"></script>
<link rel="stylesheet" href="<?php echo base_url();?>css/colorpicker.css" type="text/css" />
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-jvert-tabs-1.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>js/jquery.cleditor.css" />
<script type="text/javascript" src="<?php echo base_url();?>js/jquery.cleditor.js"></script>
<script type="text/javascript">
$(document).ready(function(){
page_setup();
});
</script>
<script type="text/javascript">
function page_setup()
{
$.ajax({
type: "POST",
url: "<?php echo base_url();?>index.php/super_admin/page_setup/",
success: function(msg){
//alert(msg);
$("#page_setup").html(msg).show();
}
});
}
</script>
</head>
<body>
<div class="wraper">
<div class="welcome_to_admin">
Super Admin Panel
</div>
<div class="admin_main">
<div id="vtabs1">
<div>
<ul>
<li>Page Setup</li>
</ul>
</div>
<div>
<div id="page_setup">
<!--
load the page_setup.php page here
-->
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This is the super_admin controller code:
public function page_setup()
{
$this->load->view('super_admin/page_setup');
}
This is the page_setup.php page code:
<div class="tab1_rgt_part">
<div class="message_to_send_11">Color Settings</div>
<div class="tab1_main_part" style="margin-top:20px;">
<div class="tab1_left_part">Welcome Page Bg Color</div>
<input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" />
</div>
try adding the color picker after loading the html:
function page_setup()
{
$.ajax({
type: "POST",
url: "<?php echo base_url();?>index.php/super_admin/page_setup/",
success: function(msg){
//alert(msg);
$("#page_setup").html(msg).show();
$("#colorpickerField1").ColorPicker(
onChange: function (hsb, hex, rgb) {
$(this).val(hex);
}
);
}
});
}
$('#colorpickerField1, #colorpickerField2, #colorpickerField3,#colorpickerField4).ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
$(el).val("#"+hex);
//$(el).css("background-color","#"+hex);
$(el).ColorPickerHide();
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
I found the answer.Add this code in a script tag at the top of the view page