Cambiar atributo "TYPE" de tag <object> en HTML con JS

[Wart]

Buen día!

Les presento mi siguiente problema:

Tengo una página HTML la cual contiene un <object> que va cargando dinámicamente distintas imágenes de tipo PDF, les mostraré una parte de mi código:

Tag Object:

Código HTML:

<object id="imagen" name="imagen" data="" type="application/pdf" width="850px" height="500px">
			alt : <a href="">documento</a>
			</object> 

El atributo "HREF" y "DATA" los cargo dinamicamente con variables en JavaScript basados en una función que se ejecuta al presionar un botón, la acción que realiza el cambio es la siguiente:

Código:

$("#imagen").attr('href','http://192.168.1.38:8080/share/proxy/alfresco/api/node/content/'+arDocumento[x]+'')

Hasta ahí todo bien.

El problema es que necesito cambiar dinamicamente el "TYPE" de <object> para poder cargar documentos de distinta extension (word, imagen, etc.) y no sólo PDF.

Probé utilizando el mismo método:

Código:

$("#imagen").attr('type',arTipoDato[x]);

Pero por alguna razón no funciona.

Notas: El método en sí funciona (asignar el valor a TYPE con una variable), ya que probé con un "alert" obtener el TYPE después de modificarlo:

Código:

alert($("#imagen").attr('type'))

Y me entrega correctamente el tipo de dato que voy asignando. El problema es que la imagen no se muestra a pesar de asignarle el type correcto.

Probé así también:

Código:

$("#imagen").attr('type','application/pdf');

Y a pesar de que si se asigna el valor, la imagen o documento no se muestra. Sólo lo hace correctamente si asigno el TYPE desde el html directamente.

¿Alguna idea?

Saludos

[dAvidcA]

Buen día Wart, en este caso se puede utilizar los métodos clone() y replaceWith() de jQuery.

Hice este ejemplo en el que al presionar varias veces el botón "Cambiar", el tag Object se transforma en varias cosas: PDF, IMG, SWF, HTML..etc

HTML

Código HTML:

<button id="probando">Cambiar</button><br/><br/>
<div id="tipo"></div><br/>
<object id="obj" width="500px" height="400px"></object>
 

JAVASCRIPT

Código Javascript:

$(document).ready(function() {
    var objetoSel = 0;
 
    $("#probando").click(function() {
        objetoSel++;
        var newObject = $("#obj").clone(true);
        
        switch(objetoSel){
            case 1:
                $("#tipo").html("PDF");
                newObject.attr("type", "application/pdf");
                newObject.attr("data", "http://nccp.athletics.ca/pdfs/course_desc/Clubcoachoutcomes.pdf");
                $("#obj").replaceWith(newObject);
                break;
            case 2:
                $("#tipo").html("IMG");
                newObject.attr("type", "image/png");
                newObject.attr("data", "http://memecrunch.com/meme/2B76X/my-code-works/image.jpg");
                $("#obj").replaceWith(newObject);
                break;
            case 3:
                $("#tipo").html("SWF");
                newObject.attr("type", "application/x-shockwave-flash");
                newObject.attr("data", "http://www.w3schools.com/html/bookmark.swf");
                $("#obj").replaceWith(newObject);
                break;
            case 4:
                $("#tipo").html("HTML");
                newObject.attr("type", "text/html");
                newObject.attr("data", "http://www.w3schools.com/html/snippet.html");
                $("#obj").replaceWith(newObject);
                break;
            default:            
                $("#tipo").html("(EN BLANCO)");
                newObject.attr("type", "");
                newObject.attr("data", "");
                $("#obj").replaceWith(newObject);
                objetoSel = 0;
                break;
        }
    });
 
});
 

Espero sirva.

Saludos