The default value is var if "$ (this) .attr ('data-id')" is undefined

Question

I study on the fly, so please forgive my ignorance. I am trying to figure out how to pass the "folderID" by default to my #next and #prev functions below. Am I on the right track? Or completely from the 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 can try the following:

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

JS Fiddle demo

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

In 2016 and, quite possibly, from 2015, instead, you can use several ways to get the data-id attribute using the DOM - as well as jQuery - these parameters are below:

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

Obviously, all of them require that this be the appropriate element from which you want to get the attribute value.

The comment below indicates an obvious flaw in the above:

Note that if you have a data-id of 0, the value 1 will be used instead (0 is the false value).

With this in mind, it’s worth revising the problem, showing a very similar solution, but using the data-id check:

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

In the above example, we check if the type ( typeof ) of the reference property ( !== ) is undefined ; if it is not equal to undefined , we retrieve the value stored in this property (the value of the this.dataset.id property is an attribute-attribute of the data-id attribute) or, if it is undefined , then we provide the value 1 .

This approach uses a conditional (triple) operator in which the expression evaluates to 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 is used, following::

 var variableName = expression ? ifTrue : ifFalse; 

Literature:

• JavaScript:
  • Conditional (triple) operator .
  • Element.getAttribute() .
  • HTMLElement.dataset .
• JQuery:
  • attr() .
  • data() .

Answer 2

You are on the right track, although I would save the result of your $(this).attr('data-id') selector in a variable, so you don't have to look for the DOM again.

Answer 3

Since you already have the 'data-id' attribute for your element, you can simply find the value of this attribute inside the functions.

 $("#next").click(function() { // Get the value of the custom data value var folderID = $('.folderID').attr("data-id"); var myInbox = "/test/SecComm/inboxResults.cfm?startRow="+nextstart; myInbox+="&folderID="+folderID; $.get(myInbox,function(data){ $("#messageList").html(data); }); }) 

Answer 4

Normal shorthand:

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