CODEWITHSUNDEEP
phpjavascriptjquery
recoup8063
recoup8063

Reputation: 4280

jQuery not working when I echo it from PHP

I need only some js to run during some parts of a php script, for testing purposes I commented out the php so I am not going to show it here.

<!DOCTYPE HTML>
<html>
<head>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
    <?php
        echo '<script>
        var width = $(window).width();<---Not working down too 1A
        var height = $(window).height();
        var widthSTR = width.toString();
        widthSTR = widthSTR.concat("px");
        var heightSTR = height.toString();
        heightSTR = heightSTR.concat("px");
        heightSTR = " ".concat(heightSTR);
        var size = widthSTR.concat(heightSTR);
        $("body").css({
            "background-size" : size, <---1A and above ^
            "background" : "url(p.jpg) 50% 0 no-repeat fixed"<---1B
        });
        </script>
        ';
    ?>
</body>
</html>

The line I have labeled 1B works fine, the background image displays. The section labeled not working seems to have no effect but when I run it separately in a Script tag outside of the php it works fine. Any idea why/huge mistakes I missed? Thanks in advance.

Upvotes: 0

Views: 7290

Answers (4)

Andrew
Andrew

Reputation: 12809

Your code should be executed once the full dom has been loaded if it depends on the objects being loaded, which width etc will do.

<!DOCTYPE HTML>
<html>
<head>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
    <?php
        echo '<script>
        $(document).ready(function(){
            var width = $(window).width();<---Not working down too 1A
            var height = $(window).height();
            var widthSTR = width.toString();
            widthSTR = widthSTR.concat("px");
            var heightSTR = height.toString();
            heightSTR = heightSTR.concat("px");
            heightSTR = " ".concat(heightSTR);
            var size = widthSTR.concat(heightSTR);
            $("body").css({
                "background-size" : size, <---1A and above ^
                "background" : "url(p.jpg) 50% 0 no-repeat fixed"<---1B
            });
        });
        </script>
        ';
    ?>
</body>
</html>

Although I no reason why you even need to echo out the string anyway? Why not just include the actual Javascript directly inside the HTML with the echo?

Javascript only would be much easier to read, especially in your editor:

<body>
    <script>
        $(document).ready(function(){
            var width = $(window).width();
            var height = $(window).height();
            var widthSTR = width.toString();
            widthSTR = widthSTR.concat("px");
            var heightSTR = height.toString();
            heightSTR = heightSTR.concat("px");
            heightSTR = " ".concat(heightSTR);
            var size = widthSTR.concat(heightSTR);

            $("body").css({
                "background-size" : size, 
                "background" : "url(p.jpg) 50% 0 no-repeat fixed",
            });
        });
    </script>
</body>

Upvotes: 2

Julius Guttenberg
Julius Guttenberg

Reputation: 1

I added "contenteditable" within the element i wish to manipulate. Example:

<span class="display" id="echotask" contenteditable>

Then then jquery function manipulated the html my php-script echoed into the Document. I do not know why this was necessary here, given that jquery manipulated other elements that did not have that keyword, and normal javascript also succeeded in manipulating the HTML element without the keyword.

Upvotes: 0

Rubens Mariuzzo
Rubens Mariuzzo

Reputation: 29261

Wrap your code inside:

jQuery(function($) {
  // Put your whole code here
});

If you are touching the DOM you should ever wrap your jQuery stuff inside that block; this is called: the .ready() event for Document Loading.

Upvotes: 2

Toni Michel Caubet
Toni Michel Caubet

Reputation: 20183

have you tried:

if($condition){
?>
 <script>
        var width = $(window).width();
        var height = $(window).height();
        var widthSTR = width.toString();
        widthSTR = widthSTR.concat("px");
        var heightSTR = height.toString();
        heightSTR = heightSTR.concat("px");
        heightSTR = " ".concat(heightSTR);
        var size = widthSTR.concat(heightSTR);
        $("body").css({
            "background-size" : size,
            "background" : "url(p.jpg) 50% 0 no-repeat fixed"
        });
        </script>

    ?>
<?php
}

Probably the problem is that you're not waiting for the DOM to be loaded, please try:

if($condition){
    ?>
     <script>
      $(function(){
            var width = $(window).width();
            var height = $(window).height();
            var widthSTR = width.toString();
            widthSTR = widthSTR.concat("px");
            var heightSTR = height.toString();
            heightSTR = heightSTR.concat("px");
            heightSTR = " ".concat(heightSTR);
            var size = widthSTR.concat(heightSTR);
            $("body").css({
                "background-size" : size, 
                "background" : "url(p.jpg) 50% 0 no-repeat fixed"
            });
    });
            </script>

        ?>
    <?php
    }

But please note this has nothing to do with php.

Upvotes: 0

Related Questions