Hi Support,

I am loading a partial view from an MVC controller. The partial view contains a div for my igDialog, and a javascript section to initiate the dialog.

But when the partial view is loaded, the elements within the div are just appended to the page, and I get an error in my console: "VM97:3 Uncaught TypeError: $(...).igDialog is not a function"

Can you please advise?

Thank you for your help.

I am loading the partial view using an ajax call:

$("#show-quote-entry-button").on("click", function () {
    $.ajax({
        method: 'post',
        url: '/QuoteEntry/Index',
        cache: false
    })
    .done(function (partialView) {
        $("#market-view").append(partialView);
    })
    .fail(function (xhr, status, errorThrown) {
        window.alert("Problem bringing up dialog " + selectedNode.data.PageName);
        console.log("Error: " + errorThrown);
        console.log("Status: " + status);
        console.dir(xhr);
    })
});

Here is my partial view:

@model WebApplicationExample.Models.QuoteEntryModel

<style type="text/css">
    ul {
        list-style-type: none;
    }

    #layout {
        position: relative;
    }

    .ig-layout-item {
        padding: 5px;
    }

    .ig-layout-item > div {
        position: absolute;
        height: auto;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        margin: 5px;
    }

    .quote-entry-section {
        background-color: #fff;
        border: 1px solid #888;
        color: grey;
    }

    .quote-entry-section-title {
        color: #fff;
        background-color: #888;
        font-size: 16px;
        padding: 6px 0 10px 10px;
    }

    .box table td {
        padding: 0;
    }

    .box-body-big-text {
        font-size: 60px;
        margin-top: 15px;
        text-align: center;
        color: #f60;
    }
</style>

<script type="text/javascript">
    $(function () {
        $("#quote-entry-dialog").igDialog({
            pinOnMinimized: false,
            //container: "#body-content",
            pinned: false,
            modal: false,
            draggable: true,
            resizable: true,
            trackFocus: false,
            //closeButtonTitle: "Close Quote Window",
            //minimizeButtonTitle: "Minimize Quote Window",
            //maximizeButtonTitle: "Maximize Quote Window",
            //pinButtonTitle: "Pin Quote Window",
            //unpinButtonTitle: "Unpin Quote Window",
            //restoreButtonTitle: "Restore Quote Window",
            showMinimizeButton: true,
            showMaximizeButton: true,
            showPinButton: true,
            width: "240px",
            height: "320px",
            minWidth: 350,
            minHeight: 150,
            position: { left: 50, top: 100 },
            enableDblclick: false,
            showFooter: true,
            headerText: name,
            showHeader: true,
            closeOnEscape: false,
            openAnimation: "fade",
            closeAnimation: "fade",
            stateChanged: function (evt, ui) {
                if (ui.action == "close") {
                    $("#quote-entry-dialog").remove();
                }
            }
        });
    });
</script>

<div id="quote-entry-dialog">
    <div id="quote-entry-content">
        <div class="quote-entry-section">
            <div class="quote-entry-section-title">Instrument</div>
            <div class="quote-entry-instrument-section" id="quote-entry-instrument-section">

            </div>
        </div>
        <div class="quote-entry-section">
            <div class="quote-entry-section-title">Strategy</div>
            <div class="quote-entry-strategy-section" id="quote-entry-strategy-section"></div>
        </div>
        <div class="quote-entry-section">
            <div class="quote-entry-section-title">Bid/Ask</div>
            <div class="quote-entry-bidask-section" id="quote-entry-bidask-section"></div>
        </div>
    </div>
</div>