Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
235
Calling jquery from partial view result
posted

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>