uncaught exception: jQuery UI Tabs: Mismatching fragment identifier

Question

all. I have built a simple jQuery/PHP chat program that works rather well. However, I'd like to add a feature like channels or rooms. Ideally, I'd like to use tabs at the top of the chat to manage which room the user is in (there are only going to be 2). I thought this would be a simple task, and I have seen something similar done before, but I keep getting the uncaught exception error when the tabs are clicked, and the source doesn't load correctly. i'll post the code for the whole chat system, because I have a feeling the issue might lie therein.

the jquery

page = {
    getChat: function() {
        $.ajax({
            url: 'game_src.php',
            data: 'mode=getChat',
            dataType: 'html',
            cache: false,
            success: function(res){
                $("#chatbox").html(res);
            }
        });
    }
};

$("#submitmsg").click(function(){
    var clientmsg = $("#usermsg").val();
    $.ajax({
        url : 'game_src.php',
        data: 'mode=chatSubmit&msg=' + encodeURIComponent(clientmsg)
    });
    $("#usermsg").attr("value", "");
    return false;
});

setInterval(page.getChat, 4000);

$("#chatChannel").tabs({
    cookie: { expires: 1 },
});

the chat body

<?php
if($user->data['user_id'] == ANONYMOUS)
{

}
else
{
    ?>
    <div id="chatChannel">
        <ul>
            <li><a href="#global">Global</a></li>
            <li><a href="#alli">Alliance</a></li>
        </ul>
    </div>
    <form name="message" action="">  
        <input name="usermsg" type="text" id="usermsg" size="25" />  
        <input name="submitmsg" type="submit" id="submitmsg" value="Send" />  
    </form>
    <br />
    <?php
}
?>
<div id="chatbox" style="border:1px solid black;background-color: rgba(255,255,255,0.3);height:400px;overflow:auto;">
    <div id="global">
    <?php
    $chatMsgs = array();
    $limit = time()-86400;

    $sql = 'SELECT COUNT(chat_id) as count FROM '.CHAT_TABLE.' WHERE chat_channel = 0 AND chat_time > '.$limit;
    $result = $db->sql_query($sql);
    $row = $db->sql_fetchrow($result);
    $count = $row['count'];

    if($count > 0)
    {
        $sql = 'SELECT * FROM '.CHAT_TABLE.' WHERE chat_channel = 0 AND chat_time > '.$limit.' ORDER BY chat_time DESC';
        $result = $db->sql_query($sql);
        while($row = $db->sql_fetchrow($result))
        {
            $chatMsgs[] = array(
                'chat_time' => $row['chat_time'],
                'chat_msg' => $row['chat_msg'],
                'chat_user' => $row['chat_user'],
                'chat_channel' => $row['chat_channel']
            );
        }

        foreach($chatMsgs as $msg)
        {
            $sql = 'SELECT username FROM '.USERS_TABLE.' WHERE user_id = '.$msg['chat_user'];
            $result = $db->sql_query($sql);
            $row = $db->sql_fetchrow($result);
            $username = $row['username'];

            echo '<div class="chatMsg" style="border-bottom:1px solid black;">';
            echo '<div class="chatUsr">'.$username.' says:</div>';
            echo '<div class="chatUsrMsg" style="float:left;">'.$msg['chat_msg'].'</div>';
            echo '<div class="chatMsgTime" style="float:right;">'.date("g:i a", $msg['chat_time']).'</div>';
            echo '</div>';
            echo '<br />';
            echo '<hr />';
        }
    }
    else
    {
        echo '<div class="chatMsg">Nothing is heard but the sound of crickets...</div>';
    }
    ?>
    </div>
    <div id="alli">
    <?php
    $chatMsgs = array();
    $limit = time()-86400;

    $sql = 'SELECT COUNT(chat_id) as count FROM '.CHAT_TABLE.' WHERE chat_channel = 1 AND chat_time > '.$limit;
    $result = $db->sql_query($sql);
    $row = $db->sql_fetchrow($result);
    $count = $row['count'];

    if($count > 0)
    {
        $sql = 'SELECT * FROM '.CHAT_TABLE.' WHERE chat_channel = 1 AND chat_time > '.$limit.' ORDER BY chat_time DESC';
        $result = $db->sql_query($sql);
        while($row = $db->sql_fetchrow($result))
        {
            $chatMsgs[] = array(
                'chat_time' => $row['chat_time'],
                'chat_msg' => $row['chat_msg'],
                'chat_user' => $row['chat_user'],
                'chat_channel' => $row['chat_channel']
            );
        }

        foreach($chatMsgs as $msg)
        {
            $sql = 'SELECT username FROM '.USERS_TABLE.' WHERE user_id = '.$msg['chat_user'];
            $result = $db->sql_query($sql);
            $row = $db->sql_fetchrow($result);
            $username = $row['username'];

            echo '<div class="chatMsg" style="border-bottom:1px solid black;">';
            echo '<div class="chatUsr">'.$username.' says:</div>';
            echo '<div class="chatUsrMsg" style="float:left;">'.$msg['chat_msg'].'</div>';
            echo '<div class="chatMsgTime" style="float:right;">'.date("g:i a", $msg['chat_time']).'</div>';
            echo '</div>';
            echo '<br />';
            echo '<hr />';
                    }
    }
    else
    {
        echo '<div class="chatMsg">Nothing is heard but the sound of crickets...</div>';
    }
    ?>
    </div>
</div>

I'm going to add a parameter to the getChat jquery function to switch back and forth, but with what i have, i'm stuck. Can anyone point me in the right direction?

Answer 1

The JQuery UI tabs plugin expects the content divs to be in the same container as the ul of links.

In your case, it expects the content divs to be in the div id="chatChannel" right under the ul, but they aren't there.