Reputation: 23

Pass a value from jquery script into another php file with ajax

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.

Upvotes: 1

Answers (4)

Styphon

Reputation: 10447

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.

Upvotes: 0

Assimilater

Reputation: 964

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.

Upvotes: 0