Ajax and bootstrap modal issue

I have bootstrap modal, which is fired on clicking a row within a JQuery DataTable:

$('#tblTestData tbody').on('click', 'tr', function () {

if ($(this).hasClass('selected')) {
    $(this).removeClass('selected');
}
else {
    oMessageData.$('tr.selected').removeClass('selected');
    $(this).addClass('selected');
}
loadMessages(oMessageData.row(this).data());
});

The LoadMessages function, basically creates a bunch of HTML, and then calls:

$('#modalMessages').modal('show');

from within the success portion of an ajax call to a c# webmethod.

Within the footer of my Modal, I have a button, which calls another jquery method, to add some of the content to a database. Again, this is a Webmethod, and on success of adding the information into the database, calls:

$('#modalMessages').hide();


Now, from this point on, I cant' fire the modal again, without hitting F5 and reloading the page.

I placed and console.log inside the loadMessages function, and can see that this get's called every time I ask to show the modal, but it just doesn't fire.

Can someone please point me to what i'm doing wrong?