Using SimpleModal and ASP.NET MVC_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-18 08:47 出处：网络

I am using Simple Modal with asp.net MVC. I have set it up using the OSX demo, which loads a view into the dialog.

The javascript I am using is:

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();
            });

        }
    };


});

On the show function I am trying to hide the txtEmail box, but it doesnt seem to be able to find it.

The HTML which is going into the dialog is

<%@ 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>

Can anyone help me out on this?

Thanks,

I believe that the AJAX call hasn't completed by the time the show method is invoked and thus the element doesn't exist at the time that you are going to hide it. You should probably move all of the code following the ajax call in the open handler into the ajax callback, along with the code to hide the txtEmail element.

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...
            }
        });