CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sanne Faurholt
Sanne Faurholt

Reputation: 53

Dynamically added html do not get styled

I want to display a list of offers as styled radio buttons and I want them listed in a table with 3 offers in every row. I style them in a css file like this:

input[type=radio].offer + label {
display:inline-block;
margin:-2px;
padding: 15px 12px;
margin-bottom: 0;

line-height: 20px;
width: 175px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f0f0f0;

border: 1px solid #ccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #b3b3b3;
}

input[type=radio].offer:hover + label {
background-color: #f8ad51;
}

My asp page is like this:

sql1 = "SELECT * FROM company,prices WHERE companyId = company_id"
Set rs1 = Connect.Execute(sql1)
if NOT rs1.eof then
   count = 1%>
   <table border="0" cellpadding="2" cellspacing="10" width="600">
     <tr>
       <%
       do until rs1.eof
          price = a lot of calculations.......%>
          <td><input type="radio" id="offer<%=count%>" name="offer" value="<%=rs1("companyId")%>" class="offer" onClick="this.form.submit1.disabled = !this.checked;">
          <label for="offer<%=count%>"><%=rs1("navn")%><br><font size="1"><%=rs1("city")%></font><br><font size="4"><%=price%></font></label>
        </td>
        <%
        if count MOD 3 = 0 then%>
           </tr><tr>
        <%end if
        count = count + 1
        rs1.MoveNext
     loop%>
     </tr>
   </table> 
<%end if%>

Everything is working fine and my list is looking ok, but now I want the list to be created in $(document).ready So I now have this table:

<table id="tbl_result" border="0" cellpadding="0" cellspacing="0" width="380"></table>

I do a lot of javascript stuff and end up with this for every offer I find:

final_list+='<td>';
final_list+='<input type="radio" id="offer'+data.id+'" name="offer" value="'+data.id+' class="offer" onClick="this.form.submit1.disabled = !this.checked;">';
final_list+='<label for="offer'+data.id+'">'+data.cmp+'<br><font size="1">'+besked+'</font><br><font size="4">'+data.price+' kr.'+'</font></label>';
final_list+='</td>';
if ((finalList_count % 3) == 0) {
   final_list+='</tr><tr>';
}
finalList_count = finalList_count + 1

And finally I add it to the page like this:

$("#tbl_result").html(final_list);
$("#tbl_result").show();

My problem is that my new offers dont get styled by my css file and I dont know how I can do that. Anybody that can help me out here?

Upvotes: 0

Views: 46

Answers (1)

Taleeb
Taleeb

Reputation: 1919

You are missing a double quote " before you class attribute while creating final_list. So instead of value="'+data.id+' class="offer" you need to use value="'+data.id+'" class="offer" (note a " before class).

So the first line of final_list becomes:

final_list += '<input type="radio" id="offer' + data.id + '" name="offer" value="' + data.id + '" class="offer" onClick="this.form.submit1.disabled = !this.checked;">';

See this jsFiddle for a working example.

Upvotes: 1

Related Questions