Question

I have 2 divs in an HTML page -that need refreshing when an event is triggered.
One of the divs, if display:none and will not refresh with the new data.

Is it not possible to refresh display:none divs?
My JavaScript is below,

$('#messages_send').live('click', function() {
$.ajax({
    url: base_url + 'ajax/send_message',
    data: {
        username: $('#messages_username').val(),
        message: $('#messages_message').val(),
        saveid: $('#messages_savedid').val(),
    },
    success: function(data) {
        sending_message();

        var x = jQuery.parseJSON(data);

        if(x) {
            if(x.gp_id==80)
            {
                    $('#spn_ucredit').load(base_url + 'ajax/userdata/credits');
                    $('#overlay_credits').load(base_url + 'ajax/userdata/credits');
            }
        }
        //$('#spn_ucredit').html($('#ncd_id').val());
        //tmp_cost = $('#spn_ucredit').html()-$('#ncd_id').val();
        //$('#ncd_id').val($('#ncd_id').val()-tmp_cost);
        //alert(data);
        setTimeout(message_sent, 2000);
        setTimeout(remove_modal_box, 3000);
        setTimeout(message_revert, 3500);
        $("#saved_messages").load(base_url + 'messages #saved_messages > form');
        //setTimeout($("#messages_content").load(base_url + 'messages #messages_content > form'), 1000);
        //$.get(base_url + 'messages #saved_messages > form', null, function(result){ $("#saved_messages").html(result) });
        //$("#messages_content").css("visibility","hidden").show();
        //$.get(base_url + 'messages #messages_content > form', null, function(result){ $("#messages_content").html(result) });
        //$("#messages_content").css("visibility","visible").hide();
    }
});

return false;

});

Answer 1

using .hide() lets a div be edited , while setting display:none makes it a lot harder

“The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css(‘display’, ‘none’), except that the value of the display property is saved in jQuery’s data cache so that display can later be restored to its initial value. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.”

So if it’s important that you’re able to revert to the previous value of display, you’d better use hide() because that way the previous state is remembered. Apart from that there’s no difference.

from resource on jQuery’s .hide() Here

Also , there are SO questions on this as well – Here’s an example of one