How to display either image (img) or pdf (iframe)?

Question

Dynamic links I display on my page (rest) may result in jpeg, tif or pdf file in the response.

I tried to do it like this (the images part works fine):

fetchContent(uri){
    $.ajax({ 
        type: "GET",            
        url: uri,

        success: function(output, status, xhr) {
            var contentType = xhr.getResponseHeader("Content-Type");

            if(contentType === "image/jpeg" || contentType === "image/tiff"){

                // IMG: get parent div 'container'
                var $container = $('#container', top.frames["content"].document);
                var img = new Image();

                $(img)
                    .load(function(){
                        // initially hide
                        $(this).hide();
                        $(this).attr('id', 'imgId');

                        // parent div:
                        $container
                            // remove previous image
                            .empty()
                            // add this image
                            .append(this);

                        // fade in image effect
                        $(this).fadeIn();

                    })

                    // set the src attribute of the new image to our image
                    .attr('src', uri);

            }else if(contentType === "application/pdf"){
                // PDF: get parent div 'main'
                var $main = $('#main', top.frames["content"].document);

                $main.empty();
                $main.append("<iframe id='contentIFrame' name='contentIFrame' src='" + uri +
                "' width='100%' style='height:100%'></iframe>");
            }
        },
        complete: function(output){
            $('#navigation-block').append(output);
        },

        error: function(output) {
            $('#navigation-block').append(output);
        }
    });
}

The PDF part doesn't work.

How do I sort that out?

BTW, I control both REST server side and jQuery side so I added correct content-type in REST response header.

I checked out PDF.js and would have used it, but my client unfortunately uses IE8.

Thanks

Answer 1

This is the final solution to the problem of not knowing in advance what a link is going to return (jpeg, tif or pdf):

function fetchImage(uri, $activeLink){
    // show loader div
    var $loadingStatus = $('#loadingStatus', top.frames["content"].document);
    $loadingStatus.fadeIn();

    // remember (select) the link that has just been activated
    $("#navigation-block>ul>li>a.zactive").removeClass("zactive");
    $($activeLink).addClass('zactive');


    $.ajax({
        type: "GET",            
        url: uri,

        success: function(output, status, xhr) {
            // for images use main parent div 'main-img'
            var $mainImg = $('#main-img', top.frames["content"].document);
            // for pdf use parent div 'main-pdf'
            var $mainPdf = $('#main-pdf', top.frames["content"].document);

            // REST service will always return correct content-type
            var contentType = xhr.getResponseHeader("Content-Type");

            if(contentType === "image/jpeg" || contentType === "image/tiff"){

                // for images we also need child div 'container'
                var $container = $('#container', top.frames["content"].document);
                var img = new Image();

                $(img)
                    .load(function(){
                        // default: hide image
                        $(this).hide();
                        $(this).attr('id', 'imgId');

                        // img parent div:
                        $container
                            // remove previous img 
                            .empty() 
                            // insert this img 
                            .append(this); 

                        // hide pdf div and show img div
                        $($mainPdf).hide();
                        $($mainImg).show();

                        // fade in image 
                        $(this).fadeIn();

                        // remove loader div
                        $loadingStatus.stop(true, true).fadeOut();
                    })

                    // set the src attribute of the new image to this uri
                    .attr('src', uri);

            }else if(contentType === "application/pdf"){

                $mainPdf.empty(); // so I don't have to check whether iframe is already there
                $mainPdf.append("<iframe id='contentIFrame' name='contentIFrame' src='" + uri +
                "' width='100%' style='height:100%'></iframe>");

                // hide img div and show pdf div
                $($mainImg).hide();
                $($mainPdf).show();
            }
        },

        error: function(output) {
            alert("error " + output);
        }
    });
}