CODEWITHSUNDEEP
javascriptjquerycustom-data-attribute
Bunjip
Bunjip

Reputation: 297

How to detect if an HTML5 data-* attribute has empty string as value?

How can I detect with jQuery / JavaScript, if a given data-* Attribute of a certain DOM element has an empty string as a value? Common comparison operators do not seem to work properly, as the example below shows. I

May be close to: Checking for HTML5 data attribute with no value or set data- html5 value by default

But none of these answers matched this issue.

The HTML

<ul class="list">
  <li class="list--item" data-id="x6gftcc-44">First entry</li>
  <li class="list--item" data-id="">Last entry</li>
</ul>
<div class="message"></div>

Some CSS

.list{
    list-style-type: none;
  }
  .list--item{
    display: inline-block;
    min-width: 200px;
    padding: 20px;
    border: 1px solid rgb(60,64,73);
    cursor: pointer;
  }
  .message{
    display: none;
  }
  .message.active{
    display: block;
  }
  .true{
    color: green;
  }
  .false{
    color: red;
  }

The JavaScript

$(document).ready(function(){
  $('.list--item').click(function(event, target){
    function hasId(){
      if ($(this).data('id') != ''){
            return true;
        }
        else{
            return false;
        }
    };
    var entry = {
      id: $(this).data('id'),
      hasId: hasId()
    };
    if (entry.hasId){
      $('.message').addClass('active true');
      $('.message').text('Picked entry ID: ' + entry.id);
    }
    else{
      $('.message').addClass('active false');
      $('.message').text('Entry ID not available');
    }
  })
});

Example available at CodePen.

Upvotes: 6

Views: 3754

Answers (5)

Hackerman
Hackerman

Reputation: 12305

Your code needs a little tweak in order to work:

$(document).ready(function(){
  $('.list--item').click(function(event, target){
   function hasId(my){
    if (my.data('id') != ''){
        return true;
    }
    else{
        return false;
    }
  };
 var entry = {
  id: $(this).data('id'),
  hasId: hasId($(this))
 };
 if (entry.hasId){
  $('.message').addClass('active true');
  $('.message').text('Picked entry ID: ' + entry.id);
 }
 else{
  $('.message').addClass('active false');
  $('.message').text('Entry ID not available');
 }
});
});

Working fiddle: http://codepen.io/anon/pen/meZbqQ

Basically was just a mather of scope; inside your hasId function you are referencing to $(this) and asking for the data('id') attribute, but in that scope $(this) isn't referencing the initial entry object.

Upvotes: 5

mcgraphix
mcgraphix

Reputation: 2733

I believe JQuery's data() method returns undefined if the value is blank. So in your comparison you want to use:

if ($(this).data('id') !== undefined){

}

Upvotes: -1

ahervin
ahervin

Reputation: 461

You need to reference the element your passing to hasId and also though not compulsory functions would go outside of $(document).ready(function(){ });

See an updated Codepen where I've removed the function and made shortened the code

Upvotes: 1

neilrioszamora
neilrioszamora

Reputation: 94

instead of:

$(this).data('id') != ''

use:

$(this).attr('data-id') != ''

Upvotes: 2

om1
om1

Reputation: 166

The Problem is, inside your hasId() function $(this) is not referring to the right element. Try this:

   function hasId(element){
      if (element.data('id') != ''){

            return true;
        }
        else{
            return false;
        }
    };

    var entry = {
      id: $(this).data('id'),
      hasId: hasId($(this))
    };

Upvotes: 5

Related Questions