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:
- //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;
});
},
});
//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
- <!-- 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">
<?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
- <!-- 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?