对话框内的选项卡不会呈现

时间:2012-09-18 08:56:58

标签: jquery jquery-ui tabs

我正在尝试初始化对话框中的标签但它们不起作用。对话框html通过初始化附加。我正在取回原始的html。我尝试的代码看起来如下。但是在带有断点的萤火虫中,代码可以正常工作

//HTML
<div id="tabs">
    <ul>
        <li><a href="#tab-1">Edit</a>
        </li>
        <li><a href="#tab-2">Send Email</a>
        </li>
    </ul>



    <div id="tab-1">

        <form action="#" method="post" id="edit_form"></form>
    </div>
    <div id="tab-2">
        <div id="contact-wrapper">
            <form method="post" action="mailer.php" id="contactform"></form>
        </div>

    </div>

</div>

和Javascript

  // Init Dialog
        $('a.open_dialog').click(function() {
            $('#tabs').tabs();

            $('<div />').appendTo('body').load($(this).attr('href')).dialog({
                title: $(this).attr('title'),
                modal: true,
                draggable: false,
                width: 800,
                position: 'top',
                buttons: {
                    "Save": function() {
                        $.ajax({
                               type: "POST",
                               url: 'action.php',
                               data: $("#edit_form").serialize(), // serializes the form's elements.
                               success: function(data)
                               {
                                   alert(data); // show response from the php script.
                               }
                             });

                    },
                    "Send Email": function() {

                        $.ajax({
                               type: "POST",
                               url: 'mailer.php',
                               data: $("#contactform").serialize(), // serializes the form's elements.
                               success: function(data)
                               {
                                   alert(data); // show response from the php script.
                               }
                             });
                    }
                },
                close: function() {
                    location.reload(true);
                    allFields.val( "" ).removeClass( "ui-state-error" );


                }
            });

1 个答案:

答案 0 :(得分:0)

您需要在对话框打开后初始化选项卡。

$('<div />').dialog({
    open : function(){  //In case of autoOpen = true
      $('#tabs').tabs();
    }
});

如果没有,您可以在.tabs()

之后按顺序拨打.dialog()