Colorbox opens document outside box

Question

I'm using Colorbox for my PM system. Clickin on the 'Inbox' link, opens colorbox and loads the inboxpage via ajax. The inboxpage shows linked titles of the users messages. Clickin on that, should open the read_message page inside the same colorbox. Unfortunately, that is not the case. Whenever I click on the link, it just opens the page outside the box.

I've tried different things, but no love whatsoever. Any help would be appreciated!

Piece of javascript (If you need the whole javascript of Colorbox.js, please let me know so!)

$(document).ready(function(){
$("#ajax").colorbox({ajax:true, width:"500px", height:"450px"});

});

Page that opens the Colorbox once $newMessages or $noNewMessages has been clicked

<div class="pageHeader">
<p class="title"><?php echo $myAccount ?></p>
<a class="viewMessages" id="ajax" href="message/inbox.php">
<?php
if (mysqli_num_rows($getAmountMessages) > 0 ) { 
    $row = mysqli_fetch_array($getAmountMessages);
        if($row['message_read'] == 0){ 
        echo $newMessages;
        } else {
        echo $noNewMessages;
    }
}
?>
</a>
</div>

Inbox page - Clickin on the Linked Titles should open the read_message.php file within the Colorbox

//Select messages in db
$getMessages = mysqli_query($mysqli,"SELECT * FROM messages WHERE recipient = '".$_SESSION['user_id']."' ORDER BY message_id DESC");
$numMessages = mysqli_num_rows($getMessages);

//Message(s) available for user
if (mysqli_num_rows($getMessages) > 0 ) { 
echo '<ul>';

for($count = 1; $count <= $numMessages; $count++)
{
    $row = mysqli_fetch_array($getMessages);
    //Show if a message is still new
    if($row['message_read'] == 0)
    { 
    echo '<a id="ajax" href="message/read_message.php?messageid='.$row['message_id'].'">'.$row['message_title'].'</a>(NEW MESSAGE)<br>';
    }else{
    echo '<a id="ajax" href="message/read_message.php?messageid='.$row['message_id'].'">'.$row['message_title'].'</a><br>';
    }
}
echo '</ul>';

    //No message(s) available for user
    }else{
     echo ("<p class='messagesinfo'>Er zijn geen nieuwe berichten</p>");  
    }

Thank you.

Answer 1

When clicking on a message (link), you are telling the browser to do a redirect to that link, which will result in a new page load.

Instead, you need to call $.colorbox via javascript. Change your links from:

<a id="ajax" href="message/read_message.php?messageid='.$row['message_id'].'">'.$row['message_title'].'</a>

to

<a id="ajax" onclick="showMessage($row['message_id'])">'.$row['message_title'].'</a>

In your Javascript add the following function:

function showMessage(id) {
  $.colorbox({href:"message/read_message.php?messageid=" + id});
}

Hope this helps!