Using AJAX and PHP to write HTML

Question

I have a webpage that uses the Javascript code below on a timer to execute a PHP script. That PHP script parses an XML file and extracts data, returns that data via "echo", which replaces the "replacement" div in the HTML page.

This is not working. If I have the PHP script return just basic text, or some simple HTML everything works fine. When I try to have it send back HTML tables, or even a row that is to be added into the table in the web page, it just simply doesn't appear and the div is left there with no replacement text. I need to add an HTML table or row to table from a PHP script. How can I do this?

Help is greatly appreciated!!

function completeTable() {

  if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  } else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("replacement").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","php-parser.php",true);
  xmlhttp.send();
}

Very inexperienced and not sure how I would do it. I have written a lot of PHP and it works with the databases that I am working with very easily. I'm open to any recommendations. I just don't want to have the entire page refresh when I retrieve data from the PHP script. — platform115, Sep 17 '14 at 14:12
Try to use the browser network inspector to see whether the page is requested and what does it contain — Jacopofar, Sep 17 '14 at 14:15
Are you using Chrome or Firefox to debug the JavaScript? Both have built in tools for debugging. I recommend Firebug for Firefox. — b_dubb, Sep 17 '14 at 14:15
the reason why @b_dubb suggests using jquery is because your code would be `$('#replacement').load('php-parser.php')`. Thats it. its not as scary as it sounds :) — andrew, Sep 17 '14 at 14:15
You might need to escape special characters in your PHP returned HTML. single and double quotes might break your JavaScript. Test this by adding some special characters to the plain text PHP response and test if that causes your JavaScript to fail. — b_dubb, Sep 17 '14 at 14:18
what is the console.log for xmlhttp.responseText when a table is returned? — michael.schuett, Sep 17 '14 at 14:30
My advice, look into JSON and AJAX requests. Companies such as Google and Facebook are moving over to JSON because it's easier to ready, write, and parse. Also, DOM modifications or additions should be done using javascript/jQuery, not PHP. Sure you can echo out the compiled data, but wouldn't you rather pass the data you need to your front-end, then decide what to do with it from there, such as build a table element and add rows/columns. — Keith V, Sep 17 '14 at 14:31
Thanks for all the feedback. I just managed to get a jquery statement to call the PHP file as suggested above. Strangely though similar problem - the text all comes through on the page but the HTML formatting is totally missing. I will look into debugging this and JSON. Right now I'm trying to get this up quick and dirty. I have plenty of time to rebuild after it's up and running and have people off my back. Any thoughts on why the table html tags don't make it through? There are no double quotes. — platform115, Sep 17 '14 at 14:35
"Is there a reason you aren't using jQuery?" - there is so much wrong with this comment. — symcbean, Sep 17 '14 at 14:36
If anyone can give me a sample of how to use jquery to build a table with a row and a couple of columns using data from a PHP script I can probably make it all work. But the data parsed by the PHP script will need to determine for example the highlighting of a table row or not. — platform115, Sep 17 '14 at 14:40
http://stackoverflow.com/questions/17724017/using-jquery-to-build-table-rows-from-ajax-responsejson — andrew, Sep 17 '14 at 14:46
Should I just delete this question? Seems I confused a lot of people via my own ignorance. I want to run a PHP script that will either return HTML code that will be added to the doc without reloading or return the data and have that determine how many rows are added to a table, etc. — platform115, Sep 17 '14 at 14:50
Thanks everyone. Sorry for being so uninformed. I'm going back to square one to try and do this the right way. I'm going to run with what Keith posted up for now. — platform115, Sep 17 '14 at 15:14

score 0 · Answer 1 · answered Sep 17 '14 at 14:35

0

I would expect what you've shown us should work. That it works as expected for simple static strings confirms this. Hence there's only really 2 possibilities. Eithere there something going wrong ni the javascript, or there's somethin going wrong in the PHP.

I would start by pointing a browser at the PHP endpoint and checking that it is returning what you expect. Then verifying that this is a well-formed fragment. Then if nothng obviously wrong, pipe this into a file and replace the output of the script (but not any other part of what the script does) with the file contents.

BTW, you may get a clearer picture of what's happenning if you send the responseText to something which is not expecting well formed HTML to be presented - such as an alert dialog or textarea.

answered Sep 17 '14 at 14:35

symcbean

47,736
6
59
94

I ran the PHP script from command line and output is perfect. I placed the output in a text file and tried to just replace the text that way, but got the same result as before where the text shows up and some simple HTML but none of the formatting. Also the text shows up in the header of the table as opposed to where the replacement div is which is a few rows into the body. – platform115 Sep 17 '14 at 14:47
Last time you said "it just simply doesn't appear" now you're saying it shows up in the wrong lpace - these are very different outcomes. Sounds like you are injecting the HTML in the wrong place. – symcbean Sep 17 '14 at 14:53
My apologies for the confusion. The text always shows up, and so does an image that requires some HTML code. However, the table row tags are not there, and the text shows up in the wrong part of the table. Maybe I need to explicitly define where the table row should go somehow? I thought if I put the replacement div where I physically wanted the new code to go, it would simply be put there. Is that not the case? – platform115 Sep 17 '14 at 14:59
I don't think you can have a DIV inside a table unless it is nested inside a TD or TH - unless you are going to use CSS tables then you would need to append a TR element to the table rather than replacing the innerHTML. – symcbean Sep 18 '14 at 11:41

score 0 · Accepted Answer · answered Sep 17 '14 at 15:03

Here is an example of how you could do what you're attempting using jQuery and JSON. It will render much much faster on the front end. May have to play around with this a bit. Just figure out how to write the data coming from the database into a JSON structure, similar to I'm sure the xml you're creating, and set that on a cronJob of some sort to run your PHP gathering. The code below should build the table correctly. I wrote this by hand so you may have to play around with it a bit, and I don't know the data structure you're trying to pull in so I made some bs json.

JS

    function gatherContent(){
        var data = $.ajax('content.json');
        data = data.users
        var elementBlock = document.createElement("table");
        for(x = 0;x < data.length; x++){
        elementBlock.appendChild('<tr><td>'+data(x).name+'</td><td>'+data(x).address+'</td></tr>');
        }
        $('#replacement').html(elementBlock);
}

content.JSON

{
    "users": [
        {
            "name": "blah",
            "address": "more blah"
        },
        {
            "name": "blah",
            "address": "more blah"
        }
    ]
}

score -1 · Answer 3 · answered Sep 17 '14 at 14:15

-1

add html tags in the response like this

$response = '<table><tr><td>'.$value.'</td></tr></table>';

answered Sep 17 '14 at 14:15

Muhammad Farooq

1
2

@andrew I think everyone who posted this is confused. a javascript not a PHP question was asked. dubb saw a $ and saw jQuery and now everyone is confused. – michael.schuett Sep 17 '14 at 14:32

Using AJAX and PHP to write HTML

3 Answers3