jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了将编辑按钮添加到JQuery UI对话框,然后加载到新对话框中大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
必须有一个更清洁的方式来做我想在这里做的事情……

我有一个jquery Ui对话框,当我点击FullCalendar插件中的eventClick处理程序时会打开该对话框.

该对话框包含事件的详细信息.在表单的底部应该有一个编辑按钮,它将关闭对话框并打开一个带有可编辑表单的新对话框.

在大多数情况下,我已成功,因为编辑按钮确实会在对话框中显示编辑表单.但它不是一个新的对话框,它与第一次点击时的对话框相同,上面有确定和编辑按钮.

如何为编辑表单打开一个新对话框?

下面是eventClick函数

eventClick: function(event) {                  
                if (event.url) {                           
                     $('#details')
                       .load(event.url)
                       .dialog({                               
                           title: 'Event Details',buttons: { "Ok": function() { $(this).dialog("close"); },"Edit": function() {
                                        $(this).dialog("close");
                                        $('#details').load('/Events/Edit/' + event.id)
                                                     .dialog({
                                                       title: 'Edit'
                                                           });                                                   
                                                       } }                                   
                            });                                
                        return false;
                    }
                },

解决方法

我看到可能导致您出现问题的两个问题:

>对话框(‘close’)只是关闭
对话框,但不会清空它
内容.如果你想清空
对话框并将其恢复为干净
州,你想用
对话框( ‘破坏’).
>你有几个load()函数调用串在一起,但是
没有任何回调.所以你的
尝试加载内容的加载
from / Events / Edit / eventID是
解雇,但后来你马上
再次显示对话框.该
load()函数一个回调函数
将被执行的参数
内容返回时
url传入load()
功能.这样,你的对话框
会在内容出现后显示
已从服务器收到.

我认为你可以组织你的代码便它更易于维护(但它还涉及将一些匿名函数分解为命名函数)的方法如下:

eventClick: function(event) {
    if(event.url) {
        $("#details").load(event.url,loadDialog(event.id));  //call loadDialog once you get content BACk from your URL
    }
}

function loadDialog(eventId) {
    $("#details").dialog({
        title: "Event Details",buttons: {
            "OK" : function() { $(this).dialog("close"); },//this just closes it - doesn't clean it up!!
            "Edit" : function() {
                $(this).dialog("destroy");  //this completely empties the dialog
                                           //and returns it to its initial state
                $("#details").load("/Events/Edit/" + eventId,loadEditDialog($(this)));
            }
        }
    });
}

function loadEditDialog(theDialogContainer) {  //this is a simple dialog display function -- Could be inlined
    $(theDialogContainer).dialog({
        title: "Edit"
    });
}

我希望这有帮助!上面的所有代码都没有经过测试,因此可能存在拼写错误 – 它主要是伪代码来解释我的推理.如果有问题,请告诉我,我会相应地更新我的问题.

@H_696_53@

大佬总结

以上是大佬教程为你收集整理的将编辑按钮添加到JQuery UI对话框,然后加载到新对话框中全部内容,希望文章能够帮你解决将编辑按钮添加到JQuery UI对话框,然后加载到新对话框中所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。