Fancytree 编辑扩展禁用 aspx 按钮单击答案

【问题标题】：Fancytree edit extension disable aspx button clickFancytree 编辑扩展禁用 aspx 按钮单击
【发布时间】：2017-09-07 07:28:28
【问题描述】：

我有一个简单的 aspx 页面，只有一个按钮和一个花式树。

按钮点击事件在服务器端运行一个 web 方法来保存树的内容。一切正常，我可以加载信息并将其保存在数据库中。

我的问题是当我在树上使用编辑扩展时。特别是当我按 Enter 键保存节点的新标题时。回车键似乎禁用了我的按钮点击之后。有人在 aspx 页面上使用过花式树的编辑扩展吗？

我只是想不通为什么在我按下回车键确认新节点标题后我的按钮单击不起作用。

这是按钮：

<asp:Button ID="Button1" runat="server" Text="Save" OnClientClick="SaveTree()" />

这里是 Javascript：

 //Save tree
    function SaveTree() {


        //Get information
        var actid = getUrlVars()["activityid"];
        var name = $("#<%= txtName.ClientID %>");
        var desc = $("#<%= txtDescription.ClientID %>");
        var plantid = $("#<%= ddlPlant.ClientID %>");


      
        if (Page_ClientValidate()) {
            var tree = $("#tree").fancytree("getTree");
            var d = tree.toDict(true);
            var test = JSON.stringify(d);
            $.ajax({
                type: "POST",
                url: "EditTree.aspx/SaveTree",
                data: "{treeData:'" + test + "',name:'" + name.val() + "',desc:'" + desc.val() + "',actid:'" + actid + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    alert(msg.d);
                    window.location = "Default.aspx?plantid=" + plantid.val();
                }
            });
        }

    }

这是树：

$(function () {

    
    var me = getUrlVars()["activityid"];

    
    $("#tree").fancytree({

        ajax: { type: "GET", contentType: "application/json" },
        source: { url: "EditTree.aspx/GetTreeData", cache: false, data: { activityid: me } },

        activeVisible: true,
        autoActivate: true,
        autoScroll: true,
        keyboard: true,
        selectMode: 1,

        extensions: ["edit", "dnd"],

        edit: {
            adjustWidthOfs: 4,              // null: don't adjust input size to content
            inputCss: { minWidth: "3em" },
            triggerStart: ["f2"],           //l'édition se fait à partir de la touche F2
            beforeEdit: $.noop,             // Return false to prevent edit mode
            edit: $.noop,                   // Editor was opened (available as data.input)
            beforeClose: $.noop,            // Return false to prevent cancel/save (data.input is available)
            save: $.noop,                   // Save data.input.val() or return false to keep editor open
            close: $.noop,                  // Editor was removed
        } etc...

【问题讨论】：

好吧，我刚刚发现点击事件总是被命中并且服务器端代码也在运行。问题似乎在于 ajax 调用的成功。即使返回值很好，成功中的 javascript 警报也不会显示的原因可能是什么？

标签： jquery asp.net jquery-events fancytree

【解决方案1】：

我找到了答案。 Ajax 代表异步。因此，对服务器端 web 方法的调用始终在运行。但是成功中的警报并不是因为我没有等待响应。我刚刚在 ajax 调用中添加了 async: false，现在它可以工作了。

$.ajax({
    async: false,        
    success: function(data) {
       //alert...
    }
});

太棒了！

【讨论】：