Calling jquery from partial view result

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>

Hello,

The error states that igDialog is not defined which will depend on how the Ignite UI files are being loaded to your project.

Please provide more information on how the Ignite UI files are being loaded to your project. Are the files included locally or is this by referencing the CDN?

Hi Elliot, 

I am referring to the ignite UI files using the cdn:

Ignite UI Required Combined CSS Files:
http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/themes/infragistics/infragistics.theme.css
http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/infragistics.css

Ignite UI Required Combined JavaScript Files:
http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.core.js
http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.dv.js
http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.lob.js

Hello,

Including these files within your project should be enough to instantiate the igDialog control within your project. Please provide more details on where in the project the cdn links are being referenced. They are most likely contained within the head of the html page containing this project and if this is the case, this could be a scoping issue as the partial view does not have access to the jQuery object ($).