Something is making my page perform an Ajax call multiple times... [read: I've never been more frustrated with something so 'simple' in my life]

Question

NOTE: This is a long question. I've explained all the 'basics' at the top and then there's some further (optional) information for if you need it.

Hi folks

Basically last night this started happening at about 9PM whilst I was trying to restructure my code to make it a bit nicer for the designer to add a few bits to. I tried to fix it until 2AM at which point I gave up. Came back to it this morning, still baffled.

I'll be honest with you, I'm a pretty bad Javascript developer. Since starting this project Javascript has been completely new to me and I've just learn as I went along. So please forgive me if my code structure is really bad (perhaps give a couple of pointers on how to improve it?).

---

So, to the problem: to reproduce it, visit http://furnace.howcode.com (it's far from complete). This problem is a little confusing but I'd really appreciate the help.

1. So in the second column you'll see three tabs
2. The 'Newest' tab is selected by default. Scroll to the bottom, and 3 further results should be dynamically fetched via Ajax.
3. Now click on the 'Top Rated' tab. You'll see all the results, but ordered by rating
4. Scroll to the bottom of 'Top Rated'. You'll see SIX results returned.
5. This is where it goes wrong. Only a further three should be returned (there are 18 entries in total). If you're observant you'll notice two 'blocks' of 3 returned.
6. The first 'block' is the second page of results from the 'Newest' tab. The second block is what I just want returned.

Did that make any sense? Never mind!

So basically I checked this out in Firebug. What happens is, from a 'Clean' page (first load, nothing done) it calls ONE POST request to http://furnace.howcode.com/code/loadmore .

But every time you load a new one of the tabs, it makes an ADDITIONAL POST request each time where there should normally only be ONE.

So, can you help me? I'd really appreciate it! At this point you could start independent investigation or read on for a little further (optional) information.

Thanks!

Jack

---

Further Info (may be irrelevant but here for reference):

It's almost like there's some Javascript code or something being left behind that duplicates it each time. I thought it might be this code that I use to detect when the browser is scrolled to the bottom:

var col = $('#col2');
    col.scroll(function(){
        if (col.outerHeight() == (col.get(0).scrollHeight - col.scrollTop()))
            loadMore(1);
    }); 

So what I thought was that code was left behind, and so every time you scroll #col2 (which contains different data for each tab) it detected that and added it for #newest as well. So, I made each tab click give #col2 a dynamic class - either .newestcol, .featuredcol, or .topratedcol. And then I changed the var col=$('.newestcol');dynamically so it would only detect it individually for each tab (makin' any sense?!). But hey, that didn't do anything.

Another useful tidbit: here's the PHP for http://furnace.howcode.com/code/loadmore:

   $kind  = $this->input->post('kind');

            if ($kind == 1){        // kind is 1 - newest

                $start  = $this->input->post('currentpage');
                $data['query']  = "SELECT code.id AS codeid, code.title AS codetitle, code.summary AS codesummary, code.author AS codeauthor, code.rating AS rating, code.date,
                    code_tags.*, 
                    tags.*, 
                    users.firstname AS authorname, 
                    users.id AS authorid,
                    GROUP_CONCAT(tags.tag SEPARATOR ', ') AS taggroup
                    FROM code, code_tags, tags, users
                    WHERE users.id = code.author AND code_tags.code_id = code.id AND tags.id = code_tags.tag_id
                    GROUP BY code_id
                    ORDER BY date DESC
                    LIMIT $start, 15  "; 

                $this->load->view('code/ajaxlist',$data);

            } elseif ($kind == 2) {     // kind is 2 - featured

So my jQuery code sends a variable 'kind'. If it's 1, it runs the query for Newest, etc. etc.

The PHP code for furnace.howcode.com/code/ajaxlist is:

<?php // Our query base
    // SELECT * FROM code ORDER BY date DESC
    $query = $this->db->query($query);  

    foreach($query->result() as $row) {
?>


<script type="text/javascript">
    $('#title-<?php echo $row->codeid;?>').click(function() {
        var form_data = {
            id: <?php echo $row->codeid; ?>
        };

        $('#col3').fadeOut('slow', function() {
            $.ajax({
                url: "<?php echo site_url('code/viewajax');?>",
                type: 'POST',
                data: form_data,
                success: function(msg) {
                    $('#col3').html(msg);
                    $('#col3').fadeIn('fast');
                }
        });
        });
    }); 
</script>

<div class="result">

    <div class="resulttext">

        <div id="title-<?php echo $row->codeid; ?>" class="title">
            <?php echo anchor('#',$row->codetitle); ?>
        </div>

        <div class="summary">
            <?php echo $row->codesummary; ?>
        </div>

        <!-- Now insert the 5-star rating system -->
        <?php include($_SERVER['DOCUMENT_ROOT']."/fivestars/5star.php");?>

        <div class="bottom">

            <div class="author">
                Submitted by <?php echo anchor('auth/profile/'.$row->authorid,''.$row->authorname);?>
            </div>

            <?php 
            // Now we need to take the GROUP_CONCATted tags and split them using the magic of PHP into seperate tags
            $tagarray = explode(", ", $row->taggroup);
            foreach ($tagarray as $tag) {
            ?>

            <div class="tagbutton" href="#">
                <span><?php echo $tag; ?></span>
            </div> 
                <?php } ?>                      
        </div>

    </div>

</div>

<?php }

echo "&nbsp;";?>

<script type="text/javascript">
var newpage = <?php echo $this->input->post('currentpage') + 15;?>;
</script>

So that's everything in PHP. The rest you should be able to view with Firebug or by viewing the Source code. I've put all the Tab/clicking/Ajaxloading bits in the tags at the very bottom. There's a comment before it all kicks off.

Thanks so much for your help!

Answer 1

I think you're right to suspect this code block:

var col = $('#col2');
    col.scroll(function(){
        if (col.outerHeight() == (col.get(0).scrollHeight - col.scrollTop()))
            loadMore(1);
    }); 

My take on this is that you keep adding additional event handlers (duplicates, essentially) each time you run this code. You need to remove (unbind) the existing event handlers with every tab click so that you can be sure that it's only firing once:

$('#col2').unbind();

var col = $('#col2');
    col.scroll(function(){
        if (col.outerHeight() == (col.get(0).scrollHeight - col.scrollTop()))
            loadMore(1);
    }); 

Or some such thing. See http://api.jquery.com/unbind/

Answer 2

It could also be

$('#col3').fadeOut('slow', function() {

as the ajax loads there... n number of times as it fades out it calls another ajax request.

not saying its the defenet answer but something looking into...

Answer 3

$('.featurecol'); , $('.topratedcol'); and $('.newestcol'); all refer to the same column and division (<div>). As such, whenever you switch pages, you need to unbind the old scroll before rebinding the new scroll handler. (Or else you'll be appending another scroll handler and getting multiple requests sent, like now)

You can do this by adding an unbind as follows:

  var col = $('.newestcol');
  col.unbind('scroll');
  col.scroll(function(){
  if (col.outerHeight() == (col.get(0).scrollHeight - col.scrollTop()))
      loadMore(1);
  }); 

You need to do this for all of the columns as they load (code/newest, code/toprated and code/featured).