current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
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 0 down vote favorite
1

I've trying to solve this for the last five days now, but nothing works. I've viewed every single post on the subject and nothing helps. I am using an OpenCart CMS and would like to send a simple jquery variable from one file to another with ajax and post so it can change the background color of the css file. To make this clear why the file is not with .php extension read this tutorial http://net.tutsplus.com/tutorials/php/supercharge-your-css-with-php-under-the-hood/ especially the Elegant Method. So this is the code of the ajax

$(document).ready(
    function() 
      {
        var headerDefaultColor = "#126FA8";
      $.ajax({
        url:  "view/stylesheet/supercharge.css",
        data: {cell: headerDefaultColor},
        type: "POST",
        async: false,
        success: function(data) {
          console.log("Send");
        },
        error: function(data){
          console.log("Error");
        } 
        })
        .done(function(cell) { console.log("Done success: " + cell); })
        .fail(function() { console.log("error"); })
        .always(function() { console.log("complete"); })
        });

This is the code for the css

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

<?php
    $headerColor = null;
    var_dump($_POST['cell']);
    if(isset($_POST['cell'])){
        $headerColor = $_POST['cell'];
    } else {
        $headerColor = "Nothing happends, again!!"; 
    }
?>

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

This is what i get in the console:

    Send index.php:103
Done success:  

    <pre class='xdebug-var-dump' dir='ltr'><small>string</small> <font color='#cc0000'>'#126FA8'</font> <i>(length=7)</i>
    </pre>
    #header {
        background-color: #126FA8;
    }

However this is what i get in the css file. It should send the hex code, however it doesn't and it generated a Notice: Undefined index: cell and here is the output:

<br />
<font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined index: cell in C:\Program Files (x86)\wamp\www\opencart-1.5.5.1\upload\admin\view\stylesheet\supercharge.css on line <i>14</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0004</td><td bgcolor='#eeeeec' align='right'>250160</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='C:\Program Files (x86)\wamp\www\opencart-1.5.5.1\upload\admin\view\stylesheet\supercharge.css' bgcolor='#eeeeec'>..\supercharge.css<b>:</b>0</td></tr>
</table></font>
<pre class='xdebug-var-dump' dir='ltr'><font color='#3465a4'>null</font>
</pre>
#header {
    background-color: Nothing happends, again!!;
}

I tried with isset() and it doesn't work i tried with empty() it doesn't work, and also viewed every singe search result that google gave me nothing works. So i want the var headerDefaultColor to be send to the .css file and change the background color with php and not with jquery (which works fine). What am i missing here?

share|improve this question
 
Do you mean to do this? $( "#header" ).css( "background-color", headerDefaultColor ) –  sustainablepace Jun 13 '13 at 14:15
 
I don't want it done with JQuery because that is not the point. The color should be changed via the php variable. I know that the jquery works fine. –  Silent Ace Jun 13 '13 at 14:25
add comment

3 Answers

up vote 0 down vote

Change your PHP file to this

<?php 

header("Content-type: text/css"); 

// checks if cell is received from GET or POST, if not assign default value as #fff
$headerColor = isset($_REQUEST['cell']) ? $_REQUEST['cell'] : '#fff';

?>

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

When you are calling the CSS file, call it as below

<link href='view/stylesheet/supercharge.css?cell=#F00' rel='stylesheet' type='text/css' />

share|improve this answer
 
Not working i tried the $_REQUEST as well, and the code above in some other posts it's basically the same code as mine. –  Silent Ace Jun 13 '13 at 14:20
 
Is there a link to your working site? How did you get the last output? If the .htaccess file is set properly, the PHP file should capture the GET variables properly. –  blackpla9ue Jun 13 '13 at 14:25
 
It's a localhost and everything is set by default during the installation. I've made no changes to the main .htaccess file, except i added another .htaccess in the stylesheet folder AddHandler application/x-httpd-php .css. –  Silent Ace Jun 13 '13 at 14:35
add comment
up vote 0 down vote

You should change your url to php file like and not .css as you will get request in php file and not in css file

url:  "view/stylesheet/supercharge.php
share|improve this answer
 
Tried that as well, i still get the unidentified index: cell in the css/php file when viewed with the cosole. To see how it works read the link tutorial. –  Silent Ace Jun 15 '13 at 20:24
 
I succeed with changing css, but it seems that the browser do not use new values. –  user161722 Jun 16 '13 at 21:48
 
did you check the path ? means you have your file named supercharge.php in folder view/stylesheet ? –  user2477139 Jun 17 '13 at 9:14
add comment
up vote 0 down vote

Make sure you are not sending two or more ajax requests to the same url in time, as one of them can overrite data sent from second. E.g.:

function first_ajax(searchQuery) {
         $.ajax({
                url: '/search/index.php',
                type: 'post',
                data: {query: searchQuery},
                dataType: "JSON",
                success: function (data) {
                    console.log(data.objD);
                }
            });
};

function second_ajax(searchQuery) {
              first_ajax(searchQuery);    
              $.ajax({
                        url: '/search/index.php',
                        type: 'post',
                        data: {query:searchQuery, paging:paging, start:start},
                        dataType: "JSON",
                        beforeSend: function() {
                            loader.show();
                        },
                        complete: function() {
                            loader.hide();
                        },
                        success: function(data) {
                            console.log(data);
                        }
                    });
                };
    }

In this case data sent from second_ajax() "Paging" and "Start" will be undefined index for PHP as they would be overriten with first_ajax()

share|improve this answer
add comment

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.