CODEWITHSUNDEEP
jquery
Cesar Bielich
Cesar Bielich

Reputation: 4945

how to pass $(this) to a function then using parent()

When I pass an .on('click', '.time_tracked_starttime', function() { click event I am calling a function $.fn.downCount(); at which point I create var container = this so that I can use it inside the other function countdown()

Problem is that I need to access the container from 2 parent() above. Something like $(this).parent().parent(); so I can properly find container.find('.hours').html();

I tried var container = $(this),parent().parent(); but still comes back as undefined

//timer//
$.fn.downCount = function() {
  var container = $(this).parent().parent();

  function countdown() {
    var hours = container.find('.hours').html();
    alert(hours)
    var minutes = container.find('.minutes').html();
    var seconds = container.find('.seconds').html();

    if (seconds == '59') {
      seconds = '00';
      minutes = parseInt(minutes) + 1;
    } else {
      seconds = parseInt(seconds) + 1;
    }

    if (minutes == '59') {
      minutes = '00';
      hours = parseInt(hours) + 1
    }

    // fix dates so that it will show two digets
    hours = (String(hours).length >= 2) ? hours : '0' + hours;
    minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
    seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;

    // set to DOM
    container.find('.hours').html(hours);
    container.find('.minutes').html(minutes);
    container.find('.seconds').html(seconds);
  };

  // start
  var interval = setInterval(countdown(container), 1000);
};
//timer//

$(document).on('click', '.time_tracked_starttime', function() {
  var time_tracked_id = $(this).attr('data-id');
  var thisstart = $(this);
  var current_time = $(this).parent().parent().find('.each_hours').text();
  // start timer
  $.fn.downCount();
  // start timer
  $.ajax({
    type: 'post',
    url: '/includes/time_tracked_start_timer.php',
    data: {
      time_tracked_id: time_tracked_id
    },
    success: function(data) {
      thisstart.hide();
      thisstart.next().next('.time_tracked_edit').hide();
      thisstart.next('.time_tracked_stoptime').show();
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thistimetrackid" class="col-sm-12">
  <div class="col-sm-12">
    <a class="pointer time_tracked_starttime" data-id="12345" style="color: green">Start Time</a>
  </div>
  <span class="pull-right countdown"><strong class="each_hours"><span class="hours">01</span>:<span class="minutes">30</span>:<span class="seconds">57</span></strong> Hrs</span>
</div>

Upvotes: 0

Views: 32

Answers (2)

Armin
Armin

Reputation: 15938

Your problem was, that you call $.fn.downCount() from the scope where you've got the container, but you did not pass it to this method. So I've added a container parameter to fn.downCount function and the nested countdown() method.

And this is the initial call from the current scope:

// start timer
$.fn.downCount($(this).parent().parent());
// start timer

Also I've replaced the .html() with .text(), because you are just changing text values here.

Here is the updated fiddle: https://jsfiddle.net/4fw0nx6d/1/

Upvotes: 1

Barmar
Barmar

Reputation: 780798

You need to call the downCount function on a jQuery object, then it will receive that object as this.

thisstart.downCount();

Also, the argument to setInterval must be a function, not a call to the function. And you're calling countdown with an argument, even though it doesn't take one.

//timer//
$.fn.downCount = function() {
  var container = $(this).parent().parent();

  function countdown() {
    var hours = container.find('.hours').html();
    alert(hours)
    var minutes = container.find('.minutes').html();
    var seconds = container.find('.seconds').html();

    if (seconds == '59') {
      seconds = '00';
      minutes = parseInt(minutes) + 1;
    } else {
      seconds = parseInt(seconds) + 1;
    }

    if (minutes == '59') {
      minutes = '00';
      hours = parseInt(hours) + 1
    }

    // fix dates so that it will show two digets
    hours = (String(hours).length >= 2) ? hours : '0' + hours;
    minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
    seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;

    // set to DOM
    container.find('.hours').html(hours);
    container.find('.minutes').html(minutes);
    container.find('.seconds').html(seconds);
  };

  // start
  var interval = setInterval(countdown, 1000);
};
//timer//

$(document).on('click', '.time_tracked_starttime', function() {
  var time_tracked_id = $(this).attr('data-id');
  var thisstart = $(this);
  var current_time = thisstart.parent().parent().find('.each_hours').text();
  // start timer
  thisstart.downCount();
  // start timer
  $.ajax({
    type: 'post',
    url: '/includes/time_tracked_start_timer.php',
    data: {
      time_tracked_id: time_tracked_id
    },
    success: function(data) {
      thisstart.hide();
      thisstart.next().next('.time_tracked_edit').hide();
      thisstart.next('.time_tracked_stoptime').show();
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thistimetrackid" class="col-sm-12">
  <div class="col-sm-12">
    <a class="pointer time_tracked_starttime" data-id="12345" style="color: green">Start Time</a>
  </div>
  <span class="pull-right countdown"><strong class="each_hours"><span class="hours">01</span>:<span class="minutes">30</span>:<span class="seconds">57</span></strong> Hrs</span>
</div>

Upvotes: 1

Related Questions