Default var if "$(this).attr('data-id')" is undefined

Question

I'm learning "on the fly" so please pardon my ignorance. I'm trying to figure out how to pass a default "folderID" to my #next and #prev click functions below. Am I on the right path? Or totally off base? Thanks so much for your time. K

$(function() {

var folderID = $('.folderID').attr("data-id"); 



$("#next").click(function() {
var myInbox = "/test/SecComm/ajax_inboxResults.cfm?startRow="+nextstart;
myInbox+="&folderID="+folderID;
    $.get(myInbox,function(data){
      $("#messageList").html(data);
  });
})

$("#prev").click(function() {
var myInbox = "/test/SecComm/ajax_inboxResults.cfm?startRow="+prevstart;
myInbox+="&folderID="+folderID;
    $.get(myInbox,function(data){
      $("#messageList").html(data);
  });
})

$(".folderID").click(function() {
var folderID = $(this).attr('data-id');                               
<cfoutput>var myInbox = "/test/SecComm/ajax_inboxResults.cfm
folderID="+folderID;</cfoutput>
    $.get(myInbox,function(data){
      $("#messageList").html(data);
  });
})

})

var prevstart = 1
var nextstart = 1


function showPrev(newprevstart){
prevstart = newprevstart
$("#prev").show()
}

function hidePrev(){
$("#prev").hide()
}

function showNext(newnextstart){
nextstart = newnextstart
$("#next").show()
}

function hideNext(){
$("#next").hide()
}

Answer 1

You could try the following:

var folderID = $(this).attr('data-id') || 1;

JS Fiddle demo

The above assigns the value of the data-attribute to the variable folderID, if the selector doesn't return a match then it assigns the default value of 1.

In 2016, and quite probably since 2015, it's possible instead to use several means of acquiring the data-id attribute-value using the DOM – as well as jQuery – those options are below:

var folderID = $(this).data('id'); // jQuery
var folderID = this.dataset.id;
var folderID = this.getAttribute('data-id');

Obviously all of these require the this to be the appropriate element from which you wish to retrieve the attribute-value.

A comment raised below points out the obvious flaw in the above:

Please note that if you have a data-id of 0, this will use the value 1 instead (0 being a falsy value).

With that in mind it's worth revisiting the problem, to show a very similar solution but using a check that the data-id is present:

var folderID = 'undefined' !== typeof this.dataset.id ? this.dataset.id : 1;

With the above we check whether the type of (typeof) of the referenced property is not equal (!==) to undefined; if it is not equal to undefined we retrieve the value stored in that property (the property-value of this.dataset.id being the attribute-value of the data-id attribute) or, if it is undefined then we supply the value of 1.

This approach uses the Conditional (ternary) Operator, in which an expression is evaluated for true/false (or truthy/falsey) and, if the expression evaluates to true/truthy then the first statement following the ? character is used. If the expression evaluates to false/falsey then the second statement, following the :, is used:

var variableName = expression ? ifTrue : ifFalse;

References:

• JavaScript:
  • Conditional (ternary) Operator.
  • Element.getAttribute().
  • HTMLElement.dataset.
• jQuery:
  • attr().
  • data().

Answer 2

Normal shorthand would be:

var folderID = $(this).attr('data-id') || 1;