JQuery - Load table and insert it with html()

Question

i want to load a html table in a div

The HTML-Code is loaded via:

$("#table_wrapper").hide();
$.get("<?echo base_url();?>schichtplan/employee_fields/"+plan_id+"true",function(data){
    $("#table_wrapper").html(data);
    $("#table_wrapper").show();
});

Data is validated via alert and looks like:

<table border= '0'cellpadding='4' cellspacing='0' class='mitarbeiter' /> 
<thead> 
<tr> 
<th>&nbsp</th><th><div id='plan_id:1;sort_id:1' class='edit_employee'>User1</div></th><th><div id='plan_id:1;sort_id:2' class='edit_employee'>User2</div></th></tr> 
</thead> 
<tbody> 
<tr> 
<td class='first'>Anstellung</td><td>&nbsp</td><td>&nbsp</td></tr> 
<tr> 
<td class='first'>Stundenlohn</td><td>&nbsp</td><td>&nbsp</td></tr> 
<tr> 
<td class='first'>Festlohn</td><td>&nbsp</td><td>&nbsp</td></tr> 
<tr> 
<td class='first'>Bonus</td><td>&nbsp</td><td>&nbsp</td></tr> 
<tr> 
<td class='first'>Kassenminus</td><td>&nbsp</td><td>&nbsp</td></tr> 
<tr> 
<td class='first'>Nachtzuschlag</td><td>&nbsp</td><td>&nbsp</td></tr> 
<tr> 
<td class='first'>Sonstiges</td><td>&nbsp</td><td>&nbsp</td></tr> 
</tbody> 
</table>

After the JQuery-Action the div looks like:

<div id="table_wrapper" style="display: block; "><table border="0" cellpadding="4" cellspacing="0" class="mitarbeiter"></table>

&nbsp;<div id="plan_id:1;sort_id:1" class="edit_employee">User1</div><div id="plan_id:1;sort_id:2" class="edit_employee">User2</div>



Anstellung&nbsp;&nbsp;

Stundenlohn&nbsp;&nbsp;

Festlohn&nbsp;&nbsp;

Bonus&nbsp;&nbsp;

Kassenminus&nbsp;&nbsp;

Nachtzuschlag&nbsp;&nbsp;

Sonstiges&nbsp;&nbsp;

</div>

Table-Code is generated with CodeIgniter.

I have no idea why the result looks like that

Some hint?

Thanks

have you inspected the content of the data variable that is returned by using breakpoint? — jcvandan
– jcvandan, Commented Sep 2, 2011 at 11:21
@McPepper I second that - use spans instead of divs, or even just add the classes to the <th> tag instead of wrapping contents — jcvandan
– jcvandan, Commented Sep 2, 2011 at 11:23
The data returned by .get seems to be ok. i checked it with alert etc... the div's in th are needed... — Jens
– Jens, Commented Sep 2, 2011 at 11:24
Unrelated to the issue, You can use .load() to get/post data and replace the contents of a selected set: see api.jquery.com/load — StuperUser
– StuperUser, Commented Sep 2, 2011 at 11:27

kirb · Accepted Answer · 2011-09-02 11:29:57Z

1

There is a slash at the end of the tag that starts the table. Only some tags can be closed with the slash, and if a tag isn't allowed to have the slash, it will be kept open for the rest of the page, which will make your html invalid. This is what it should look like:

<table border='0' cellpadding='4' cellspacing='0' class='mitarbeiter'>
    <thead>
        <!-- ... -->
    </thead>
    <tbody>
        <!-- ... -->
    </tbody>
</table>

answered Sep 2, 2011 at 11:29

kirb

2,0391 gold badge19 silver badges28 bronze badges

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

1 Comment

Jens Over a year ago

ahm... ok :) now i just want to bang my head against the next wall :) thanks so much

s.webbandit · Accepted Answer · 2011-09-02 11:22:20Z

0

It looks like your Table-Code is rendered NOT COMPLETELY LIKE HTML but table renders like normal view. Check is there any config option for Table-Code module to generate FULL HTML table.

Which method do you use to render table?

answered Sep 2, 2011 at 11:22

s.webbandit

17.2k17 gold badges60 silver badges83 bronze badges

1 Comment

Jens Over a year ago

the table is rendered with codeigniter $this->table->generate() i checked the loadurl and the data returned directly in my browser. Table is completely rendered

jcvandan · Accepted Answer · 2011-09-02 11:29:03Z

0

Just noticed - the table is self closed on the first line:

<table border= '0'cellpadding='4' cellspacing='0' class='mitarbeiter' />

Should be:

<table border= '0'cellpadding='4' cellspacing='0' class='mitarbeiter' >

I strongly suspect this is your problem sir.

answered Sep 2, 2011 at 11:29

jcvandan

14.4k19 gold badges69 silver badges106 bronze badges

1 Comment

Jens Over a year ago

ahm... ok :) now i just want to bang my head against the next wall :) thanks so much

Collectives™ on Stack Overflow

JQuery - Load table and insert it with html()

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related