Home/ Questions/Q 564391
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T12:45:41+00:00

I am using Simple Modal with asp.net MVC. I have set it up using

  • 0

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,

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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