.append() is not appending PHP Code

Question

Hi I am a beginner in PHP and i am trying to append a simple include php code in a <section>in html using Jquery .append().

PHP Code

<?php
    $cupSize = "
    <br><br>
    <table width=\"100%\" border=\"0\">
        <tr>
        <td>
            <div class=\"mainBox2\" id=\"largeCup\">
                <div class=\"mainSubBox2L\"> 
                    Large
                </div>
            </div>
        </td>

        <td>
            <div class=\"mainBox2\" id=\"smallCup\">
                <div class=\"mainSubBox2S\">
                    Small
                </div>
            </div>
        </td>

        <td>
            <div class=\"mainBox2\" id=\"mixCup\">
                <div class=\"mainSubBox2MP\">
                    Mix
                </div>
            </div>
        </td>
        </tr>
    </table>";

    echo $cupSize;  
?>

Jquery code

$('#misc').click(function(){
    $('.second').append("<?php include 'cupCustomizer.php'; ?> ");
});

However it isn't working and nothing happens. I searched on StackOverflow and there are some answers with Ajax however i have no experience of server side programming. I was only good at CSS, HTML and Jquery. So help me maybe :)

Thank You

I'm confused. Are you trying to append php code using javascript on the frontend? Or does your javascript run on the server as well? — HSquirrel, Aug 20 '14 at 18:27
The quotes and line-breaks in the value will conflict with the string literal in JavaScript. Both need to be escaped to prevent SyntaxErrors. See [Pass a PHP string to a JavaScript variable (and escape newlines)](http://stackoverflow.com/questions/168214/pass-a-php-string-to-a-javascript-variable-and-escape-newlines) — Jonathan Lonowski, Aug 20 '14 at 18:29
If you know the code already at page load time, why not just load it into a hidden div and make it visible on click event? You are doing nothing dynamic in that file at all so it makes no sense to do it the way you are doing it. Additionally your approach likely already has same load time implication as just putting the content in the DOM to begin with, as it is not like you are getting the additional HTML content asynchronously. — Mike Brant, Aug 20 '14 at 18:29
@MikeBrant This is what I'm trying to do. I have 3 `
`s and on clicking each
3 more will appear below that and the page will scroll down to them. If i use hidden div wont it take up space? — Zain, Aug 20 '14 at 18:47
@Zain Hidden div's (CSS `display: none`) are removed from the DOM layout flow entirely. — Mike Brant, Aug 20 '14 at 19:03
The include wont execute with this approach since PHP has already been executed at this level. You might want to look (since you seems to be using JQuery) at `$.ajax()` and you might want to look up the difference between server side(PHP) code and browser side(Javascript/JQuery) code. — Sebastien, Aug 20 '14 at 19:26

ThatOneDude · Answer 1 · 2014-08-20T20:40:52.333

2

You can't add PHP code to HTML displayed in the browser via javascript, as there won't be a PHP interpreter running in your web browser to process it. A PHP Include is not what you want.

You likely want to make an AJAX call to http://yourhost.com/restofurl/cupCustomizer.php from HTML, and append the HTML output of that PHP script instead.

Something like

$('#misc').click(function()
{
  $.get('cupCustomizer.php', function(data) 
  {
    $('.second').append(data);
  }
  );
});

might work as your function instead.

edited Aug 20 '14 at 20:40

answered Aug 20 '14 at 18:32

ThatOneDude

1,516
17
20

Since OP seems to be using JQuery making an AJAX call should be fairly easy with `$.ajax()` – Sebastien Aug 20 '14 at 19:22

score 1 · Answer 2 · answered Aug 20 '14 at 18:30

You are attempting to dump raw HTML text into a javascript context.

e.g.. assuming your php include() and whatnot actually work, you're going to be generating a page that looks like

$('.second').append("<br><br> blah blah " quote here " quote there etc....");

and totally kill your JS code block with syntax errors.

You cannot EVER dump arbitrary html text into a JS context and expect it to work.

At BARE MININUM you need to json_encode your text so it at least becomes syntactically valid javascript:

.append(<?php echo json_encode($cupSize); ?>)

which would produce

.append("<br><br> blah blah \" quote here \" quote there ....");

Note how the internal quotes have been escaped.

so simply put i need first go through some Json and Ajax tutorials first? Ef — Zain, Aug 20 '14 at 18:43

score 0 · Answer 3 · answered Aug 20 '14 at 18:35

You will need to make an ajax call to get the output of a php script that is not in the same document. Something like:

$('#misc').click(function(){
        $.ajax({
            url : "cupCustomizer.php",
            type: "POST",
            success: function(data, textStatus, jqXHR) {
                $(".second").append(data);
            },
            error: function (jqXHR, textStatus, errorThrown){
                console.log('OOPS! Something went wrong');
            }
        });
});

score 0 · Answer 4 · answered Aug 20 '14 at 18:41

0

Do you have the JQuery-Script in a .js-file? If yes, your PHP-Interpreter doesn't interpret it. You can change this by adding the following to your .htaccess-file:

<FilesMatch "\.(js)$">
AddHandler application/x-httpd-php .js
</FilesMatch>

answered Aug 20 '14 at 18:41

Michael Wagner

1,018
8
20

.append() is not appending PHP Code

4 Answers4