current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

What i want is to get the color value from one JavaScript section into another php file which acts as a css file. I saw some example with ajax however they do not work, although the .done and .always say the data is send. So here is the script part and the color value:

    var jCell = '#aabbcc';


 $(document).ready(function (){
  $.ajax({
    url: "view/stylesheet/supercharge.css",
    data: {cell: jCell},
    type: "POST",
    async: false })
    .done(function(cell) { console.log("success: "+ jCell); })
    .fail(function() { console.log("error"); })
    .always(function() { console.log("complete"); })
  });

Here is the php file(acting as css) and it should get the value with $_post however it doesn't:

<?php header("Content-type: text/css; charset: UTF-8"); ?> 

<?php 

    $menuColor = '#121212';
    $headerColor = $_POST['cell'];
    $bodyColor = '#fffaaa';

?>

#header {
    background-color: <?=$headerColor; ?>;
}

Any suggestions?

Thanks.

share|improve this question
2  
What are you expecting this to do? This returns the CSS file with the substituted variable to AJAX, but that doesn't add the stylesheet to the web page. –  Barmar Jun 10 '13 at 15:36
    
You say done fires, so as far as I can see this is working. Sounds like you're expecting something to happen other than the console.log() call. –  MrCode Jun 10 '13 at 15:40

4 Answers 4

up vote 0 down vote accepted

The problem is just loading the file via Ajax isn't going to activate the styles in your page. If you are expecting the css to affect your page you need to include it in your page. You need something along the lines of this. NOTE: THIS IS UNTESTED.

Add in this at the top:

<script id="phpcss"><?php include(path/to/phpfile); ?></script>

And then have this in the javascript:

var jCell = '#aabbcc';


$(document).ready(function (){
    $.ajax({
        url: "view/stylesheet/supercharge.css",
        data: {cell: jCell},
        type: "POST",
        success: function(data) {
            $("#phpcss").html(data);
        },
        async: false })
        .done(function(cell) { console.log("success: "+ jCell); })
        .fail(function() { console.log("error"); })
        .always(function() { console.log("complete"); })
    });

This should take the returned css from the ajax call and put it into the head of your current file.

share|improve this answer
    
Sorry to bother you, this seems to work fine, but i still have a question. Do i need the CSS file at all? The point was not to display just one value but more since i want to use jpicker to add colors and change the header values. –  Silent Ace Jun 10 '13 at 16:09
    
If you're using jpicker to change a value then you need to modify it slightly, but otherwise it's fine to use and a css file is a good way to go. I've amended my answer above. That way you don't keep appending it, but modify the css each time. –  Styphon Jun 10 '13 at 16:17
    
Thank you for your reply, i am not very good at jquery. Ticked as accepted answer. –  Silent Ace Jun 10 '13 at 16:25
up vote 3 down vote

Change -

url: "view/stylesheet/supercharge.css",

TO

url: "view/stylesheet/supercharge.php",

What is your cell is ? is it a global variable ?

share|improve this answer
    
It is a css file. Here is what i did net.tutsplus.com/tutorials/php/… –  Silent Ace Jun 10 '13 at 15:32
    
@user2468422 yet not read it..but in a glance it is also referring to <link rel="stylesheet" href="css/supercharged.php" media="screen"> –  swapnesh Jun 10 '13 at 15:36
    
I set Elegant Method rather than the simple Method in the tutorial. "Then, instead of saving the CSS file as a *.php file, you save it as a *.css file, and you place it in a folder for CSS (in our example, ~/css/). Once you have done this, create a *.htaccess file in that folder and add the following: AddHandler application/x-httpd-php .css" –  Silent Ace Jun 10 '13 at 15:50
up vote 0 down vote

try putting cell in quotes like

data: {'cell': jCell},

also this

view/stylesheet/supercharge.php

seems like it is the issue.

share|improve this answer
    
For the second answer net.tutsplus.com/tutorials/php/… it is css file but it acts as php The first suggestion doesn't work as well. –  Silent Ace Jun 10 '13 at 15:37
    
so basically you only had the extension issue? –  wakqasahmed Jun 10 '13 at 15:52
up vote 0 down vote

Wish I could comment! Swapnesh is correct, I just did some verifying before answering. Most servers won't parse a file with a .css extension with php. Changing your extension to .php will allow the code to execute, but the header sent indicates the response to be of type css instead of the default html. This technique is also commonly used for javascript and plain text files.

I might also add that generally speaking it's probably easier / more efficient to apply dynamic css styles with jquery directly using their css method

$('cell #header').css('background-color', jCell);

But then again, I don't know all the reasons you're using ajax as you did not elaborate on the general idea, but take what helps and leave the rest.

EDIT: One other thing you (though more likely others reading this) may want to watch out for is short tags. Not saying you can't use them, just be aware as it states in the PHP docs

Short tags ... are only available when they are enabled via the short_open_tag php.ini configuration file directive, or if PHP was configured with the --enable-short-tags option.

Using short tags should be avoided when developing applications or libraries that are meant for redistribution, or deployment on PHP servers which are not under your control, because short tags may not be supported on the target server. For portable, redistributable code, be sure not to use short tags.

Starting with PHP 5.4, short echo tag <?= is always recognized and valid, regardless of the short_open_tag setting.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.