Question

I am trying to change the content of the div using javascript/jquery. While the code works on IE9, FF, Chrome, Safari and Opera. It fails on IE 8. I have already tried .append, .appendTo, .innerHTML. The content of the container div is always empty

What could be wrong. The code is

<script type="text/javascript">
jQuery(document).ready(
function()
{
var containers = jQuery('.page_content');


if (!containers.length)
{
return
}
var container = containers.eq(0);

container.block();
jQuery.get("<?php echo Router::url( array('controller' => 'user',
                        'action' => 'profile',
                        'admin' => false));
 ?>
    ", function(data)
    {
    if (jQuery.browser.msie)
    {

        alert(container.html()); //returns correct result
        container.empty();
        container.innerHTML = new String(data); 
        alert(data); //shows right output, some html
        alert(container.html()); //is always empty
    }
    else
    {
        container.html(data);
    }
    container.unblock();
    }
    );

    }

    );
</script>

Answer 1

Use replaceWith:

$(container).replaceWith(data);

That is, if data is the same div content as of the original.

Note: I am using IE8 to test.