jQuery Save css background color in variable

Question

I want to save a background color of an element in a variable which I sent with an AJAX call, so I can use it in a PHP SESSION, but for some reason I cannot save this css in the variable.

var color_rgb   = $( "#config-steps #selected-color" ).css( 'background-color' );

My AJAX call works fine, I have tested to put a test string in color_rgb and this works fine.

$.ajax( {
    type: "POST",
    url: sbg.ajaxurl,
    data: {
        color_rgb: color_rgb,
        action: 'sbg_config'
    }

});

Has anyone an idea how to fix this?

So your Problem is getting the background color? What is the problem exactly? Is it the worng color, is it an empty string? is your ajax call not called? Provide more Details please! — Andresch Serj, Apr 30 '14 at 09:19
Can we see your HTML? FWIW; since `selected-color` is an id, and they should be unique, there should be no need to prepend the selector with `#config-steps` — George, Apr 30 '14 at 09:20
@gbestard No this is not dublicate, I know how to get the background color of an element. Only I want to put it in a variable and send it. — Robbert, Apr 30 '14 at 09:30
@Robbert then you need to convert it in string or a `hex number`, otherwise it will look for a `rgb function`, and which is undefined — Rohan Kumar, Apr 30 '14 at 09:31
@RohanKumar Okay, but I used color_rgb: String(color_rgb), as theHarsh answered. But I still get rgba(0,0,0,0).. — Robbert, Apr 30 '14 at 10:57

Rohan Kumar · Answer 1 · 2014-04-30T12:27:23.623

1

Try this,

function hexc(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    return '#' + parts.join('');
}
var color_rgb = $("#config-steps #selected-color").css( 'background-color' );
$.ajax( {
    type: "POST",
    url: sbg.ajaxurl,
    data: {
        // set default black, if not color found, else convert it by hex function
        color_rgb: color_rgb ? hexc(color_rgb) : '#000000',
        action: 'sbg_config'
    }
});

Check the id of your selector. Is it exists or not.

edited Apr 30 '14 at 12:27

answered Apr 30 '14 at 11:34

Rohan Kumar

40,431
11
76
106

I tried your code but my developer tool gives me an error: Uncaught TypeError: Cannot convert undefined or null to object. I looks like I need to define colorval..? – Robbert Apr 30 '14 at 11:48
Your last edit still gives the same error. It looks like colorval needs to be defined. – Robbert Apr 30 '14 at 12:02
Did you add `var color_rgb = $("#config-steps #selected-color").css( 'background-color' );` before `ajax-call` – Rohan Kumar Apr 30 '14 at 12:04
Yes I did. I don't understand why it is gonna be wrong. – Robbert Apr 30 '14 at 12:06
Can you make an online demo for it – Rohan Kumar Apr 30 '14 at 12:07
I can, but I also can send you the URL of the project so you can see everything? – Robbert Apr 30 '14 at 12:08
It works see this http://jsfiddle.net/rohankumar1524/34YUs/ – Rohan Kumar Apr 30 '14 at 12:09
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/51743/discussion-between-robbert-and-rohan-kumar) – Robbert Apr 30 '14 at 12:14

score 0 · Answer 2 · answered Apr 30 '14 at 10:34

0

Cast a variable to String in Ajax Call like this :

$.ajax( {
    type: "POST",
    url: sbg.ajaxurl,
    data: {
        color_rgb: String(color_rgb),
        action: 'sbg_config'
    }
});

answered Apr 30 '14 at 10:34

theHarsh

660
5
8

jQuery Save css background color in variable

2 Answers2