CODEWITHSUNDEEP
javascriptjquery
thelgloriouspast
thelgloriouspast

Reputation: 81

Detecting when data attribute changes

I'm currently working on a microsite where I'd like to swap out content depending upon if a change to the parent containers data attribute occurs.

<div id="app" data-page="1"></div>

Next I have a button that gets the data attribute and then increments on click. 

var page = +$('#app').attr('data-page');
$('#button__page-change').on('click', function() {
  page = page + 1;
  $('#app').attr('data-page', page);
});

The next step now is to detect whenever that page is changed. I was thinking along the lines of a switch statement.

switch (page) {
  case 2:
    console.log('page: ', page);
  break;
  case 3:
    console.log('page: ', page);
  break;
  default: 
   console.log('switch statement does not appear to be working');
  break;
}

The switch seems to not be meeting any of the conditions and therefore going to the default case. But with that said, I was trying to perhaps put it inside a on change function. But I didn't seem to have any luck with that as nothing was logged to the console.

Any input would be greatly appreciated. Thank you in advance.

Upvotes: 0

Views: 1824

Answers (3)

Ele
Ele

Reputation: 33726

Well, if you can use only $.data() function, you can intercept its executions as follow:

  • Get the current jQuery's data function.
  • Execute the native jQuery's data function.
  • Get the result.
  • Execute your logic for page detection.
  • Return the result from the jQuery's data function.

var page = +$('#app').data('page');

var dataFn = $.fn.data;
$.fn.data = function(value, data) {
  var result = dataFn.call(this, value);
  executePageDetection(value, data);
  return result;
};

$('#button__page-change').on('click', function() {
  page = page + 1;
  $('#app').data('page', page);
});

var executePageDetection = function() {
  switch (page) {
    case 2:
      console.log('page: ', page);
      break;
    case 3:
      console.log('page: ', page);
      break;
    default:
      console.log('switch statement does not appear to be working');
      break;
  }
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app" data-page="1"></div>

<button id='button__page-change'>Click me</button>

Upvotes: 3

Scath
Scath

Reputation: 3824

This seems to be doing what you are wanting. I am using get and set attribute to find the data page and then add to it.

function check(){
var dt = document.getElementById("app");
var att = dt.getAttribute("data-page")
var page = parseInt(att)  + 1 
dt.setAttribute("data-page", page);

switch (page) {
  case 2:
    console.log('page: ', page);
  break;
  case 3:
    console.log('page: ', page);
  break;
  default: 
   console.log('switch statement does not appear to be working' + page);
  break;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app" data-page="1"></div>
<input type="button" onclick="check();" value="go">

Upvotes: 1

thelgloriouspast
thelgloriouspast

Reputation: 81

So as I posted this I actually came to the idea of what if I put the switch statement in an on click function instead. Because the navigational flow will always be clicking buttons, why not stick the switch statement in there. If anyone has any suggestions, I'd love to hear 'em. But this seemed to work for me.

$('button').on('click', function(){
switch (page) {
  case 1: 
    console.log('page: ', page);
  break;    
  case 2:
    console.log('page: ', page);
  break;
  case 3:
    console.log('page: ', page);
  break;
  default: 
   console.log('switch statement does not appear to be working');
  break;
}   
});

Upvotes: 1

Related Questions