Rotating Blockquote from Mysql DB C#

Question

Here's my DB

CREATE TABLE IF NOT EXISTS `comments` (
  `com_id` int(11) NOT NULL AUTO_INCREMENT,
  `com_name` varchar(500) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
  `com_content` text CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
  `com_website` varchar(500) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
  `com_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`com_id`)
)

Here's my Front End

<link href="js/jquery.bxslider.css" rel="stylesheet" type="text/css" />
 <div class="container">
    <asp:Label ID="lblComment" runat="server" Text=""/>
</div>
<script src="js/jquery.bxslider.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.bxslider').bxSlider({
            mode: 'horizontal',
            slideMargin: 3,
            auto: true
        });
    });
</script>

And Finally here's my Back End

private void dispComments()
{
    using (MySqlConnection conn = new MySqlConnection("server=localhost;database=test;uid=root;password="))
    {
        string query = "select * from comments order by com_date desc";
        DataTable dt = new DataTable();

        using (MySqlDataAdapter da = new MySqlDataAdapter(query, conn))
        {
            da.Fill(dt);

            string comment = null;

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                //Message title
                //news += "<div class='page-header' style='text-transform:capitalize;'><small>";
                //news += dt.Rows[i]["com_content"].ToString();
                //news +="</small></div>";

                //Message Body
                comment += "<ul class='bxslider'>";
                comment += "<li>";
                comment += "<blockquote>";
                comment += dt.Rows[i]["com_content"].ToString();
                comment += "<p style='text-align: right; margin-right: 20px;'>";
                comment += dt.Rows[i]["com_name"].ToString();
                comment += "</p></blockquote>";
                comment += "</li>";
                comment += "</ul>";

            }
            lblComment.Text = comment;
        }
    }
}

...I have 3 comments on my comments table, all three of 'em are displayed and the output is fine except they tend to appear individually, only one comment to display per rotation. Where have i gone wrong? Please help!!

Answer 1

The <ul> should be outside the for loop. The current code is creating a new <ul> under every iteration. So for each li you have a ul, and for each ul the slider is initialised.

Modify to this code,

string comment = null;
comment += "<ul class='bxslider'>";
for (int i = 0; i < dt.Rows.Count; i++)
{
    comment += "<li>";
    ....
    comment += "</li>";
}
comment += "</ul>";