Jquery ui对话框关闭，但html代码仍保留在页面上，导致在多次使用该框时该框无法打开_Jquery_Ruby On Rails_Ajax

Jquery ui对话框关闭，但html代码仍保留在页面上，导致在多次使用该框时该框无法打开

jquery ruby-on-rails ajax

Jquery ui对话框关闭，但html代码仍保留在页面上，导致在多次使用该框时该框无法打开,jquery,ruby-on-rails,ajax,Jquery,Ruby On Rails,Ajax,我有一个带有弹出框的页面，用于将tds替换为新的tds。第一次该框工作正常，但每次单击“提交”后，该框都会继续显示。我注意到框的html在每次调用时都会添加到页面中，但它并没有消失以下是调用按钮前源代码的外观：。。。按下按钮1次后：。。。三次之后：您可以看到ui对话框div一直挂起下面是控制该框的html.erb文件： <head> <script> $(function() { $( "#dialog" ).d

我有一个带有弹出框的页面，用于将

td

s替换为新的

td

s。第一次该框工作正常，但每次单击“提交”后，该框都会继续显示。我注意到框的html在每次调用时都会添加到页面中，但它并没有消失

以下是调用按钮前源代码的外观：

。。。按下按钮1次后：

。。。三次之后：

您可以看到ui对话框div一直挂起

下面是控制该框的html.erb文件：

<head>
    <script>  
    $(function() {    
        $( "#dialog" ).dialog();  
        $( ".btn" ).click(function(){
             $( "#dialog" ).dialog("close"); 
        });
    });  
    </script>
</head>
    <body> <div id="dialog" title="Select Item">
        Position <%= @i %><br /><br />   
       <%= form_tag( {:controller => :foos, :action => :update_bar_position, :position => @i , :id => @foo.id }, :remote => true) do %>
            <table>
                <tr>
                    <td>
                        <%= select_tag :position_name, options_for_select(@selection_list) %>
                    </td>
                    <td>
                        <%= hidden_field_tag 'position', @i %>
                        <%= submit_tag "Add" ,:id=> "Add", :class => "btn" %>

                    </td>
                </tr>
            </table>
        <% end %>
       </div>  
    </body>


$（函数（）{
$（“#dialog”）.dialog（）；
$（“.btn”）。单击（函数（）{
$（“对话框”）。对话框（“关闭”）；
});
});  
位置


：foos，：action=>：update_bar_position，：position=>@i，：id=>@foo.id}，：remote=>true）do%>
“添加”，：类=>“btn”%>

有人能告诉我为什么这个框的html代码在第一次使用后仍然存在吗？谢谢

下面是打开对话框的js.erb代码：

$("div#show_selection_box").html("<%= escape_javascript(render(:partial => 'foos/show_selection_box', :locals => { :id => @foo.id, :selection_list => @selection_list }  ))%>");

$（“div#show_selection_box”）.html（“'foos/show_selection_box'，：locals=>{:id=>@foo.id，：selection_list=>@selection_list}”）%>”；

您需要按如下方式更新脚本：

<script>  
$(function() {    
    $("#dialog" ).dialog();  
    $(".btn" ).click(function(){
         $("#dialog" ).dialog('destroy').remove();
    });
});  
</script>


$（函数（）{
$（“#dialog”）.dialog（）；
$（“.btn”）。单击（函数（）{
$（“#dialog”）.dialog（'destroy'）.remove（）；
});
});

destroy将销毁对话框，remove将从DOM中删除元素。

jquery ui对话框的默认行为是将对话框保留在DOM树中，并使用

$('#dialog').dialog('open');
$('#dialog').dialog('close');

如果要销毁该对话框，应调用：

$('#dialog').dialog('destroy');

请注意，这只会删除jquery ui在

“#dialog”

节点周围添加的数据

如果还要删除节点，还应调用：

$('#dialog').remove();

在做了建议的更改后，我在JS控制台上得到以下错误：

Uncaught错误：初始化之前无法调用对话框上的方法；试图调用方法“destroy”

对话框尚不存在，请测试对话框是否已被对话first@TCHdvlp，您可以指导我如何操作吗？首先尝试编辑的代码，如果您只是想在不调用对话框的情况下进行测试，您可以检查

$（“#dialog”）.hasClass（“ui dialog”）

。。。例如，我尝试了你的解决方案，但现在当我提交按钮时页面会重新加载。我替换了

$（#dialog”）.dialog（“close”）$（“#dialog”）.dialog（'destroy'）。remove（）页面将重新加载。如果不希望重新加载页面，请使用event.preventDefault（）@JSWorld，如果我放置event.preventDefault（）在$（“#dialog”）.dialog（'destroy'）.remove（）之后，框的行为正常，但rails控制器方法没有被调用。理想情况下，在RoR中，您应该在update_bar_position.JS.erb文件中作为方法的回调执行所有这些JS操作，该文件将在操作成功完成后被调用，对话框关闭。@JSWorld，如果我理解，您的建议是使用命令关闭_update_bar_position.js.erb中的对话框？恐怕我对jquery了解不够，无法实现这一点。我想我下周末有个项目。根据你发布的代码，$（“#dialog”）.dialog（）仅在pageload上调用一次。在您的应用程序中如何调用此代码段？我按下一个按钮打开对话框。此单击处理程序的代码是什么？url是通过ajax调用加载的吗？这很奇怪，因为它是Ruby on Rails。单击调用返回javascript数据的控制器方法。我真的不明白其中的细节。