views:

1878

answers:

2

Hello.

I have the following test ASPX page:

<head runat="server">
    <title></title>
    <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.6.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {

            var dlg = $("#dialog").dialog({
                bgiframe: true,
                autoOpen: false,
                height: 300,
                modal: true,
                buttons: {
                    'Ok': function() {
                        __doPostBack('TreeNew', '');
                        $(this).dialog('close');
                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                },
                close: function() {
                    dlg.parent().appendTo(jQuery('form:first'));
                }
            });
        });
        function ShowDialog() {
            $('#dialog').dialog('open');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="TreeNew" runat="server" Text="New" 
            OnClientClick="ShowDialog();return false;" onclick="TreeNew_Click"/>
        <asp:Label ID="Message" runat="server"></asp:Label>
        <div id="dialog" title="Select content type">
            <p id="validateTips">All form fields are required.</p>
            <asp:RadioButtonList ID="ContentTypeList" runat="server">
                <asp:ListItem Value="1">Texte</asp:ListItem>
                <asp:ListItem Value="2">Image</asp:ListItem>
                <asp:ListItem Value="3">Audio</asp:ListItem>
                <asp:ListItem Value="4">Video</asp:ListItem>
        </asp:RadioButtonList>
        </div>
    </div>
    </form>
</body>
</html>

I use dlg.parent().appendTo(jQuery('form:first')); on close function to retreive the values from RadioButtonList.

It works well but before the page do the PostBack the div "Dialog" moves below the New button. Why?

A: 

try chaning $(function() { to $(document).ready(function() {

also check where it fails with some sort of javascript debugger opera got builtin and FireFox got FireBug..

Petoj
It doen't work. I haven't found any error.
VansFannel
+2  A: 

I think that this is caused because you are calling:

dlg.parent().appendTo(jQuery('form:first'));

at the close callback. This will move the dialog. Why don't you call this immediately after creating the dialog?

kgiannakakis
Because if I call it immediately after creating dialog I see dialog all the time.
VansFannel
If you have set autoOpen to false (as you have), you shouldn't see the dialog. You should call $("#dialog").dialog() and then dlg.parent().appendTo. If the dialog is always open, check that all js and css files are properly included.
kgiannakakis
I've found the problem. It is about the version of jQuery. As you can see in the question I've been using jquery-1.2.6.min.js and jquery-ui-1.6.custom.min.js. I've changed to jquery-1.3.2.min.js and jquery-ui-1.7.2.custom.min.js and I also add an open function on dialog: open: function(type, data) {$(this).parent().appendTo("form");} and it works!!!
VansFannel
If I specify modal = true, the "modal" div is drawn outside the form tag and on Internet Explorer both scrollbars star getting bigger and bigger continuously. On Firefox both scrollbars appear but they don't grow up.
VansFannel