Pracuję nad systemem przesyłania wiadomości. Skończyłem skrzynkę odbiorczą i części do przeglądania wiadomości. Są one ładowane do div na stronie konta użytkownika i wszystko działa bez odświeżania strony.

Jquery oparłem na toTen artykuł.

Otrzymałem pomoc w uzyskaniu linków do wiadomości, aby otworzyć wiadomość w div bez odświeżania strony i dodawania filtrów, aby umożliwić odświeżanie linków profilu i przejście do rzeczywistej strony profilu. To wszystko dobrze.

Przeniosłem się do strony wysyłającej wiadomości, która używa modalnego (twitter bootstrap) do załadowania zewnętrznego formularza. To też działa, ale spędziłem wiele lat, próbując dowiedzieć się, jak zrobić to samo, co z linkami, przesyłając formularz, tzn. Wysyłając go bez odświeżania całej strony. Ponownie używam prawie tego samego jQuery, co w części skrzynki odbiorczej.

Oto kod skrzynki odbiorczej:

<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();
});