CODEWITHSUNDEEP
phpjqueryajaxcolor-picker
Kichu
Kichu

Reputation: 3267

Jquery color picker not working after ajax call

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><a href="#page_setup" onclick="return page_setup();">Page Setup</a></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>

Upvotes: 0

Views: 2179

Answers (2)

Kichu
Kichu

Reputation: 3267

    $('#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

Upvotes: 0

redmoon7777
redmoon7777

Reputation: 4526

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);
                     }
                    );
                    }  
                });
    }

Upvotes: 2

Related Questions