PHP keeps converting `<` to HTML entity

bobbintb · May 9

I am working on a plugin. I have some HTML in the page file and some Javascript between some `script` tags. PHP converts `if (height < 0)` to `if (height < 0)` for some reason and it breaks things. If I use PHP tags and echo it, it will work but that's really a work around. Any idea why this is happening and how to fix it? The page file doesn't even contain any PHP, it's strictly HTML.

SimonF · May 9

Can you post the page fi!e or attach? And will take a look tomorrow.

bobbintb · May 10

Menu="Utilities"
Title="Fan Auto Control"
Icon="dynamix.system.autofan.png"
---
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script type="text/javascript" src="https://raw.githubusercontent.com/anhr/resizer/master/Common.js"></script>
    <script type="text/javascript" src="https://raw.githubusercontent.com/anhr/resizer/master/resizer.js"></script>
    <style>
        .element
	        {
		        border: 1px solid #999999;
                border-radius: 4px;
                margin: 5px;
                padding: 5px;
	        }
    </style>
    <script type="text/javascript">
        function onresize() {
            var element1 = document.getElementById("element1");
            var element2 = document.getElementById("element2");
            var element3 = document.getElementById("element3");
            var ResizerY = document.getElementById("resizerY");
            ResizerY.style.top = element3.offsetTop - 15 + "px";
            var topElements = document.getElementById("topElements");
            topElements.style.height = ResizerY.offsetTop - 20 + "px";
            var height = topElements.clientHeight - 32;
            if (height <?='<'?> 0)
                height = 0;
            height += 'px';
            element1.style.height = height;
            element2.style.height = height;
        }
        function resizeX(x) {
            var element2 = document.getElementById("element2");
            element2.style.width =
                element2.parentElement.clientWidth
                + document.getElementById('rezizeArea').offsetLeft
                - x
                + 'px';
        }
        function resizeY(y) {
            var element3 = document.getElementById("element3");
            var height =
                element3.parentElement.clientHeight
                + document.getElementById('rezizeArea').offsetTop
                - y
            ;
            if ((height + 100) > element3.parentElement.clientHeight)
                return;
            element3.style.height = height + 'px';
            onresize();
        }
        var emailSubject = "Resizer example error";
    </script>
</head>
<body>
    <div id="rezizeArea" style="width:1000px; height:250px; overflow:auto; position: relative;" class="element">
        <div id="topElements" class="element" style="overflow:auto; position:absolute; left: 0; top: 0; right:0;">
            <div id="element2" class="element" style="width: 30%; height:10px; float: right; position: relative;">
                Element 2
                <div id="resizerXY" style="width: 10px; height: 10px; background: blue; position:absolute; left: 0; bottom: 0;"></div>
                <script type="text/javascript">
                    resizerXY("resizerXY", function (e) {
                            resizeX(e.pageX + 10);
                            resizeY(e.pageY + 50);
                        });
                </script>
            </div>
            <div id="resizerX" style="width: 10px; height:100%; background: red; float: right;"></div>
            <script type="text/javascript">
                resizerX("resizerX", function (e) {
                    resizeX(e.pageX + 25);
                });
            </script>
            <div id="element1" class="element" style="height:10px; overflow:auto;">Element 1</div>
        </div>
        <div id="resizerY" style="height:10px; position:absolute; left: 0; right:0; background: green;"></div>
        <script type="text/javascript">
            resizerY("resizerY", function (e) {
                resizeY(e.pageY + 25);
            });
        </script>
        <div id="element3" class="element" style="height:100px; position:absolute; left: 0; bottom: 0; right:0;">Element 3</div>
    </div>
    <script type="text/javascript">
        onresize();
    </script>
</body>
</html>

Line 29 is the problem area.

SimonF · May 10

10 hours ago, bobbintb said:

Line 29 is the problem area.

I think you should be able to remove the html lines.

here is an example of one of my page files.

https://github.com/SimonFair/WOLforServices/blob/master/src/WOL4Services/usr/local/emhttp/plugins/WOL4Services/WOL.page

bobbintb · May 10

I don't follow. What HTTML do you mean? If I remove the html tags, it displays the code as literal text.

SimonF · May 10

2 hours ago, bobbintb said:

I don't follow. What HTTML do you mean? If I remove the html tags, it displays the code as literal text.

I have been able to get it to work, replacing <html> with form.

Menu="Utilities"
Title="Fan Auto Control"
Icon="dynamix.system.autofan.png"
---
<?PHP ?>
<form>
<head>
    <script type="text/javascript" src="https://raw.githubusercontent.com/anhr/resizer/master/Common.js"></script>
    <script type="text/javascript" src="https://raw.githubusercontent.com/anhr/resizer/master/resizer.js"></script>
    <style>
        .element
                {
                        border: 1px solid #999999;
                border-radius: 4px;
                margin: 5px;
                padding: 5px;
                }
    </style>
    <script type="text/javascript">
        function onresize() {
            var element1 = document.getElementById("element1");
            var element2 = document.getElementById("element2");
            var element3 = document.getElementById("element3");
            var ResizerY = document.getElementById("resizerY");
            ResizerY.style.top = element3.offsetTop - 15 + "px";
            var topElements = document.getElementById("topElements");
            topElements.style.height = ResizerY.offsetTop - 20 + "px";
            var height = topElements.clientHeight - 32;
            if (height < 0)
                height = 0;
            height += 'px';
            element1.style.height = height;
            element2.style.height = height;
        }
        function resizeX(x) {
            var element2 = document.getElementById("element2");
            element2.style.width =
                element2.parentElement.clientWidth
                + document.getElementById('rezizeArea').offsetLeft
                - x
                + 'px';
        }
        function resizeY(y) {
            var element3 = document.getElementById("element3");
            var height =
                element3.parentElement.clientHeight
                + document.getElementById('rezizeArea').offsetTop
                - y
            ;
            if ((height + 100) > element3.parentElement.clientHeight)
                return;
            element3.style.height = height + 'px';
            onresize();
        }
        var emailSubject = "Resizer example error";
    </script>
</head>
<body>
    <div id="rezizeArea" style="width:1000px; height:250px; overflow:auto; position: relative;" class="element">
        <div id="topElements" class="element" style="overflow:auto; position:absolute; left: 0; top: 0; right:0;">
            <div id="element2" class="element" style="width: 30%; height:10px; float: right; position: relative;">
                Element 2
                <div id="resizerXY" style="width: 10px; height: 10px; background: blue; position:absolute; left: 0; bottom: 0;"></div>
                <script type="text/javascript">
                    resizerXY("resizerXY", function (e) {
                            resizeX(e.pageX + 10);
                            resizeY(e.pageY + 50);
                        });
                </script>
            </div>
            <div id="resizerX" style="width: 10px; height:100%; background: red; float: right;"></div>
            <script type="text/javascript">
                resizerX("resizerX", function (e) {
                    resizeX(e.pageX + 25);
                });
            </script>
            <div id="element1" class="element" style="height:10px; overflow:auto;">Element 1</div>
        </div>
        <div id="resizerY" style="height:10px; position:absolute; left: 0; right:0; background: green;"></div>
        <script type="text/javascript">
            resizerY("resizerY", function (e) {
                resizeY(e.pageY + 25);
            });
        </script>
        <div id="element3" class="element" style="height:100px; position:absolute; left: 0; bottom: 0; right:0;">Element 3</div>
    </div>
    <script type="text/javascript">
        onresize();
    </script>
</body>

</form>

itimpi · May 10

Are any of the <html>, <head> or <body> tags needed? Are these not automatically supplied by the Unraid level as part of embedding the .page file into the GUI?

Peuuuur Noel · May 14

Code in .page (next to ---) is directly included in page body. So don't add <html>, <head> and <body> tags in your code.

bobbintb · May 22

Ah, ok. Got it now. Thanks everyone.

PHP keeps converting `<` to HTML entity

Recommended Posts

bobbintb

Link to comment

SimonF

Link to comment

bobbintb

Link to comment

SimonF

Link to comment

bobbintb

Link to comment

SimonF

Link to comment

itimpi

Link to comment

Peuuuur Noel

Link to comment

bobbintb

Link to comment

Join the conversation