Why I am having problems with my output using html/jquery/php

Question

Problem no 1 Why my table do not align?

Problem no 2 Why everytime I click my Warrior List at the nav the output goes like this

Here's my js

function getWarriors() {
        $.ajax({
            url: 'display_warrior.php',
            success: function(data) {
                $('#listWarriors').append(data);
            }
        });
    }   

Here's my html

<article id="listWarriors">
    <h1>Warrior List</h1>
    <table>
        <tr>
            <th colspan="2">Warriors</th>
        </tr>
        <tr>
            <td>Warrior Name</td>
            <td>Warrior Type</td>
        </tr>

    </table>
</article>

And heres my php

foreach($result as $names){

$warriors['wname'] = $names['warrior_name'];
$warriors['wtype'] = $names['warrior_type'];

echo '<tr>
<td>'.$warriors['wname'].'</td>
<td>'.$warriors['wtype'].'</td>
</tr>';

}

Answer 1

The way you have your jQuery, you are appending the content to the '' tag, and not to the table.

This is what happens when each item is appended, with the way its setup (I added a thead tag by the way. Will come in handy once you start styling your table)

This is the output when things are appended, and why its rendering wrong.

<article id="listWarriors">
    <h1>Warrior List</h1>
    <table>
        <thead>
            <tr>
                <th colspan="2">Warriors</th>
            </tr>
            <tr>
                <td>Warrior Name</td>
                <td>Warrior Type</td>
            </tr>
        </thead>

    </table>

    <tr>
         <td>the wname</td>
         <td>the wtype</td>
    </tr>
</article>

With that said modify your jquery to

$('#listWarriors table').append(data);

By the way, How many items are you wanting to append. If you will make multiple ajax calls and append things one at a time, I would recommend getting the data through JSON. Let me know, if I can help

AS DISCUSSED IN COMMENTS SINCE YOU WANT TO GET MULTIPLE ITEMS JSON IS THE WAY TO GO. You can pass data using JSON this way

**The php (Im sure you already have the query already done but here it is just in case) **

// Make a MySQL Connection
$query = "SELECT * FROM example";//Your query to get warriors from db 

$result = mysql_query($query) or die(mysql_error());

$myWarriorsArray = array();//Where you will store your warriors

while($row = mysql_fetch_array($result)){
     $myWarriorsArray[] = $row;

     //This stores all keys for each iteration
     /*//This is teh same as the following commented code
     $myWarriorArray['warrior_name'] = row['warrior_name'];
     $myWarriorArray['warrior_type'] = row['warrior_type'];
     */
}

echo json_encode($myWarriorsArray);//This will return a json object to your ajax call

The Javascript

function getWarriors() {
        $.ajax({
            url: 'display_warrior.php',
            dataType : 'json',
            success: function(data) {
                var toAppend = '';
                alert(data);
                //console.log(data);//Uncomment this to see the returned json data in browser console
                for(var i=0;i<data.length;i++){//Loop through each warrior
                     var warrior = data[i];
                     toAppend += '<tr>';
                     toAppend += '<td>'+data[i]['warrior_name']+'</td>';
                     toAppend += '<td>'+data[i]['warrior_type']+'</td>';
                     toAppend += '</tr>';
                }
                $('#listWarriors table').append(toAppend);
            }
        });
    } 

Answer 2

the result is appended under the </table> try change your ajax success to :

$('#listWarriors table').append(data);

for number2, im affraid it's truncated by the container (#listWarriors).. check your css of that id if the width is fixed or not...make it wider as you please