.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
– HSquirrel, Commented Aug 20, 2014 at 18:27
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
– Mike Brant, Commented Aug 20, 2014 at 18:29

ThatOneDude · Accepted Answer · 2014-08-20 20:40:52Z

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, 2014 at 20:40

answered Aug 20, 2014 at 18:32

ThatOneDude

1,54617 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sebastien Over a year ago

Since OP seems to be using JQuery making an AJAX call should be fairly easy with $.ajax()

Marc B · Accepted Answer · 2014-08-20 18:30:32Z

1

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.

answered Aug 20, 2014 at 18:30

Marc B

362k44 gold badges433 silver badges508 bronze badges

1 Comment

Zain Over a year ago

so simply put i need first go through some Json and Ajax tutorials first? Ef

Alvin Bakker · Accepted Answer · 2014-08-20 18:35:35Z

0

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

answered Aug 20, 2014 at 18:35

Alvin Bakker

1,5361 gold badge21 silver badges41 bronze badges

Comments

Michael Wagner · Accepted Answer · 2014-08-20 18:41:17Z

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, 2014 at 18:41

Michael Wagner

1,0381 gold badge8 silver badges20 bronze badges

Collectives™ on Stack Overflow

.append() is not appending PHP Code

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related