Multiple color picker for multiple divs update issue in WordPress

I’m adding three color pickers for three divs and added jquery for that. Here is my Code:

<script>
$(document).ready(function() {
    $('#heading_color').blur(function() {
        var headingcolor = $("#image_title_color").val();
        $("#image_title").css("color", headingcolor);
    }); 
    $('#desc_color').blur(function() {
        var desccolor = $("#image_description_color").val();
        $("#image_description").css("color", desccolor);
    }); 
    $('#button_color').blur(function() {
        var buttoncolor = $("#image_button_color").val();
        $("#image_button_text").css("color", buttoncolor);
    }); 
});

<input id="image_title" type="text" class="regular-text" name="image_title" value="<?php echo $edit_values->image_title; ?>" style="color:<?php echo $edit_values->image_title_color; ?>">

<?php $custom_color_title = $edit_values->image_title_color; 
if( $custom_color_title!= '' ) { ?>
    <input type="text" value="<?php echo $edit_values->image_title_color; ?>" class="custom_color" id="heading_color" name="heading_color" />
<?php } else { ?>
    <input type="text" value="#000" class="custom_color" id="heading_color" name="heading_color" /> <?php } ?>

<input type="hidden" value="<?php echo $edit_values->image_title_color; ?>" class="hidden_color" id="image_title_color" name="image_title_color" />



<textarea rows="5" cols="37" id="image_description" class="regular-text" name="image_description" style="color:<?php echo $edit_values->image_description_color; ?>"><?php echo $edit_values->image_description; ?></textarea>
<?php $custom_color_desc = $edit_values->image_description_color; 
if( $custom_color_desc!= '' ) { ?>
    <input type="text" value="<?php echo $edit_values->image_description_color; ?>" class="custom_color" id="desc_color" name="desc_color" />
<?php } else { ?>
    <input type="text" value="#000" class="custom_color" id="desc_color" name="desc_color" /> <?php } ?>

<input type="hidden" value="<?php echo $edit_values->image_description_color; ?>" class="hidden_color" id="image_description_color" name="image_description_color" />
</tr>



<input id="image_button_text" type="text" class="regular-text" name="image_button_text" value="<?php echo $edit_values->image_button_text; ?>" style="color:<?php echo $edit_values->image_button_color; ?>">
<?php $custom_color_button = $edit_values->image_button_color; 
if( $custom_color_button!= '' ) { ?>
    <input type="text" value="<?php echo $edit_values->image_button_color; ?>" class="custom_color" id="button_color" name="button_color" />
<?php } else { ?>
    <input type="text" value="#000" class="custom_color" id="button_color" name="button_color" /> <?php } ?>

<input type="hidden" value="<?php echo $edit_values->image_button_color; ?>" class="hidden_color" id="image_button_color" name="image_button_color" />

And other jquery for color picker is:

jQuery(document).ready(function($){
var customOptions = {
    // Declare a default color here,
    defaultColor: true,
    // a callback to fire whenever the color changes to a valid color
    change: function(event, ui){
        $("#image_button_text").css( 'color', ui.color.toString());*/
        var head_color = $( '#heading_color' ).val();
        var desc_color = $( '#desc_color' ).val();
        var btn_color = $( '#button_color' ).val();

        $( '#image_title_color' ).val( head_color );
        $( '#image_description_color' ).val( desc_color );
        $( '#image_button_color' ).val( btn_color );

        $( "#image_title" ).css( 'color', head_color);
        $( "#image_description" ).css( 'color', desc_color);
        $( "#image_button_text" ).css( 'color', btn_color);

    },
    // a callback to fire when the input is emptied or an invalid color
    clear: function() {},
    // hide the color picker controls on load
    hide: true,

    history: true,
    // show a group of common colors beneath the square
    palettes: true
};
$('.custom_color').wpColorPicker(customOptions);

});

When I submit button after selecting color it can’t update the color but again I click on submit button it refelcts changes. But again when I submit button it gives previous values of color.

I want to get rid of this issue and update the new color values when I update submit button.

Thanks.

Post Views: 1

Related posts

Social Network