Print into html with jQuery and php

Question

I have this code to show some html from a db :

$("#menuOverlay").append('<?php include('aggiungiPaginaComp.php');?>');

It's working, the source file from the browser :

$("#menuOverlay").append('<form id="aggiungiPagina"
name="aggiungiPagina"
action="script/aggiungiPagina.php"
method="post">

<tablestyle="width:100%;">
    <tr>
        <td>NomePagina</td>
        <td><inputsize="30"
            maxlength="30"
            placeholder="Inseriscinomepagina"
            autofocus
            required
            type="text"
            name="nomePagina"
            id="nomePagina"></td>
    </tr>
    <tr>
        <td>Descrizione</td>
        <td><inputsize="50"
            maxlength="200"
            placeholder="Inseriscidescrizione"
            required
            type="text"
            name="descrizione"
            id="descrizione"></td>
    </tr>

</table>
<divid="scrisciaBtnForm">
    <inputclass="btnMenu"type="submit"value="invia"/>
</div>
</form>');

But the div #menuOverlay is blank.. with :

$("#menuOverlay").append('<Button> ciao </Button>');

works, why? sorry for bad english.

Why are you appending contents like that instead of just rendering it with php? — PeeHaa, Oct 17 '15 at 18:34
One thing that I can spot in the first line is that you're using single quotes inside of single quotes. You'd need to escape those or use double quotes inside of the single quotes instead. — Craig van Tonder, Oct 17 '15 at 18:35
I believe it's about the *new lines* in string. Normally, you'll get an error in console. — Artur Filipiak, Oct 17 '15 at 18:38
@IndigoIdentity Because will execute stuff in a whole different environment. — Quentin Roy, Oct 17 '15 at 18:38
i have repleace the single quotes : $("#menuOverlay").append(""); but don't works anyway.. — Alessandro Zago, Oct 17 '15 at 18:39
@AlessandroZago Sorry, I do not think that this was the solution but just an oddity, see here: http://stackoverflow.com/questions/242813/when-to-use-double-or-single-quotes-in-javascript — Craig van Tonder, Oct 17 '15 at 18:40
the console error : Uncaught SyntaxError: Unexpected token ILLEGAL — Alessandro Zago, Oct 17 '15 at 18:42
@QuentinRoy Yes but he is appending a string... Is `''''` syntactically correct in this case? — Craig van Tonder, Oct 17 '15 at 18:43
It is an invalid javascript string without escaping new lines. — charlietfl, Oct 17 '15 at 18:44
@IndigoIdentity The php code will be executed whatever is around it and will replace it anyway. — Quentin Roy, Oct 17 '15 at 18:45
The content of the div will change how? What you are currently doing is not changing anything. It's static because you you a php include — PeeHaa, Oct 17 '15 at 18:50
now works, the problem is the "new line" \ so i have add a \ at the and of every line — Alessandro Zago, Oct 17 '15 at 18:58
@PeeHaa I think he means that the insertion may not be performed after the page loading but later depending on what the user does. — Quentin Roy, Oct 17 '15 at 19:03
@AlessandroZago Add an answer if you have been able to fix it. — Quentin Roy, Oct 17 '15 at 19:06

Johannes Jander · Answer 1 · 2016-02-17T21:06:01.890

For once, you have a lot of invalid HTML, things like <tablestyle="width:100%;"> - I assume that somehow you have lost a lot of spaces in tags (maybe due to a RegEx?) which destroys the HTML you are trying to insert.

And you can't just have multiline strings in JS. You need to either append a \ at every newline or replace \n to make it a string concatenation:

$("#menuOverlay").append('<form id="aggiungiPagina" '+
'name="aggiungiPagina" '+
'action="script/aggiungiPagina.php" '+
'method="post"> '+
' '+
'<table style="width:100%;"> '+
'    <tr> '+
'        <td>NomePagina</td> '+
'        <td><input size="30" '+
'            maxlength="30" '+
'            placeholder="Inseriscinomepagina" '+
'            autofocus '+
'            required '+
'            type="text" '+
'            name="nomePagina" '+
'            id="nomePagina"></td> '+
'    </tr> '+
'    <tr> '+
'        <td>Descrizione</td> '+
'        <td><input size="50" '+
'            maxlength="200" '+
'            placeholder="Inseriscidescrizione" '+
'            required '+
'            type="text" '+
'            name="descrizione" '+
'            id="descrizione"></td> '+
'    </tr> '+
' '+
'</table> '+
'<div id="scrisciaBtnForm"> '+
'    <input class="btnMenu" type="submit" value="invia"/> '+
'</div> '+
'</form>');

See here: https://jsbin.com/vidajohevi/edit?html,js,output

score 0 · Answer 2 · answered Feb 17 '16 at 20:05

You should HTML encode the page in PHP (so your double quotes wont cause errors) and then html decode it in JS. If your using jQuery this should work:

String.prototype.htmlDecode = function(){
  return $('<div/>').html(this).text();
};

$("#menuOverlay").append("<?php
    ob_start();
    include('aggiungiPaginaComp.php');
    $page = ob_get_clean();
    echo htmlentities($page);
?>".htmlDecode());

score 0 · Answer 3 · answered Feb 17 '16 at 20:07

This:

 <tablestyle="width:100%;">

should be:

<table style="width:100%;">

Similarly, this:

<divid="scrisciaBtnForm">

should be:

<div id="scrisciaBtnForm">

Lastly, remove all new lines in aggiungiPaginaComp.php. Javascript is going to have a problem with new lines when you use it in this manner.

Print into html with jQuery and php

3 Answers3