Home/ Questions/Q 8043599
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T04:57:16+00:00

I am generating a list from sql server, filtering it based on new and

  • 0

I am generating a list from sql server, filtering it based on new and old records and displaying them in their respective categories on the webpage. I want to show unique list bullets for old and new records. What Im currently getting is a mashup of every record from each category on top of eachother. The icons for the list items are coming from some twitter bootstrap css, using glyphicons. The new records also have a popover that displays on hover. The list-generating code 

foreach($resultArray as $category_name => $items)
{
    echo '<h3>'. $category_name.'</h3><ul>';
foreach($items as $itemid => $itemDetails)
    {
    ?>
    <li class="<?php if(strtotime($itemDetails['posted']) > (strtotime('-30   days'))){echo 'icon-star';} else {echo '';} ?>" data-content="This item is new on Corkboard. Check it out!" data-original-title="New Item">
    <?php 
echo '<a href="newGenView.php?id='.$itemid.'">'.$itemDetails['name'].' - '.$itemDetails['description'].'</a>';
    ?>
    </li>
<?php
}//foreach
echo '</ul>';
}//foreach
?>

And, I have these script tags:

<script type="text/javascript" src="assets/js/bootstrap-popover.js"></script> 
<script type="text/javascript">
$(document).ready(function() {
    $(this).popover(options);
});
</script>

Any ideas or other ways to do this solution?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    • Don’t forget the bootstrap-tooltip.js, which is required for popover.
    • Only add the data-content attributes to the new <li>.
    • The selector for popover should be for the <li>s and remove parameter options, if you don’t initialize it.
    • I would move the icons into <i> like in the bootstrap description.
    • I’ve added some styling rules.

    The final html could be:

    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    <style type='text/css'>
        ul { list-style: none inside none; margin: 0; }
        li { display: inline; }
    </style>
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
    <script type='text/javascript' src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
    <script type='text/javascript' src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
    <script type='text/javascript'>
        $(document).ready(function() { $('li').popover(); });
    </script>
</head>
<body>
    <h3>category_name</h3>
    <ul>
        <li>
            <i class="icon-minus"></i>
            <a href="newGenView.php?id=1">name1 - description1</a><br />
        </li>
        <li data-content="This item is new on Corkboard. Check it out!" data-original-title="New Item">
            <i class="icon-star"></i>
            <a href="newGenView.php?id=2">name2 - description2</a><br />
        </li>
    </ul>
</body>
</html>

    Also see this example.

    • 0