从AJAX加载的内容中关闭对话框

时间:2013-10-09 12:18:31

标签: javascript jquery ajax

我有一个jquery ui对话框,通过ajax加载其内容:

$('#register').click(function(e) {
    var tag = $('<div></div>');
    $.ajax({
        url: 'signup.html',
        success: function(data) {
            tag.html(data).dialog({modal: true}).dialog('open');
        }
    });
    e.preventDefault();
    return false;
});

我在内容中有第二个脚本,当按下提交按钮时,该脚本应该关闭对话框

$(function() {
    $('form #submit').click(function(e) {
        $(this).parents('.ui-dialog').dialog('close');
        e.preventDefault();
        return false;
    });
});

当我点击提交按钮时,我收到错误:

  

未捕获错误:在初始化之前无法调用对话框上的方法;试图调用方法'关闭'

我错过了什么让我从通过ajax加载的内容中关闭对话框?

2 个答案:

答案 0 :(得分:1)

你必须在dialog('close') $('。ui-dialog')dialog('open') was called before. You're calling the function on $('。ui-dialog ...')`。<的元素上调用instead of。 / p>

您应该在代码中为tag元素定义id或class:

var tag = $('<div id="signup-id"></div>');

然后在点击处理程序中找到正确的元素,如下所示:

$(this).parents('.ui-dialog').children('#signup-id').dialog('close');

注意:如果您确定#signup-id永远不会包含$(this).children('#signup-id')元素,则可以直接在点击处理程序中找到signup.html,如signup-id标识。

答案 1 :(得分:0)

在html中定义标记对话框

<div id="tag_dialog" style="display:none">
</div>

然后准备好文件:

$(document).ready(function(){
    $('#tag_dialog').dialog({
        modal:true,
        autoOpen:false,
        //you could give some other options such as width, height .....
    });
    $('#register').click(function(e) {
       $.ajax({
           url: 'signup.html',
           success: function(data) {
               $('#tag_dialog').html(data).dialog('open');
           }
       });
       e.preventDefault();
       return false;
   });
    $('form #submit').click(function(e) {
        $('#tag_dialog').dialog('close');
        e.preventDefault();
        return false;
    });
});