Question

I am trying to get a JQueryUI (1.8.23) dialog to work on an ASP.NET MVC view. I have specified the dialog to “autoOpen: false” and have specified some buttons on the dialog as well.

The first problem is that the dialog doesn’t seem to respect the “autoOpen: false” declaration and always opens when the page loads. The second problem is that the buttons I have specified don’t display; either when I open the dialog from links on the page or when it opens when the page loads.

My Javascript that sets up the dialog is:

        $(function() {
        var actionUrl = "";

        var passReason = $("#passReason"),
        allFields = $([]).add(passReason);

        $("#pass-dialog").dialog({
            autoOpen: false,
            height: 100,
            width: 300,
            modal: true,
            buttons: {
                "Pass": function() {
                    actionUrl = actionUrl.replace('COMMENT', escape(passReason.combobox('getValue')));
                    document.location = actionUrl;
                    $(this).dialog("close");
                },
                "Cancel": function() {
                    $(this).dialog("close");
                }
            },
            close: function() {
                $(this).dialog("close");
            }
        });


        $(function() {
            $("#passReason").combobox({
                url: '<%= Url.Action("GetOverrideReasonCodes", "Statistics") %>',
                valueField: 'code',
                textField: 'description',
                method: 'GET',
                mode: 'remote'
            });
        });
    });

    function getManagerComment(jobId, routeId, crisId) {
        actionUrl = '<%= Url.Action("ManualCompleteSegment", "Statistics", new RouteValueDictionary{{"jobId", "JOBID"}, {"routeId", "ROUTEID"}, {"crisId", "CRISID"}, {"comment", "COMMENT"} }) %>';
        actionUrl = actionUrl.replace('JOBID', jobId);
        actionUrl = actionUrl.replace('ROUTEID', routeId);
        actionUrl = actionUrl.replace('CRISID', crisId);

        $("#pass-dialog").dialog("open");
    }

    function getManagerRouteComment(jobId, routeId) {
        actionUrl = '<%= Url.Action("ManualCompleteRoute", "Statistics", new RouteValueDictionary{{"jobId", "JOBID"}, {"routeId", "ROUTEID"}, {"comment", "COMMENT"} }) %>';
        actionUrl = actionUrl.replace('JOBID', jobId);
        actionUrl = actionUrl.replace('ROUTEID', routeId);

        $("#pass-dialog").dialog("open");
    }

and the that represents the content of my dialog is:

    <div id="pass-dialog" title="Enter Pass Reason">
    <form>
    <fieldset>
        <label for="passReason">Pass Reason: </label>
        <input id="passReason" name="passReason" class="easyui-combobox" />
    </fieldset>
    </form>
</div>

I have the beneath the emitted HTML.

Any suggestions?

Thanks,
Matthew

Answer 1

Found out there was a conflict between jQueryUI and “EasyUI” CSS files. Once I removed the EasyUI from the equation and went to a more manual population of my dropdown, everything worked as expected.