changing background color through Ajax jQuery?

Question

scenario: my users have their own profile pages with different background colors and fonts, I want to retrieve the colors for example from a certain user using ajax. i.e.

$.ajax({ 
    type: "POST", 
    data: "id", 
    url: "ajax/css.php", 
    success: function (bg,font) { 
        $('#bg').css('background-color', 'bg');
        $('#font').css('font-color', 'font');
    }

ajax/css.php page

<?php

//retrieve the background and font data from database for the id(userID).

// this is the bit I'm stuck here, shall I echo the results or return them :~

?>

Nick Craver · Accepted Answer · 2010-12-02 11:51:35Z

4

JSON would probably be easiest here, like this:

$.ajax({ 
   type: "POST", 
   data: { id: someIDVariable }, 
   url: "ajax/css.php", 
   success: function (result) { 
     $('#bg').css('background-color', result.bg);
     $('#font').css('font-color', result.font);
   } 
});

Or a shorter form using $.getJSON() is GET is an option:

$.getJSON("ajax/css.php", { id: someID }, function (result) { 
  $('#bg').css('background-color', result.bg);
  $('#font').css('font-color', result.font);
});

Then in PHP:

eacho json_encode(array('font'=>$font,'bg'=>$bg));
//which will echo this format: { "font": "Arial", "bg": "#000000" }

answered Dec 2, 2010 at 11:51

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

2 Comments

getaway Over a year ago

thank you very much exactly what i needed cheers @nick you always save the day, by the way im using this example instead accessing iframes through subdomains its bit a wierd bu i think it will work

Nick Craver Over a year ago

@getaway - ahh, good approach, much better than the alternative :) +1 for trying to do it efficiently

marcgg · Accepted Answer · 2010-12-02 11:49:49Z

0

Just make an action returning a valid JSON with the data you need. For instance if it returns:

{ color: "red", font:"arial"}

You can do:

$.post("user_css_info.json",{id:1234}, function(data){
  alert("Color is" + data.color); 
});

answered Dec 2, 2010 at 11:49

marcgg

66.9k53 gold badges183 silver badges238 bronze badges

2 Comments

Haroldo Over a year ago

To make your php file return json: in your ajax script (php file), create an array of the data you want to return and then echo json_encode($your_data_array);

getaway Over a year ago

thanks for this @harldo thats where i was confused, can you just calrify where the user_css_info.json came from lool

Collectives™ on Stack Overflow

changing background color through Ajax jQuery?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related