jquery/php .css() function does not work

Question

I have been bugged by a problem for a 2-3 days now. I couldnt find remedy from any posts i have seen here or other sources. I thought Maybe i could get some help in my own post. Here is the code:

    $grn="/img/grn.png";
    $red="/img/red.png";
    echo "<script>";

    $cnt=0;
    for($i=0;$i<3;$i++)
    {
        $cnt=$cnt+100;
        for($a=1;$a<30;$a++)
        {
            $iid=$cnt+$a;

            echo    "$(document).ready(function()
                    {
                        $(\"#".$iid."\").click(function()
                        {
                            $.get(\"test.php\",{ iddd : ".$iid."},function(data) 
                            {

                                if(data==1)
                                {
                                    $(\"#".$iid."\").css('background-image',url(\"img/grn.png\"));
                                    $(\"#dene\").html(\"<p>GREEN ".$iid."</P>\");
                                }

                                if(data==0)
                                {
                                    $(\"#".$iid."\").css('background-image',url(\"img/red.png\"));
                                    $(\"#dene\").html(\"<p>RED ".$iid."</P>\");
                                }
                            }) 
                        }) 
                    });";
        }
    }
            echo "</script>";

I am aware my indentations are not very well. But I am kinda in hurry. My problem is that, the line :

      $(\"#".$iid."\").css('background-image',url(\"img/grn.png\"));

is not working. And when it doesnt execute, jquery also doenst execute the other statement in the same if statement. Any idea why it c ould happen ? Thanks in advance.

You dont need much to make sense of it. To be honest, if you need indentation to understand that code, you better not try answer any posts here. Sorry if you disagree. — Ozum Safa, Apr 24 '13 at 17:14
dude, it is not whether anyone can understand or not. It is a simple matter of courtesy. — raidenace, Apr 24 '13 at 17:15
My question is only about this : $(\"#".$iid."\").css('background-image',url(\"img/grn.png\")); . You dont even have to read the whole code, if you read my post. I just post it all together in case someone is interested to give effort even though it is hard to read. — Ozum Safa, Apr 24 '13 at 17:17
I am not here to start a flame. All I am saying is that when there is lot of code posted, it is a good practice to indent it. When pointed out, if your attitude is to say that one should not try to post answers if he cannot read unintended code, well...adieu and all the best! — raidenace, Apr 24 '13 at 17:20

score 3 · Accepted Answer · edited May 23 '17 at 10:28

You url css needs to be in quotes

                                        v                    v
$(\"#".$iid."\").css('background-image','url(\"img/grn.png\")');

PS. Hurry or not, get in the practice of proper indentation/code formatting! It doesn't take long once you get used to it.

You're also creating a ton of document.readys, when you only need one. Here's a cleaned up version, easier to read in PHP:

<?php
    $grn="/img/grn.png";
    $red="/img/red.png";
    echo "<script>
        $(document).ready(function(){
    ";
    $cnt=0;
    for ($i=0;$i<3;$i++) {
        $cnt=$cnt+100;
        for($a=1;$a<30;$a++) {
            $iid=$cnt+$a;
            echo <<<EOF

            $("#{$iid}").click(function() {
                $.get("test.php",{ iddd : {$iid}},function(data) {

                    if(data==1) {
                        $("#{$iid}").css('background-image','url("img/grn.png")');
                        $("#dene").html("<p>GREEN {$iid}</P>");
                    }
                    if(data==0) {
                        $("#{$iid}").css('background-image','url("img/red.png")');
                        $("#dene").html("<p>RED {$iid}</P>");
                    }
                });
            });
EOF;
        }
    }
    echo "
        });
    </script>";
?>

And in JS: http://codepad.org/SVa2If8H

A better solution

Id attributes that start with integers are not valid W3 HTML. You should re-work your html elements, perhaps to include the ID in a data attribute:

<span data-iid="123">Click Me</span>

Then you don't need PHP generated JS, just this one bit:

$(document).ready(function(){

    $("[data-iid]").click(function() {
        var iid = $(this).attr('data-iid');
        $.get("test.php",{ iddd : iid},function(data) {

            if(data==1) {
                $(this).css('background-image','url("img/grn.png")');
                $("#dene").html("<p>GREEN " + iid + "</P>");
            }
            if(data==0) {
                $(this).css('background-image','url("img/red.png")');
                $("#dene").html("<p>RED " + iid + "</P>");
            }
        });
    });
});

Yes , I have realized that I have posted the wrong version of my jquery. This is my generated code : $("#101").css("background-image","/img/grn.png"); . I checked it via browser. Yet it does not work. The image is there. Jquery lib is linked. id 101 exists and correct. — Ozum Safa, Apr 24 '13 at 17:20
You sir, just rocked my stupid ignorant world. I actually used echo instead of using EOF, just to avoid a google search. And hey, thank you for pointing out document.ready(). I think that was the problem. I dont understand though. I see that is not good to create that many document.ready(). But how does it affect my problem ? — Ozum Safa, Apr 24 '13 at 17:28

score 2 · Answer 2 · answered Apr 24 '13 at 17:08

2

You need quotes around the value being set for background-image...

$(\"#".$iid."\").css('background-image','url(\"img/grn.png\")');

answered Apr 24 '13 at 17:08

seannachie

137
4

Thank you for your answer. Actually I tried many many, versions of it. My main one was this : $(\"#".$iid."\").css(\"background-image\",\"/img/grn.png\"); . If I should show it in an easier form : $("#id").css("background-image","/img/grn.png"); – Ozum Safa Apr 24 '13 at 17:14

jquery/php .css() function does not work

2 Answers2

A better solution