Data attribute value from MySQL

Question

I'm new to PHP and MySQL so i'm not quite sure what i am doing wrong here. I am using the jQuery plugin quicksand to create a filterable portfolio. The plugin uses custom data attribute data-tag inside the li item to populate the filter nav.

What I am trying to do is use a foreach loop to populate the contents of the ul. The problem is that the filter nav won't auto populate when I use php to get the value of the data attribute from the gallery_tag column in my mySQL table.

<?php
$pagetitle = "Red Penguin - Our Work";
$navcurrent = "work";
$headTitle = "RECENT WORK";
$headsubTitle = "SOME OF OUR RECENT WORK";
 include_once('includes/headersub.php');
 include_once('includes/connection.php'); 
 include_once('includes/project.php');

$project = new Project;
$projects = $project->fetch_all();

?>
<div class="row">       
    <nav id="filter"></nav>

    <section id="container">
        <ul id="stage" class="three-up">
        <?php foreach($projects as $project) { ?>

            <li class="gallerylist" data-tag="<?php echo $project['gallery_tag']; ?>">      
                <a href="project.php?id=<?php echo $project['gallery_id']; ?>">
                    <img src="<?php echo $project['gallery_thumb']; ?> " alt="<?php echo $project['gallery_proj']; ?>" />
                    <?php echo $project['gallery_title']; ?>
                </a>

</li>
 <?php } ?>
 </ul>
 </section>

The error that comes up in the log is in the jquery line:

 tags = elem.data('tags').split(',');

The log comes back with this error: "Uncaught TypeError: Cannot call method 'split' of undefined" for the above line.

I'm not quite sure why this is a conflict that causes the jquery to be unable to read the value of the data-attribute as taken from the gallery_tag column of my table. Any help would be appreciated.

Answer 1

I guess there is a spelling mistake in your html you have data-tag and you are trying to get the elem.data('tags') it should be elem.data('tag')

Answer 2

your elem.data('tags') returns undefined. So split() would not work on it.

Answer 3

Maybe I'm wrong, but I think you need: tags = elem.data('tags').split(' ');