Slow performance using trigger (" create") large HTML table inserted in DOM tbody
I have a chuck of html generated on the server (adviced by irc #jquery). The html is generated in a wink.
When I render it with innerHTML it was also real fast displayed.
When I have
option_detail_rows.append (field.html);
//option_detail_rows.trigger ("create");
The trigger create makes it real slow wait for around 10 seconds and browser freezes.
How to accelerate this? Target is mobile device. The HTML is a large table 110 rows with 8 columns.
When I generated the string at client the performance was the same.
So how to speed things up. The html string details here after.
$lchecked = ($r["objectID"] == $objectID);
$f_propertyID = $r["propertyID"];
$f_propertytext = $r["propertytext"];
$f_number = $r["number"];
$f_mandatory = $r["mandatory"];
$f_price = $r["price"];
$f_priceperperiod = $r["priceperperiod"];
$f_priceperperson = $r["priceperperson"];
$f_priceperweek = $r["priceperweek"];
$f_priceperday = $r["priceperday"];
$keyID = $f_propertyID;
$html .= "<tr id='" . $keyID . "'>";
$html .= "<td><div data-role='fieldcontain' style='text-align:left'>". $f_propertytext ."</div></td>";
if ($lchecked) {
$cchecked = " checked ";
} else {
$cchecked = "";
}
$cid = "\"" . $keyID . "_applicable\"";
$html .= "<td><div data-role=\"fieldcontain\">";
$html .= "<fieldset data-role=\"controlgroup\">";
$html .= "<input id=" . $cid . $cchecked . " type=\"checkbox\" name=\"checkbox-1\" class=\"custom\" />";
$html .= "<label for=" . $cid . "></label>";
$html .= "</fieldset>";
$html .= "</div></td>";
$inputnumber = "'inputnumber_" . $keyID . "'";
$html .= "<td><div data-role='fieldcontain' style='text-align:left'>";
$html .= "<input id=" . $inputnumber . " type=\"number\" data-mini=\"true\" name=" . $f_number . " value=". $f_number . ">";
$html .= "</div>";
$html .= "</td>";
$cid = "\"" . $keyID . "_mandatory\"";
if ($f_mandatory == 1) {
$cchecked = " checked ";
} else {
$cchecked = "";
}
$html .= "<td><div data-role=\"fieldcontain\">";
$html .= "<fieldset data-role=\"controlgroup\">";
$html .= "<input id=" . $cid . $cchecked . " type=\"checkbox\" name=\"checkbox-1\" class=\"custom\" />";
$html .= "<label for=" . $cid . "></label>";
$html .= "</fieldset>";
$html .= "</div></td>";
$inputprice = "'inputprice_" . $keyID . "'";
$html .= "<td><div data-role='fieldcontain' style='text-align:left'>";
$html .= "<input id=" . $inputprice . " type=\"number\" data-mini=\"true\" name=" . $inputprice . " value=". $f_price . ">";
$html .= "</div>";
$html .= "</td>";
$cid = "\"" . $keyID . "_priceperperiod\"";
if ($f_priceperperiod == 1) {
$cchecked = " checked ";
} else {
$cchecked = "";
}
$html .= "<td><div data-role=\"fieldcontain\">";
$html .= "<fieldset data-role=\"controlgroup\">";
$html .= "<input id=" . $cid . $cchecked . " type=\"checkbox\" name=\"checkbox-1\" class=\"custom\" />";
$html .= "<label for=" . $cid . "></label>";
$html .= "</fieldset>";
$html .= "</div></td>";
if ($f_priceperweek == 1) {
$cchecked = " checked ";
} else {
$cchecked = "";
}
$cid = "\"" . $keyID . "_priceperweek\"";
$html .= "<td><div data-role=\"fieldcontain\">";
$html .= "<fieldset data-role=\"controlgroup\">";
$html .= "<input id=" . $cid . $cchecked . " type=\"checkbox\" name=\"checkbox-1\" class=\"custom\" />";
$html .= "<label for=" . $cid . "></label>";
$html .= "</fieldset>";
$html .= "</div></td>";
if ($f_priceperday == 1) {
$cchecked = " checked ";
} else {
$cchecked = "";
}
$cid = "\"" . $keyID . "_priceperday\"";
$html .= "<td><div data-role=\"fieldcontain\">";
$html .= "<fieldset data-role=\"controlgroup\">";
$html .= "<input id=" . $cid . $cchecked . " type=\"checkbox\" name=\"checkbox-1\" class=\"custom\" />";
$html .= "<label for=" . $cid . "></label>";
$html .= "</fieldset>";
$html .= "</div></td>";
if ($f_priceperperson == 1) {
$cchecked = " checked ";
} else {
$cchecked = "";
}
$cid = "\"" . $keyID . "_priceperperson\"";
$html .= "<td><div data-role=\"fieldcontain\">";
$html .= "<fieldset data-role=\"controlgroup\">";
$html .= "<input id=" . $cid . $cchecked . " type=\"checkbox\" name=\"checkbox-1\" class=\"custom\" />";
$html .= "<label for=" . $cid . "></label>";
$html .= "</fieldset>";
$html .= "</div></td>";
}
echo "[".json_encode (array ('html' => $html) )."]";
Landing DOM insert:
<div id='optionadddetails'>
<div id="wait_a_moment" style='display:none;'><p>Even geduld de data wordt geladen</p></div>
<table data-role="table" id="option_table" data-mode="reflow" class="ui-responsive table-stroke" >
<thead>
<tr>
<th style='text-align:center' valign='center' data-priority="persist">Kenmerk</th>
<th style='text-align:center' valign='center' data-priority="persist">Van toepassing</th>
<th style='text-align:center' valign='center' data-priority="1">Aantal</th>
<th style='text-align:center' valign='center' data-priority="2">Verplicht</th>
<th style='text-align:center' valign='center' data-priority="3">Prijs</th>
<th style='text-align:center' valign='center' data-priority="4">Prijs per periode</th>
<th style='text-align:center' valign='center' data-priority="5">Prijs per week</th>
<th style='text-align:center' valign='center' data-priority="6">Prijs per dag</th>
<th style='text-align:center' valign='center' data-priority="6">Prijs per persoon</th>
</tr>
</thead>
<tbody id='option_detail_rows'></tbody><!-- refreshed by json call-->
</table>
</div>
John