Using ajaxForm plugin on view that is itself an AJAX response

Question

I am building a messaging system for my site. The mailbox is flat, ie accessing the inbox, or sending a new message does not move to another page, it just toggles divs. When a user clicks a message, an AJAX call replaces the inbox div with the chosen thread. Inside the thread view, there is a form to reply to the message.

A few problems:

1. From inside this thread_view, which sends an AJAX response to a div nested inside the entire mailbox div, I don't have access to document objects outside of it. So, I can't manipulate divs outside of this view, such as the one that receives the AJAX beforeSend and Success messages. I think this may be accomplished with some kind of .load(), though I'm not sure exactly how.

2. My AJAX doesn't fire. I am using the Ajax.Form() plugin. I think this problem might be related to the first, but I can't say for certain. I'm not sure how to begin troubleshooting the Ajax request because I get no errors in the console.

3. I wonder if the problem has to do with the fact that I am trying to send an ajaxRequest from a view that is itself a response from a previous ajaxRequest, ie the entire view for the thread is a result of the following, in the same js file as the next request:

    // compose a message function $('#send_message').on("click", function(e) { var send_message_options = { type: 'post', url: "/users/new_message", beforeSend: function() { //Display a loading message while waiting for the ajax call to complete $('#message').html("Sending message..."); }, // Hide form and display results success: function(response) { $('#message').html(response); } }; $('#message_form').ajaxForm(send_message_options); }); 

My new AJAX request, which does nothing:

$('#reply_in_thread').on("submit", function(e) {
e.preventDefault();
console.log("trying for reply");

var reply_options = {
    type: 'post',
    url: "/users/reply",
    beforeSend: function() {
        //Display a loading message while waiting for the ajax call to complete
        $('#reply_message').html("Sending message...");
    },
    // Hide form and display results
    success: function(response) {
        $('#reply_message').html(response);
    }
};

$('#reply_in_thread').ajaxForm(reply_options);

});

Answer 1

I couldn't say why the ajaxForm() plugin failed, but a jquery $.post was successful. The code that worked below:

$('#reply_in_thread').on("submit", function(e) {
e.preventDefault();   

var data = $(this).serialize();

$.post('/users/reply',data,function(response){
    $('#reply_message').html(response);
})

});