Changed php code with $(#selector).html doesn't execute,

Question

So now i now this was a dumb question but does anyone now the best way to solve it without an ajax request, becaus I think it would be stupid to make a new file for just one line of code

I am making a gallery and I want two types of views one grid-view and a slide view. My slide and my grid view both work but they stand in different files. So I wrote a simple jquery function to load some php code into the html code. So that when I click a button the html code dissappears and there is php code. The jquery funtion works but the problem is that when the code is changed it doesn't recognise it as php code but just as a string.

This is what I see, you can see the text but it needs to execute that code: Here is the jquery function:

$(document).ready(function(){
$("img.grid_icon").click(function() {
        $(".werkvenster").html("&lt?php include_once('resources/UberGallery.php'); $gallery = UberGallery::init()->createGallery('img/gallerij/'); ?&gt");
    })
});

I use the &lt and &gt, otherwise the browser sees it as php code it has to execute instead of seeing it as a string.

Here is the html code it has to be in:

<body>  
    <section class="werkvenster">
        <img src="img/website/icon_grid.png" height="30px" class="grid_icon">
        <div class="galerij" id="galerij">

        </div>
        <button class="omlaag" id="galerij_knop">Terug</button>
        <button class="omhoog" id="galerij_knop">Verder</button>
    </section>
</body>

So everything between the section tags with class "werkvenster" needs to be changed by

<?php include_once('resources/UberGallery.php'); $gallery = UberGallery::init()->createGallery('img/gallerij/'); ?>

When someone clicks on the grid icon.

Thanks a lot in advance and please don't mark this as a duplicate because I have been searching for over an hour to find an answer to this question.

Duh!!!! You cannot execute PHP code in the browser from javascript. The PHP interpreter lives on the server, where all you PHP code lives. The javascript interpreter lives in the browser where you javscript code lives — RiggsFolly, Feb 03 '16 at 14:42
PHP is executed server site, while JavaScript will be executed on the client. The client loads the PHP code and has no clue what to do with it, other then to display it as a string. If you want to switch the view, you need to reload the website. — KhorneHoly, Feb 03 '16 at 14:42
You should read some material about server-side and client-side script execution. It will answer all your questions. — Kevin Kopf, Feb 03 '16 at 14:42
What you try is not a nice way. If you want to call the result of some PHP code trough javascript use `AJAX` zotteke ;) — online Thomas, Feb 03 '16 at 14:42
Oh right, i'm sorry. that's right i completely forgot about that. Thanks everyone — Robbe Dillen, Feb 03 '16 at 14:47

Franz Gleichmann · Accepted Answer · 2016-02-03T18:07:46.070

It seems you need some clarification how PHP and JS work.

a) PHP-code is executed on the server-side. all of it. and nothing else

b) The output, completely free of PHP, is sent to the browser

c) JS-code is executed on the client-side. all of it. and nothing else

If you use JS to write PHP-code, it only happens inside the browser, which doesn't know what to do with it. and long after every bit of PHP-execution. You do NOT write anything back to the server with this.

what you CAN do is to do an AJAX-request to a specific PHP file that returns your desired output. but you can't just mix JS and PHP like that. it just doesn't work.

edit: in response to your edit about how to solve the problem without using AJAX

to put it simply: not at all. you have to get the data from the server, the best way to do this is AJAX (it was made for this and nothing else) and on the server you have to generate the data somehow. and the cleanest way is a new file.

score 3 · Answer 2 · answered Feb 03 '16 at 14:45

it doesn't recognise it as php code but just as a string

That's because it is a string:

"&lt?php include_once('resources/UberGallery.php'); $gallery = UberGallery::init()->createGallery('img/gallerij/'); ?&gt"

PHP doesn't run in the browser, it runs on the server. By the time the page is delivered to the browser, the PHP code has executed and completed and produced its output. PHP is no longer involved after that point.

If you want to execute code client-side, that's what JavaScript is for. If you need code to execute server-side, the browser will have to make a request to the server to make that happen. A page load, a form post, AJAX, etc. They all take the form of an HTTP request (potentially with some data sent to the server) which invokes a PHP script and receives that script's output as the response.

score 0 · Answer 3 · answered Feb 03 '16 at 20:13

You could do what you are trying to do without ajax. You just have to create a hidden <section> that contains the php code (which you have to do on the server-side before it gets sent to the browser). And then in the browser, use jquery to get the contents from the hidden <section> (or just swap the sections)

Here is an example:

Server-side PHP:

<body>  
    <section class="werkvenster">
        <img src="img/website/icon_grid.png" height="30px" class="grid_icon">
        <div class="galerij" id="galerij">

        </div>
        <button class="omlaag" id="galerij_knop">Terug</button>
        <button class="omhoog" id="galerij_knop">Verder</button>
    </section>
    <section id="hiddenStuff" style="display:none">
        <?php include_once('resources/UberGallery.php'); $gallery = UberGallery::init()->createGallery('img/gallerij/'); ?>
    </section>
</body>

jQuery:

$(document).ready(function(){
$("img.grid_icon").click(function() {
        $(".werkvenster").html($("#hiddenStuff").html());
    })
});

Changed php code with $(#selector).html doesn't execute,

3 Answers3