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

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

• javascript
• php
• jquery
• html
• ajax

• Have you checked the console for errors? – j08691 Commented Aug 20, 2014 at 18:26
• You should post the relevant HTML... – Nicolas Commented Aug 20, 2014 at 18:26
• 2 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 Commented Aug 20, 2014 at 18:27
• The string isn't escaped... – tcooc Commented Aug 20, 2014 at 18:27
• 1 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 Commented Aug 20, 2014 at 18:29

4 Answers 4

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./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.

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 bees 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.

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

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>