Tabs - Duplicate Ajax Requests after selecting different tab ID

Tabs - Duplicate Ajax Requests after selecting different tab ID

I have a user profile page that uses tabs to organize the data.

Tab-1 ajax loads default social "shoutbox"
tabs 2,3 loads are basic no ajax
tab 4 ajax loads friend list
tab 5 ajax loads photo gallery w/ fancybox plugin

When tab 1 initializes, the social functions perform as expected, but if you select any of the tabs 2-5 and then go back to tab 1, it duplicates my comments() function for each click, stacking the ajax requests. I need a workaround to either clear cache or reload page (as far as I'm thinking), but perhaps a second pair of eyes could show me what's wrong. I'm using .live() and I'm thinking this is the issue, and if so, I am unsure how to implement die() properly in this scenerio.

The tab plugin is initialized in my header.inc.php file like so:
  1. //Ajax Tab Loads - Find Fancybox Links
    $("#tabs").tabs({cache: false,
      load: function(event, ui) {
        $("#tabs").find(".profileAlbum").live('click', function() {
          $(ui.panel).load(this.href);
          return false;
        });
         $('#loadAlbum').click(function(){
            tabUrl = $(this).attr('href');
            $('#tabs').tabs("option", "active", 4);
            $(ui.panel).load(tabUrl);
            return false;
        }); //
      },
      select: function(event, ui) {
        $("#tabs").find(".profileAlbum .fancybox-usercp .fancybox-photo").die('click');
        $("#tabs").find(".profileAlbum .fancybox-usercp .fancybox-photo").live('click', function() {
          $(ui.panel).load(this.href);
          return false;
        });
      },
    });





















  2. //Active Tab
    var tabID = $('#tabs').tabs("option", "active");

TAB-1 is ajax loaded by default. Here is my remote file for the social interactions. social.php
HTML+PHP

  1. <!-- Social [WALL] -->
    <div id="myProfileWall">

        <?php if($permission == 1 || $permission == 2) { ?>
        <!-- Wall Post [FORM] -->
        <div id="wall_post_form">
        <form action="profile.php?s=social&id=<?php echo $id; ?>" method="post">
        <input type="hidden" name="a" value="wallPost">
        <div style='text-align:center'>
            <div style='position:relative;right:0px;top:0px'>
                <div class="wallPostText'>
                Write on <?php echo $name; ?>'s Wall
                </div>
                <textarea id="post_body" name="post_body"></textarea>
                <div style='position:absolute;top:7px;right:16px'>
                <select name="post_status" id="postStatus"> &nbsp;
                    <?php if($permission == 1) { ?>
                    <option value="1">Public</option>
                    <option value="2">Friends</option>
                    <option value="0">Only Me</option>
                    <?php } elseif($permission == 2) { ?>
                    <option value="2">Friends</option>
                    <option value="0">Only Us</option>
                    <?php } ?>
                </select>
                <input type="submit" name="submit" id="postWallSubmit" value=" Post ">
                </div>
            </div>
        </div><br>
        </form>
        </div>
        <!-- /Wall Post [FORM] -->
        <?php } elseif($permission == 3) { /*Default*/ } else { refresh_wall(0,$id,0); } ?>

        <?php if($permission != 0) : ?>
        <!-- Comments [FORM] -->
        <div id="commentForm"><br> CSS = display: none
        <span id="formText">Post Comment:</span><br>
        <form action="profile.php?s=social&id=<?php echo $id; ?>&a=wallComment" method="post">
        <textarea name="post_comment" id="post_comment" cols="40" rows="3"></textarea>
        <input type="submit" name="submit" id="postComment" value=" Post " style='position:relative;top:-21px'>
        </form>
        </div>
        <!-- /Comments [FORM] -->
        <?php endif; ?>
       
        <!-- Wall Posts [DATA] -->
        <div id="wallData">
        </div>
        <!-- /Wall Posts [DATA] -->
       
    </div>
    <!-- /Social [WALL] -->




















































JS/JQUERY
  1. <!-- jQuery -->
    <script>
        var activeFormID;
        var post_comment;
        var post_group;
        var uID = '<?php echo $user_id; ?>';
        var clicker = true;
        var posting = false;
       
       
        function clearVars() {
            activeFormID = NULL;
            post_comment = NULL;
            post_group = NULL;
            clicker = true;
            posting = false;
            $('#cTempD').remove();
            $('#cTempF').remove();
        }
       
        setTimeout(function(){
            posting = false;
            $('input#postComment').val(" Post ");
        },20000);   
           
        function comments() {
            var sel = 'c'+activeFormID;
            $.ajax({
                url: 'profile.php?id='+activeFormID+'&s=comments',
                type: 'GET',
                success: function(cData)
                {
                    var cTempD = '<div id="cTempD">' + cData + '</div>';
                    $('#'+sel).prepend(cTempD).slideDown(777);
                }
            });
        }
       
        $('textarea#post_comment').live('change', function(){
            post_comment = $(this).val();
            post_group = activeFormID;
            posting = false;
        });
       
        $('#postComment').live('click', function(ev){
            ev.preventDefault();
            var sel = 'c'+activeFormID;
           
            if(post_comment === undefined || post_group === undefined || post_comment === undefined && post_group === undefined){alert('Invalid Entry');}else{
            var data = 'post_comment=' + post_comment + '&post_group=' + post_group;
           
            if(posting == false) { posting = true; $(this).val('Posted');

            $.ajax({
                url: 'profile.php?s=social&id=<?php echo $id; ?>&a=wallComment',
                type: 'POST',
                data: data,
                success: function(html)
                {
                    console.log(data);

                    $('#cTempD').slideUp();
                    $('#cTempD').remove();
                    comments();
                    $('#'+sel).effect('highlight', {color: 'lightgreen'}, 777);
                    $('textarea#post_comment').val('');

                }
            });
            }
            } //if bad data
        });

        $('.comment').live('click', function(e){
        if(clicker == false) {
            e.preventDefault();
            $('#cTempF').slideUp(77).remove();
            $('#cTempD').slideUp(77).remove();
            clicker = true;
        }
        if(clicker == true) {
            e.preventDefault();
            var hT = $(this).attr('href');
            var cID = hT.replace('#','');
            var pID = cID.replace('c','');
            activeFormID = pID;
            var cForm = $('#commentForm').html();
            if(uID > 0) {
                var addForm = $('#'+cID).prepend('<div id="cTempF">'+cForm+'</div>');
                addForm.effect('blind',241);
                comments();
                clicker = false;
            } else {
                comments();
                clicker = false;
            }
        }
        });
    </script>
    <script type="text/javascript">
    $(function(){

        refresh_wall();
        setInterval("refresh_wall()", 120000); //Update Wall Every 2 min
        //Post to Wall
        $('#postWallSubmit').click(function() {
            var post_body = $('#post_body').val();
            var post_status = $('#postStatus').val();
            var data = 'post_body=' + post_body + '&post_status=' + post_status;
            $.ajax({
                type: "POST",
                url: "profile.php?s=social&id=<?php echo $id; ?>&a=wallPost",
                data: data,
                success: function(html){
                    $('#wallData').slideToggle(500, function(){
                        $(this).html(html).slideToggle(500);
                        $('#post_body').jqteVal("");
                       
                    });
                    clearVars();
                    }
            });
            return false;
        });
       
    });
    function refresh_wall() {
        var data = 'refresh=1';
        $.ajax({
            type: "POST",
            url: "profile.php?s=social&id=<?php echo $id; ?>&a=wallPost",
            data: data,
            success: function(html){
                $('#wallData').html(html);
            }
        });
    }

    </script>
    <!-- /jQuery -->   











































































































































It's pretty straightforward. I load ajax comments from .comment click and append a form to it taken from the hidden CSS form. It posts requests + fetches data fluently until you click another tab. Then comments() returns data times num of clicks/tab anchor.

It doesn't work if I use .on() for click. Any ideas?