How to load a partial view in an iframe on ajax call?

Question

I am working on MVC 4 and trying to load a partial view in an iframe using $.ajax call like this :

$(document).ready(function () {

    $("#btnInsert").click(
    function(e) {
        e.preventDefault();
        var loc = window.location.href;
        loc = (loc.substr(loc.length - 1, 1) == "/") ? loc + "Home" : loc;
        console.log(loc + "/Insert");

        $.ajax({
            type: "GET",
            url: loc+ "/Insert",
            success: function (msg) {
                console.log(msg);
                //$('FrameforPopUp.html').html(msg);
                //$("#ShowNextView").css(
                $("#ShowNextView").html(msg);
                //$("ShowNextView").src
                showView(msg);
                $("#ShowNextView").attr("disabled", "enabled");
                //if (msg.d)
                //    showView(msg.d);
                //else
                //    alert("Data is invalid")
            },
            error: function () {
                alert("An unexpected error has occurred during processing.");
            }
        });
    });

    function showView(resultView) {
        $("#ShowNextView").dialog({          //resultView
            modal: true,
            width: "auto",
            height: "auto",
            position: "center",
            resizable: false,
            closeOnEscape: true,
            open: function (ev, ui) {
            }
        });
    }

and my frame is as follows :

<iframe id="ShowNextView" style="visibility:hidden;">

but it is not showing iframe with a pop up.. I want that iframe to load the "Insert" view and show it in pop up after the ajax call on the btnInsert click. Please help?

Answer 1

This is how you can write HTML content into iframe.

$("#btnInsert").click(function (e) {
    // ...
    $.ajax({
        type: "GET",
        url: loc + "/Insert",
        success: function (msg) {
            showView(msg);
        },
        error: function () {
            alert("An unexpected error has occurred during processing.");
        }
    });

});

function showView(resultView) {
    $('<div>').append('<iframe id="ShowNextView"></iframe>').dialog({
        modal: true,
        width: "auto",
        height: "auto",
        position: "center",
        resizable: false,
        closeOnEscape: true,
        open: function (ev, ui) {
            $(this).find('#ShowNextView').contents().find('body').html(resultView);
        }
    });
}

And also remove <iframe id="ShowNextView" style="visibility:hidden;"> from HTML.

Demo: http://jsfiddle.net/ssqxyvjc/