Accordian Instant Messaging - Need Help w/ index managing
Hello, I am new to using jQuery and have been using the accordian to manage chat sessions for a project of mine. The data is populated purely from the MySQL DB except when I prepend a new conversation. If the accordian is collapsed the prepend appears open and at the top, but if you already have a panel open and prepend another conversation panel, it adds it minimized to the bottom. The problem is this method screws up the index managing and glitches the chat until you reload the data by clicking h3 header.
What I need to be able to do is collapse all panels when adding a conversation and have the prepend show up at the top and open.
Here is my main JS file for this project.
IM.js
As I said I'm new to jQuery and I've managed to find myself in a corner regarding the issue of prepending. The only way I can imagine to workaround this would be to collapse all panels then prepend & refresh, but I'm not sure how to do so....
What I need to be able to do is collapse all panels when adding a conversation and have the prepend show up at the top and open.
Here is my main JS file for this project.
IM.js
- $(document).ready(function() {
//Establish IM Display
var ACP_STATE = imData.activePanel;
var ACP_ID = parseInt(imData.panelID);
var ACP_UID = parseInt(imData.uID);
//Get Active Panel ID
$('.convo h3').on('click',function(){
var activeIndex = $( "#chatbar" ).accordion( "option", "active" ); //getter
var currentID = $(this).next().attr("id");
var userID = $(this).attr('id');
if(ACP_STATE == 1) { //active panel
$('#IM_'+userID).attr('src', 'chat/index.php?id='+userID);
$.post("dashboard.php?a=im&e=acp&pid=" + currentID + '&pst=' + activeIndex + '&to_id=' + userID, function(data) {
});
}
if(ACP_STATE == 0) { //inactive panel
$.post("dashboard.php?a=im&e=acp&pid=" + currentID + '&pst=' + activeIndex + '&to_id=' + userID, function(data) {
});
}
});
//Accordian Additions + Drag
$( "> div.convo", "#chatbarIM" ).draggable({
helper: "clone",
revert: "invalid",
cursor: "move",
handle: "h3",
connectToSortable: "#chatbar"
});
//Primary Accordian - Populated by DB
if(ACP_STATE == 0) { //--if no active panels exist
$( "#chatbar" ).accordion({
header: "> div.convo > h3",
collapsible: true,
active: false,
autoHeight: false,
autoActivate: false,
activate: function(event, ui) {
if ($( "#chatbar" ).accordion("option", "active") !== false) {
console.log("Panel Open");
} else {
console.log("Panel Closed");
}
}
});
}- //Secondary Accordian for active panel on page loads
if(ACP_STATE == 1) { //--if the user has an active panel
$( "#chatbar" ).accordion({
active: ACP_ID,
header: "> div.convo > h3",
collapsible: true,
autoHeight: false,
autoActivate: true
});
}
//Sortable + Header
$( "#chatbar" ).sortable({
axis: "y",
handle: "h3",
items: "div.convo",
receive: function(event, ui) {
$( "#chatbar" ).accordion("add", "<div class='convo'>" + ui.item.hmtl() + "</div>");
}
});
//Temp Accordian for New Sessions
$( "#chatbarIM" ).accordion({
header: "> div.convo > h3",
collapsible: true,
active: true,
autoHeight: false
});
//Accordian Window Close Button
$("#chatbar #chatbarIM .closeIM").button(
function() {
$(this).removeClass('ui-state-hover');
}
);
//Chat Window Close - Remove Accordian Panel
$(".im-menu button").live("click", function() {
var imUser = $(this).attr('name');
var parent = $(this).closest('.convo');
var head = parent.prev('h3');
parent.add(head).fadeOut('slow',function(){$(this).remove();});
$.post( "dashboard.php?a=im&e=close&to_id=" + imUser, { func: "getStatusMsg" }, function( data ) {
//console.log( data.status );
//console.log( data.message );
if(data.status == 0) { alert(data.message); }
}, "json");
});
//New Chat Window - Add Panel to Accordian *** This is where I need help
$( ".newIM" ).button();
$('.newIM').click( function() {
var imUser = $(this).attr('value');
var imName = $(this).attr('name');
var newDiv = "<div class='convo'><h3 id='" + imUser + "'>" + imName + "<div class='im-menu'><button name='" + imUser + "' class='closeIM'>x</button></div></h3><div><iframe src='chat/index.php?id=" + imUser + "' width='250' height='160' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' seamless></iframe></div></div>";
$.post( "dashboard.php?a=im&e=create&to_id=" + imUser, { func: "getStatusMsg" }, function( data ) {
//console.log( data.status );
//console.log( data.message );
if(data.status == 1) { //-if session is new and does not exist create panel
$('#chatbar').prepend(newDiv);
$('#chatbar').accordion("refresh");
} else {
alert(data.message); //-if chat session already exists
}
}, "json");
});
});
- <?php $friends = listIM($user_id); $i=0;
if(!empty($friends)) {
foreach($friends as $friend) { $i++;
$f[$i] = $friend;
} ?>
<script>
//Establish IM Display
var ACP_STATE = imData.activePanel;
var ACP_ID = parseInt(imData.panelID);
var ACP_UID = parseInt(imData.uID);
console.log('S: '+ACP_STATE);
console.log('I: '+ACP_ID);
console.log('U: '+ACP_UID);
if(ACP_STATE == 1) {
$(document).ready(function(){
$('#IM_'+ACP_UID).attr('src', 'chat/index.php?id='+ACP_UID); //-populate active iframe
});
}
</script>
<!-- Chat Sessions -->
<div id='chatwrapper'>
<div id='chatbar'>
<?php for($x=1;$x<=$i;$x++) :
$friend = getFriend($f[$x]); ?>
<div class="convo">
<h3 id="<?php echo $friend['user_id']; ?>"><?php echo $friend['user_name']; ?>
<img src="img/newMsg.png" width="16" height="16" class="newMsg" id="<?php echo $friend['user_id']; ?>">
<div class='im-menu'>
<button name="<?php echo $friend['user_id']; ?>" class="closeIM" title="Close">x</button>
</div>
</h3>
<div>
<script>
if(ACP_STATE == 0) {
$('.convo h3').click(function() {
var imUserID = $(this).attr('id');
$('#IM_'+imUserID).val('chat/index.php?id='+imUserID);
if ($( "#chatbar" ).accordion("option", "active") !== true) {
$('#IM_'+imUserID).attr('src', $('#IM_'+imUserID).val()); }
});
}
</script>
<iframe id="IM_<?php echo $friend['user_id']; ?>" width="250" height="160" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" seamless>
</iframe>
</div>
</div>
<?php endfor; ?>
</div>
</div>
<!-- /Chat Sessions -->
<?php } else { ?>
<!-- Chat Sessions [EMPTY] -->
<div id='chatwrapper'>
<div id='chatbar'>
</div>
</div>
<!-- /Chat Sessions [EMPTY] -->
<?php } ?>
- //Initialize user's chat data
- <?php //--- LOAD IM Active Chat Panels
$getACP = getACP($user_id); ?> - <script>
var imData = <?php echo $getACP; ?>; //
</script>
<script src="im.js"></script> - //Listen for New Chat Sessions - (Same Issue: need to assure these always open at top)
- update_chat();
- setInterval("update_chat()", 10000);
- function update_chat(){
- $.get( "dashboard.php?a=im&e=listen", { func: "recNewChat" }, function( data ) {
- if(data.status == 1) {
- var newDiv = "<div class='convo'><h3 id='" + data.fid + "'>" + data.name + "<div class='im-menu'><button name='" + data.fid + "' class='closeIM'>x</button></div></h3><div><iframe src='chat/index.php?id=" + data.fid + "' width='250' height='160' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' seamless></iframe></div></div>";
- $('#chatbar').prepend(newDiv);
- $('#chatbar').accordion("refresh");
- }
- }, "json");
- }
Function for Active Chat Panel Data
//successful return activePanel: [active 1, inactive 0] - panel index, panel user id (APC_STATE = 1)
- $return = json_encode(array("activePanel"=>"1","panelID"=>"$acp_pid","uID"=>"$acp_uid"));
//else returns vars with 0's and doesn't initiate with an active panel (ACP_STATE = 0)
As I said I'm new to jQuery and I've managed to find myself in a corner regarding the issue of prepending. The only way I can imagine to workaround this would be to collapse all panels then prepend & refresh, but I'm not sure how to do so....