Я работаю над системой обмена сообщениями. Я закончил части входящих и просмотра сообщений. Они загружаются в div на странице учетной записи пользователя, и все это работает без обновления страницы.

Я основал JQuery для этого наэта статья.

Здесь есть некоторая помощь для получения ссылок на сообщения, чтобы открыть сообщение в div без обновления страницы, и как добавить фильтр, чтобы ссылки на профили фактически обновлялись и переходили на реальную страницу профиля. Это все хорошо.

Я перешел на сторону отправки сообщений, которая использует модал (Twitter bootstrap) для загрузки внешней формы. Это тоже работает, но я потратил целую вечность, пытаясь понять, как сделать то же самое, что я сделал со ссылками, с отправкой формы, т.е. получить ее для отправки без обновления всей страницы. Опять же, я использую почти такой же jQuery, как и в папке входящих сообщений.

Вот код входящей почты:

<p id="waiting"><!-- ajax loading --></p>
<div class="messages"><!-- inbox --></div>

Javascript:

$.ajaxSetup({ cache: false});
$(document).ready(function(){
    // set up the click event
    $('a.loader').live('click', function() {
        var toLoad = '<? echo base_url(); ?>user/messaging/';
        $('.messages').fadeOut(100, loadContent);
        $('#load').remove();
        $('#waiting').append('<div id="load" style="height: 700px; background:url(<? echo base_url(); ?>files/recordCovers/index.html?<? echo rand(5,1555); ?>); background-size: cover;"><div class="circle"></div><div class="circle1"></div></div>');
        $('#load').fadeOut(1000);

        function loadContent() {
            $('.messages').load(toLoad, '', function(response, status, xhr) {
                if (status == 'error') {
                    var msg = "Sorry but there was an error: ";
                    $(".messages").html(msg + xhr.status + " " + xhr.statusText);
                }            
            }).fadeIn(4000, hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut(2000);
        }
        return false;
    });
});

<? // this makes the links open in the same div
// a:not(.profile) allows profile links to open in browser window
// we put class="profile" on profile links.?>
$(".messages").on("click", "a:not(.profile)", function (e) {
    $(".messages").load($(this).attr("href"));
    e.preventDefault();
});