jQuery load, can see the div in the source code but it is not being displayed

Question

I'm using jQuery's load function to load an error message if an ajax request fails into a div. I can see the div with the loaded contents in my source code but it's not showing up on the page. Any idea what's going on?

$(function() {
    $(".submit").click(function() {

    var element = $(this);

    var id = element.attr('id');

    var note = $('#note-' + id).val();

    $('#message').show();

        $.ajax({
            type: "POST",
            url: "/index.php/notes/new_note",
            data: "id=" + id + "& note=" + note,
            success: function() {
                $('#notes-' + id).load('/index.php/ads #notes-' + id)
                $('#note-' + id).val('')
            }
        });
        $('#message').load('/index.php/ads #message')
        return false;
    });
});

Answer 1

Has #message got any opacity applied to it (either applied through CSS, or by using the fadeTo/ fadeOut jQuery methods). Does the same go for all its parents? Does it have it's visibility CSS property set to 'hidden'?

show() only changes the display css property of the element. It won't change the opacity, visiblity or any of the like of the element, or its parents.

Answer 2

You should probably put the message load into the error handler for the AJAX call or, perhaps, retrieve it from the data returned by the AJAX call, rather than executing it after the AJAX call is made. This is because the AJAX call is asynchronous and it is likely that you are loading the message before the AJAX call is complete. What you do is entirely dependent on your server side code. I'd explore the option of letting the server-side simply generate the entire container, error and all, then simply replacing the contents with the returned value from the call instead of re-invoking some AJAX to get the updated HTML after the original call is complete.

$.ajax({ 
    type: "POST", 
    url: "/index.php/notes/new_note", 
    data: "id=" + id + "& note=" + note, 
    success: function(html) { 
                 $('#note-container').html(html);
             } 
});