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.

Answer 1

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>");
            }
        });
    });
});

Answer 2

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

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