Dynamiclly change element CSS style using Ajax + JSON

Question

To simplify the question let's say I have a group of checkboxes (if selected - a specific style applied) and a href link.

<input type=checkbox  style="color:#0f0; background:#0f0; border:1px solid;" name=CHKB_3D unchecked>
<span id=CHKB_3D_span style="">3D Model</span><br/>
<input type=checkbox  name=CHKB_2D checked>
<span id=CHKB_2D_span style="color:#00D100;">2D Drawing</span><br/>
<input type=checkbox  name=CHKB_ST checked>
<span id=CHKB_ST_span style="color:#00D100;">Stack up</span><br/>
<a onclick="ajax_json_styling()" href="javascript:void(0);">click me to change style!</a>

enter image description here

The values of the checkboxes status are stored in the database. The server (PHP) should decide which new color of checkbox label (span) I will have. If not selected -> while, if selected -> green.

I have a working version of this behavior: When I press href "save", I send ajax request to php, then on server side I write the new values of the status of the checkboxes. Then I create and echo a hidden DIV (later it's content will be eval() to apply new style) with specific styles that is based on current server data for checkboxes. Then in Ajax I eval() the content of that hidden DIV and in that way apply new styling based on server data for checkboxes.

The challenge is to migrate from eval() to JSON+JSON.parse(). I know how to update multiple DIVs content with JSON (in Ajax I hardcode which DIV with a specific ID to update). But my situation is a bit different, because I need to decide on the server side which element to update (based on DB records).

I don't need hardcoded code in JS or JQuery on which element to apply styling, but the choice of which element should be done grammatically based on server side.

Can I do that with JSON?

Please provide a logic or a simple example on how I can do that.

Thank you in advance for any help!

Ajax + JSON = Ajaj? This might be helpful - stackoverflow.com/questions/1036028/… — jrummell
– jrummell, Commented Jan 20, 2012 at 21:47

lynxoid · Accepted Answer · 2012-01-20 21:46:32Z

2

you can change it easily with jQuery:

$("#your-div-id").css("your-attribute", "your-value");

answered Jan 20, 2012 at 21:46

lynxoid

5196 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ihtus Over a year ago

as I mentioned: I need to decide on the server side which element's style to be changed. In your code the element ID is hardcoded in JQuery

lynxoid Over a year ago

checkboxes are drawn by your browser, so you will have to determine their color on the client-side. you can either send the color value from the server and then set it using the above syntax, or decide on a color based on checkboxes' values on the client side (then you only need to save the values and do not have to wait for a server response to get the colors)

FtDRbwLXw6 · Accepted Answer · 2012-01-20 21:53:43Z

1

I don't know what format your data is in, but let's say it looks something like this:

{"checkboxes": {"CHKB_3D": "white", "CHKB_2D": "green", "CHKB_ST": "white"}}

Then your AJAX code would look something like this:

$.ajax({
    url: '/some/server/script.php',
    data: { /* stuff */ }
    dataType: 'json',
    success: function(data) {
        for (var name in data.checkboxes) {
            $('#' + name + '_span').css('color', data.checkboxes[name]);
        }
    }
});

answered Jan 20, 2012 at 21:53

FtDRbwLXw6

29.1k16 gold badges74 silver badges108 bronze badges

Collectives™ on Stack Overflow

Dynamiclly change element CSS style using Ajax + JSON

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related