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

Question

Problem no 1 Why my table do not align?

enter image description here

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

enter image description here

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>';

}

bondythegreat · Accepted Answer · 2012-09-13 02:10:52Z

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

answered Sep 13, 2012 at 2:10

bondythegreat

1,40912 silver badges21 bronze badges

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

2 Comments

Brained Washed Over a year ago

i just only use this css #listWarriors tr, #listWarrior td { border:1px solid black; }

bondythegreat Over a year ago

still there are many possibilities, the best thing is to check with firebug or similar tools and inspect the element..my best guess is still css (or, invalid html due to backend generated code). try make css #listWarriors {width: 600px;} or something like that..

Andres Gallo · Accepted Answer · 2012-09-13 04:20:06Z

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);
            }
        });
    }

edited Sep 13, 2012 at 4:20

answered Sep 13, 2012 at 2:18

Andres Gallo

6816 silver badges14 bronze badges

6 Comments

Brained Washed Over a year ago

every user clicks the warrior list it will display result

Andres Gallo Over a year ago

Explain what you are trying to do exactly, and how you picture it would be best to get the job done. JSON would work great if you are trying to get multiple warriors at the same time. The benefits of this is you append items to the DOM once, and do less ajax requests. So is this what you are trying to achieve, or is it still necessary to get the warriors one at a time

Andres Gallo Over a year ago

Oo in that case I was wrong. You only need one at a time. I will add how to use JSON in my answer as well in case it can help you solve other issues

Brained Washed Over a year ago

I want to get all the warriors from my db at same time not one at a time

Andres Gallo Over a year ago

Hey man, I modified the javascript bit. If the alert shows up can you paste the begining of the value being alerted. I am pretty sure it should be returning some data, but the iteration may be wrong on my code since its an object, and im iterating it as an array. The alerted code should help.

|

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related