Использование SimpleModal и ASP.NET MVC

Я использую Simple Modal с asp.net MVC. Я настроил его с помощью демонстрации OSX, которая загружает представление в диалоговое окно.

Я использую javascript:

jQuery(function($) {

   $("input.ema, a.ema").click(function(e) {
        e.preventDefault();
        $("#osx-modal-content").modal({
            appendTo: 'form',
            overlayId: 'osx-overlay',
            containerId: 'osx-container',
            closeHTML: '<div class="close"><a href="#" class="simplemodal-close">X</a></div>',
            minHeight: 80,
            opacity: 65,
            position: ['0', ],
            overlayClose: true,
            onOpen: OSX.open,
            onClose: OSX.close,
            onShow: OSX.show

        });
    });

    var OSX = {
        container: null,
        open: function(d) {
            var self = this;
            $.ajax({
                url: "/Message/UserMessage/",
                type: 'GET',
                dataType: 'html', // <-- to expect an html response
                success: doSubmitSuccess
            });
            function doSubmitSuccess(result) {
                $('div#osx-modal-data').html(result);
            }

            self.container = d.container[0];
            d.overlay.fadeIn('slow', function() {
                $("#osx-modal-content", self.container).show();
                $('div#osx-modal-title').html("Send Email");
                var title = $("#osx-modal-title", self.container);
                title.show();

                d.container.slideDown('slow', function() {
                    setTimeout(function() {
                        var h = $("#osx-modal-data", self.container).height() +
                        title.height() +
                        20; // padding
                        d.container.animate({
                            height: h
                        }, 200, function() {
                            $("div.close", self.container).show();
                            $("#osx-modal-data", self.container).show();

                        });
                    }, 300);
                });
            })

        },
        close: function(d) {
            var self = this;
            d.container.animate({
                top: "-" + (d.container.height() + 20)
            }, 500, function() {
                self.close(); // or $.modal.close();
            });
        },
        show: function(d) {
            var self = this;
            $("#txtEmail", self.container).hide();
            });

        }
    };


});

В функции показа я пытаюсь скрыть поле txtEmail, но, похоже, он не может его найти.

HTML, который входит в диалог,

<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CreateMessage</title>
</head>
<body>
    <div>

        <p>
            <input id="txtEmail" type="text" style="width: 90%" /></p>
        <p>
            <textarea id="TextArea1" cols="20" rows="5"></textarea></p>
        <p>
            <input id="submitmsg" type="submit" value="Send" /></p>
    </div>
</body>
</html>

Может ли кто-нибудь помочь мне в этом?

Спасибо,


jquery asp.net asp.net-mvc simplemodal
person DanielJaymes    schedule 23.01.2010    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я считаю, что вызов AJAX не завершен к моменту вызова метода show, и поэтому элемент не существует в то время, когда вы собираетесь его скрыть. Вероятно, вам следует переместить весь код, следующий за вызовом ajax в обработчике open, в обратный вызов ajax вместе с кодом для скрытия элемента txtEmail.

var OSX = {
    container: null,
    open: function(d) {
        var self = this;
        $.ajax({
            url: "/Message/UserMessage/",
            type: 'GET',
            dataType: 'html', // <-- to expect an html response
            success: function(html) {
                $('div#osx-modal-data').html(result)
                                       .find("#txtEmail")
                                       .hide();
                ...rest of code to display the dialog...
            }
        });
person tvanfosson    schedule 23.01.2010
comment
Это имело бы смысл, но я новичок в jquery, так где же будет обратный вызов ajax? Извините, если это глупый вопрос. - person DanielJaymes; 23.01.2010
comment
В вашем случае это метод doSubmitSuccess, который, кстати, вы могли бы просто написать встроенным как значение свойства успеха. Я добавлю немного кода для демонстрации. - person tvanfosson; 23.01.2010