Page does not load after calling PHP function form Javascript

Question

When I call a PHP function from a javascript function (located in an .js external file), the webpage refreshes and appears to stop loading at the PHP function.

function completePurchase(){

    //check if perosn signed in
    if (signedIn){
    alert("Purchase Complete! Total : " + total);
    //Upadte database - call PHP function in MainPage2 
    document.write('<?php echo upadtePurchaseToDB();?>');

    }
}

The PHP function resides in the PHP page enclosed within PHP tags:

//PHP to handle data when purchase button is pressed 
  function upadtePurchaseToDB(){

    echo "PHP CALLAED AS PURCHASE BUTTON PRESSED";

};

The idea is to update a database when the PHP function is called.

However when called the page refreshes and remains blank. In the console if i navigate to the 'Element' tab I can see the PHP call:

Not sure what the underlying issue is wether its how I have called the PHP function using JS or where the PHP function is placed.

@Mike'Pomax'Kamermans you should be able to reopen if you want to cover the `document.write()` issue. — Jay Blanchard, Apr 27 '20 at 17:58
@Mike'Pomax'Kamermans you might want to consider https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice too — Jay Blanchard, Apr 27 '20 at 18:00
https://stackoverflow.com/questions/2559189/what-damage-is-done-by-document-write/2559286 — Jay Blanchard, Apr 27 '20 at 18:03
As a question with two really fundamental problems, it's better to address all the problems, rather than closing it as if there's only one. (because even if they fix that problem, they'll still be stuck on the other fundamental problem). — Mike 'Pomax' Kamermans, Apr 27 '20 at 18:08
We could've added all of the links in the closure of the question @Mike'Pomax'Kamermans as all of the points are covered in other posts. C'est la vie. I took it as an opportunity to learn a little more about what you had to say. — Jay Blanchard, Apr 27 '20 at 18:11

Mike 'Pomax' Kamermans · Answer 1 · 2020-05-04T00:33:20.567

One problem is that you're trying to make JS genarate PHP code, and then expecting that to work: it can't. PHP runs on the server, and only "does things" when asked for a page by the browser: PHP generates source code for the browser to deal with. That's all it does.

When the browser has the page, JS kicks in, and PHP is no longer anywhere to be found: see Difference between Javascript and PHP for more information on this, and I can strongly recommend reading up on that.

However, the real problem that you're describing (your page seemingly reloading but dying on the PHP code) is one caused by your use of document.write(), which absolute doesn't do what you think it does, and you should not be using it in modern code.

document.write is one of the earliest functions in JS and is super low level: it does not write text into a webpage, it writes bytes into the document bytestream so that the document parser can pick up data from the bytestream at the same time and parse it into a page tree.

While the page is still being processed, that seems safe: document.write will simply inject bytes into the open bytestream, and the parser will parse that, and all will seem well. However, once the page tree is done and the document bytestream gets closed, things start to go very, very wrong:

Any call to document.write will try to write into the open bytestream, and if it's closed, document.write will simply open a bytestream: now you have an empty document bytestream. And because the document parser sees an open bytestream, it start building a page tree based on what's in it, and now your page is gone because that's what you told the browser to do.

It's also not the case that it "appears to stop loading at the PHP function", what actually happens is that you've told the page parser that the new page code to form a page tree off of is the byte sequence <?php echo upadtePurchaseToDB();?>. So the parser looks at that, sees <, and so knows that what comes after that will be a tag, because that's how HTML works. It then sees ? and goes "Error: this HTML is invalid HTML" and stops.

So the bottom line here is to read up on where and when PHP runs, vs where and when JS runs, but arguably even more importantly: never use document.write because it doesn't do what you think, at all.

OK thanks got that now, was a bit thrown by some of the answers in this post : https://stackoverflow.com/questions/15757750/how-can-i-call-php-functions-by-javascript — dancingbush, Apr 27 '20 at 18:11
Those answers involve making the browser get new "pages" (really, just data) from PHP by using JS to perform a URL call. — Mike 'Pomax' Kamermans, Apr 27 '20 at 18:13

Page does not load after calling PHP function form Javascript

1 Answers1