2012-09-18 72 views
0

我試圖初始化我的對話框中的選項卡,但它們不起作用。對話框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"); 


       } 
      }); 

回答

0

您需要的對話框打開後並初始化你的標籤。

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

如果沒有,你可以按順序撥打呼叫.tabs().dialog()

+0

您的代碼似乎是好的,但大火只是如果我把一個破發點中的Firebug調試器上$(「#標籤」)。標籤(); – kakuki

+0

也許你有另一個很好的提示來解決我的問題 – kakuki