Problem embedding <div class='rateit> on JS TABLE.append();

Sep 2, 2012 at 6:41 AM

I dont know if theres something wrong in my code but whe nI try to append the rateit DIV nothing appears but when I manually write the rateit DIV in the BODY it appears.

 

function add(id,skilldesc)
{
	var table = $('#lower');
        table.append("<tr id='" + id + "'><td><text>" + skilldesc + ":</text></td><td><div id='rateit10' class='rateit'></div></tr>");
}

<table id='lower'>
<tr>
<td width='40%'><h2 id='skillhead2'>Skills</h2></td><td width='15%'><h2 id='skillhead2'>Rating</h2></td><td width='35%'><h2 id='skillhead2'>Year of exp.</h2></td><td width='10%'><h2 id='skillhead2'>Top 5 Skills</h2></td>
</tr>
</table>

the idea here is there are plenty of skills listed on the page using checkbox now when I click one of those the page dynamically add a row on a 'lower' table. Now the problem is when a row is added dynamically only the 'skilldesc' column is displayed and the rateit DIV which is in the next column is empty. The purpose of using rateit is to rate the chosen skill from 1 to 5.

I hope someone will help me, I've been storming this problem for hours already. It caused me a hard headache.

 

Coordinator
Sep 2, 2012 at 3:21 PM

Hi,

 

After you append it, you should still initialize it:

function add(id,skilldesc)
{
	var table = $('#lower');
        table.append("<tr id='" + id + "'><td><text>" + skilldesc + ":</text></td><td><div id='rateit10' class='rateit'></div></tr>");
        table.find('.rateit').rateit();
}