CODEWITHSUNDEEP
javascriptphpjqueryhtml
Jenz
Jenz

Reputation: 8369

Checking the content of div with jquery

In my project, I have a channel which displays videos at scheduled times. When there is not video at a time, in the place of div for displaying video, it will show an image with ID pgmimg. 

<img id="pgmimg"/>

For implementing this feature I am calling a setInterval() which will check the current content in the video div. If it is the default image, then it will call an ajax function which will check whether there is any video at this time. If there is, then it will send the response.

$(document).ready(function() {
  if ($('#pgmimg').length)    // checking for next video only if there is no any video playing, ie., if the default image class is present
  {
    setInterval(function() {
      nextchannel('<?php echo base_url();?>')
    }, 3000);
  }
});
function nextchannel(baseurl)
{
  $.ajax({
    type: 'post',
    datatype: 'html',
    url: baseurl + 'index.php/index/nextvideo',
    success: function(response)
    {
      $('.videoarea').html(response);
    }
  })
}

PHP

function nextvideo() 
{
  $currentpgm = $this->db->query("query for fetching current programme");
  $pgm = $currentpgm->row();
  $currentpgnnum = $currentpgm->num_rows();
  if ($currentpgnnum > 0) 
  {   // if there is any program at current time then display the video
    echo '<a href="' . base_url() . 'channel/' . $pgm->programme_source . '/' . $pgm->video . '" class="fplayer" id="flowplayer"></a>
    <input type="hidden" name="starttime" id="starttime" value="' . $pgm->starttime . '"/>
   <input type="hidden" name="currentdate" id="currentdate" value="' . $currentdate . '"/>';
  }
  else 
  {     // if there is no video, then show the default image with id pgmimg
    echo '<img src="'.base_url().'images/video_sample.png" alt="video" id="pgmimg"/>';
  }
  exit;
}

Now the problem is that, it failed to check whether default image id is present or not (call setInterval only if default image id is present in the webpage) in the setInterval function $('#pgmimg').length. The video is playing, but the setInterval() function is again getting called. But that should not happen.

Can anyone help me to fix this?

Thanks in advance.

Upvotes: 0

Views: 81

Answers (4)

FuzzyTree
FuzzyTree

Reputation: 32392

Instead of setInterval use recursive setTimeout calls, so you can stop polling when needed. The added benefit of polling with setTimeout is if for some reason it takes longer than 3 seconds to get a response, you don't start making overlapping requests.

$(document).ready(function() {
  if ($('#pgmimg').length)    // checking for next video only if there is no any video playing, ie., if the default image class is present
  {
    setTimeout(function() {
      nextchannel('<?php echo base_url();?>')
    }, 3000);
  }
});
function nextchannel(baseurl)
{
  $.ajax({
    type: 'post',
    datatype: 'html',
    url: baseurl + 'index.php/index/nextvideo',
    success: function(response)
    {
      $('.videoarea').html(response);
      if ($('#pgmimg').length)    // call again if necessary
      {
        setTimeout(function() {
          nextchannel('<?php echo base_url();?>')
        }, 3000);
      }
    }
  })
}

Upvotes: 1

Barmar
Barmar

Reputation: 781004

You need to do the test when the interval function runs, not when you're initially scheduling it:

$(document).ready(function() {
    setInterval(function() {
        if ($('#pgmimg').length) {
            nextchannel('<?php echo base_url();?>');
        }
    }, 3000);
});

Upvotes: 0

Sohail Yasmin
Sohail Yasmin

Reputation: 518

You are trying to implement wrong logic you need to implement 

    if($('#pgmimg').length > 0 )

I think this will solve your problem

Upvotes: 0

Imperative
Imperative

Reputation: 3183

You did not clear the interval, so it gets called on and on.

Just save the interval to a variable:

var interval = window.setInterval(function() {
    // check for the div
    if($('#pgmimg').length > 0) {
        nextchannel(url);
    }
}, 3000);


function nextchannel(baseurl) {
    // ajax ... success:
    window.clearInterval(interval);
}

Upvotes: 0

Related Questions