PHP Ajax echo HTML table

Question

I have a problem outputting some data from PHP to HTML as a table. When I hit submit, the output is not really formatted into a HTML table. Code has been updated so everything works perfectly now. enter image description here

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html401/loose.dtd">
<html>
    <head>
        <title>AJAX Database</title>
    </head>
    <body>
        Type in the location <input type="text" id="name">
        <input type="submit" id="name-submit" value="Check Inventory">
        <div id="name-data"></div>

        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <script src="js/global.js"></script>
    </body>
</html>

The <div id="name-data"></div> is like a placeholder for all the outputs after hitting submit button.
Here is PHP code. I tried to add HTML tags outside of PHP code but it won't work.

<?php
    // '.post' could be '.get' here but global.js has to be the same, .post is faster
    if(isset($_POST['name']) === true && empty($_POST['name']) === false) {
        require '../db/connect.php';
        // id, location, quantity, count_sheet, remark
        $query = mysql_query("
            SELECT `sheet0_100`.`id`, `sheet0_100`.`location`, 
                `sheet0_100`.`quantity`, `sheet0_100`.`count_sheet`, `sheet0_100`.`remark`
            FROM `sheet0_100`
            WHERE `sheet0_100`.`location` = '" . mysql_real_escape_string(trim($_POST['name'])) . "'
        ");
        // echo (mysql_num_rows($query) !== 0) ? mysql_fetch_row($query) : 'Location not found..';
        if(mysql_num_rows($query) !== 0) {
            // Find out how many rows are available
            $rowsFound = @ mysql_num_rows($query);

            // Report how many rows were found
            echo "{$rowsFound} records found matching your criteria. \n";

            echo "There are $rowsFound items in this location.\n" . "\xA";
            echo "\n<table>";
            // Display a table contains all the items
            while ($rowsFound = mysql_fetch_row($query)) {
                // ... start a TABLE row ...
                echo "\n<tr>";
                // ... and print out each of the attributes in that row as a
                // separate TD (Table Data).
                foreach($rowsFound as $data)
                    echo "\n\t<td> {$data} </td>";
                    // Finish the row
                    echo "\n</tr>";
            }
            // Then, finish the table
            echo "</table>";
        }
        else {
            echo "Location not found..";
        }


    }
?>

My JS file,

$('input#name-submit').on('click', function() {
    var name = $('input#name').val();
    if ($.trim(name) != '') {
        // '.post' could be '.get' here but name.php has to be the same, .post is faster
        $.post('ajax/name.php', {name: name}, function(data) {
            // $('div#name-data').text(data);
            // jQuery('#name-data').html(RESPONSE);
            $('div#name-data').html(data);
        });
    }
});

How are you populating the name-data div? Could you post the JavaScript code? Your HTML is being escaped, and there can be lots of reasons for that. — Martin Denk
– Martin Denk, Commented Oct 2, 2014 at 20:53
Code has been updated, everything works fine. I figured out myself. — Aaron Liu
– Aaron Liu, Commented Mar 31, 2016 at 6:36

Dewstar · Accepted Answer · 2014-10-02 20:55:31Z

3

Use jQuery('#name-data').html(RESPONSE);

see: http://api.jquery.com/html/

answered Oct 2, 2014 at 20:55

Dewstar

2111 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dewstar Over a year ago

yes in your js file where you insert the data into the #name-data div! Just replace the .text() or what ever you're using with the .html()

Aaron Liu Over a year ago

this is what I've changed, but this ends up with not giving any responses at all on my webpage.

Aaron Liu Over a year ago

$.post('ajax/name.php', {name: name}, function(data) { 			// $('div#name-data').text(data); 			jQuery('#name-data').html(RESPONSE); 		});

Dewstar Over a year ago

Change the ".html(RESPONSE)" to ".html(data)". RESPONSE was only a placeholder for the variable you use. and it should work (I didn't know the content of your javascript file)

Aaron Liu Over a year ago

sorry you are correct, should be $('div#name-data').html(data);

Sebastien B. · Accepted Answer · 2014-10-02 21:01:45Z

-1

if you want to use php you should store the text in a variable like so :

if(mysql_num_rows($query) !== 0) {
        // Find out how many rows are available
        $rowsFound = @ mysql_num_rows($query);

        // Report how many rows were found
        echo "{$rowsFound} records found matching your criteria. \n";

        echo "There are $rowsFound items in this location.\n" . "\xA";
        $table = "<table>";
        // Display a table contains all the items
        while ($rowsFound = mysql_fetch_row($query)) {
            // ... start a TABLE row ...
             $table .="<tr>";
            // ... and print out each of the attributes in that row as a
            // separate TD (Table Data).
            foreach($rowsFound as $data)
                 $table .= "<td> {$data} </td>";
                // Finish the row
                 $table .= "</tr>";
        }
        // Then, finish the table
         $table .= "</table>";
         echo $table;
    }
    else {
        echo "Location not found..";
    }

answered Oct 2, 2014 at 21:01

Sebastien B.

4913 silver badges10 bronze badges

1 Comment

Martin Denk Over a year ago

In the end, this makes no difference at all really.

Collectives™ on Stack Overflow

PHP Ajax echo HTML table

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related