舊的對話框打開新的對話框

Question

嗨 我使用的是jquery對話框，當我從atable中選擇一條記錄時，它調用對話框，然後當我關閉它並選擇另一條記錄時，它會打開舊的與新的對話的對話......這是什麼問題

$(document).ready(function() { 
    $("#btnenterpat").click(function() { 
     $("#enter_payment").dialog('open'); 
    }); 
    $("#enter_payment").dialog({ 
     autoOpen: false, 
     resizable: false, 
     modal: true, 
     width: 400, 
     height: 300, 
     buttons: { 
      Cancel: function() { 
       $(this).dialog('close'); 
      }, 
      ok: function() { 
       retur_dialog = 'ok'; 
       $(this).dialog('close'); 
      }, 
     }, 
     beforeClose: function() { 
      if (retur_dialog == 'ok') { 
       $.ajax({ 
        url: 'ssssssss.php', 
        data: { 
         pm1: $("#pm1").val(), 
         pm2: $("#pm2").val(), 
         pm3: $("#pm3").val(), 
         pm4: $("#pm4").val(), 
         pm5: $("#pm5").val(), 
         pm6: $("#pm6").val(), 
         pm7: $("#pm7").val(), 
        }, 

       }); 
      } 
     } 
    }); 
}); 

編輯：

第一頁：

<?php 
    include ("angela_test.php") 
?> 
<div style="font-size:12px;"> 
</div> 
<br /> 
<table id="tbl_angela_test_data"></table> 
<div id="p_angela_test_data"></div> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    var selected_id; 
    var colCap = Array(); 
    var colDef = Array(); 
    var grp_filter = 0; 

     $.ajax({ 
     url: "getColDefs.php" , 
     data: {table: "bk_accounts", userid: "5", groupid: "1"}, 
     dataType: "json", 
     async: false, 
     success: function (data) { 
       colCap = data[0]; 
       colDef = data[1]; 
     } 
     }); 

    var cols = ''; 
    for(i=0; i<colDef.length; i++) { 
     cols += colDef[i].name; 
     if (i != (colDef.length-1)) { 
      cols += ';'; 
     } 
    } 

    jQuery("#tbl_angela_test_data").jqGrid({ 
     url:'admin/angela_test_table_get.php', 
     postData: {columns: cols}, 
     datatype: 'json', 
     mtype: 'POST', 
     height: 'auto', 
     width: 'auto', 
     rowNum: 20, 
     rowList: [10,20,30], 
     colNames: colCap, 
     colModel: colDef, 
     pager: "#p_angela_test_data", 
     viewrecords: true, 
     toolbar: [true, 'both'], 
     caption: "angela_test", 
     onSelectRow: function(id){ 
      selected_id = id; 
      $("#angela_test_del_bnt, #angela_test_edit_bnt").attr("disabled", false); 
      } 
    }); 
    jQuery("#tbl_angela_test_data").setGridWidth(500); 

    $("#t_tbl_angela_test_data").height(40); 
    $("#t_tbl_angela_test_data").append('<button id="angela_test_edit_bnt" style="height:30px; width:100px;" disabled="true">Edit</button>'); 


    // edit button 
    $("#angela_test_edit_bnt").click(function(){ 
     var rw = '#angela_test_item_'+selected_id; 
     var maintab = $("#tabs"); 
     if ($(rw).html() != null) { 
      maintab.tabs('select',rw); 
     } else { 
      maintab.tabs('add',rw,'Edit form'); 
      $(rw, '#tabs').load('admin/angelatest.php?id='+selected_id); 
     } 
    }); 


////////////////////////////// 
}) 
</script> 

，第二頁是：

<?php 
include_once("angela_test.php"); 
?> 
<input type="button" id="btnenterpat" value="Enter Payment"> 

和對話框代碼：

<script type="text/javascript"> 

$(document).ready(function() { 
    $("#btnenterpat").click(function() { 
     $("#angela_test").dialog('open'); 
    }); 

    $("#angela_test").dialog({ 

     autoOpen: false, 
     resizable: false, 
     modal: true, 
     width: 400, 
     height: 300, 
     buttons: { 
      Cancel: function() { 
       $(this).dialog('close'); 
      }, 
      ok: function() { 
       $(this).dialog('close'); 
      }, 
     }, 
    }).parent().find(".ui-dialog-titlebar-close").hide(); 
}); 
</script> 

<!--Enter Payment windows --> 
<div id="angela_test" ></div> 
<!--dialog windows end --> 

Answer 1

調用$('#some-div').dialog('destroy')會調用$('#some-div').dialog(...)之前恢復#some-div元到原來的形態。也許你可以在關閉對話框時考慮這樣做？