How can I replace an <object...> with the actual content of that object?

Question

Lets say I have this:

<object class="MyClass" type="text/html" data="/Whatever/1?renderpartial=1"></object>
<object class="MyClass" type="text/html" data="/Whatever/2?renderpartial=1"></object>

And, I want to use jQuery to replace the object with the actual HTML of the object.

<script type="text/javascript">
    $(document).ready(function() {
        $(".MyClass").before('<div class="MyClass">#CONTENT#</div>').remove();
    });
</script>

I want to fire off an asynchronous request to go get each of '/Whatever/1' and '/Whatever/2' from the server and put it in place of '#CONTENT#'.

Is this possible?

Answer 1

you can use the jquery load function:

$(".MyClass").each(function(){
  $(this).replace("<div>").load($(this).attr("data"));
});

Answer 2

To replace the original object as a div:

$(function(){
    $('.MyClass').each(function(){
        var $current = $(this);
        $.post($current.attr('data'), function(data){
            $current.replaceWith('<div>' + data + '</div>');
        })
    });
});