The client initiates an AJAX call via jQuery. Upon fetching data from the database, I return the response which includes the application of numerous classes and styles to various HTML tags. Unfortunately, this process results in code that appears unsightly.
while (my @data = $statement->fetchrow_array())
{
print "<li class='productWrap $data[7]' style='height:200px; width:150px;'>
<center>
<div class=\"productImageWrap\" id=\"productImageWrapID_$data[0]\">
<img src=$data[5] width='75' height='75'' />
</div>
<div>
<div style='font-size: 11px; font-family: \"Verdana\"; '> $data[6] $data[1] $data[2] </div>
<b>
<span> <strike> $data[3] </strike> $data[4] </span>
<a href='#' id=\"featuredProduct_$data[0]\" onclick=\"adjust_menu(this.id); simpleCart.add('name=$data[6] $data[1] $data[2]', 'price=$data[4]','image=$data[5]'); return false;\">
<img src='images/add-to-basket2.gif' alt='Add To Basket' width='111' height='32' id='featuredProduct+$data[0]' />
</a>
</b>
</div>
</center>
</li>";
}
Is there a way to avoid this cumbersome process? Perhaps applying the classes and styles on the client side after receiving the response could be a better solution.