0

我正在尝试将 magicsuggest 插件实现到单页应用程序中，每次从选定列表中添加或删除项目时，我都需要将插件添加到 ajax 服务器。

$(ms).on('selectionchange', function(event, combo, selection) {
   // save selected item to database
   addToDatabase(ms.getValue()[ms.getValue().length-1]);
})


$("span.ms-close-btn").bind("click",function(event) {
   var theValue=$(this).parent().text()
   deleteFromDatabase(tValue);
})

我有一个具有这两个功能的单页应用程序。当一个项目被添加到选择列表时，我想调用 addItemToDatabase 它将使用 ajax 提交值并将其添加到数据库

当单击关闭按钮 (x) 时，我想让 magicsuggest 执行其默认行为，即从选择中删除项目，并且还调用我的 deleteFromDatabase 函数，该函数将通过 ajax 将项目 ID/值发送到服务器并从数据库中删除项目。

我被困住了。似乎关闭总是首先触发一个 selectionchange 事件。但是，如果我 isSilent 或以某种方式绕过 selectionchange，则默认行为将被取消，并且该项目不会从 dom 中的选定项中删除。

上面的示例代码会正确接受，当单击关闭按钮时，它不仅会删除FromDatabase，还会触发selectionchange并执行addToDatabase。因此，该项目看起来像是被删除了，但在刷新时它就在那里，因为添加和删除函数都已执行。

我希望这足以获得一些帮助。我很难用插件弄清楚事件行为。

任何帮助都会很棒。

4

2 回答 2

1

好的，大约 15 小时后，我得到了这个工作。这是涉及的3个功能。

同样，这允许我通过数据库更新实时添加到选择和从选择中删除。

    // removing item from selection

    function resetClose() {
        $("span.ms-close-btn").not($(".span.ms-close-btn.guest")).bind("click",function() {
        var tValue=$(this).parent().text()
        registration.deleteAttendingEmployee(tValue)
        resetClose() 
    })
    }

   // *** Adding item to selection

        $(ms).bind('selectionchange', function(event, combo, selection){
            $(ms).trigger('addToSelection',[eval(ms.getSelectedItems()),true]);
       })



    $(ms).on('addToSelection', function(selection) {
      registration.addSafetyMeetingAttendee(ms.getValue()[ms.getValue().length-1])
        ms.collapse()
        resetClose() 
    });
于 2013-11-05T22:17:12.237 回答
0

这是基于上述的另一种选择

转到magicsuggest库开发版本；

查找_renderSelection: function() {..};

找到selectedItemEl变量；

修改库；

原线：

selectedItemEl = $('<div/>', {
                            'class': 'ms-sel-item ms-sel-text ' + cfg.selectionCls + validCls,
                            html: selectedItemHtml + (index === (_selection.length - 1) ? '' : cfg.resultAsStringDelimiter)
                        }).data('json', value);

更新：

selectedItemEl = $('<div/>', {
                    'data-id':value[cfg.valueField],
                            'class': 'ms-sel-item ms-sel-text ' + cfg.selectionCls + validCls,
                            html: selectedItemHtml + (index === (_selection.length - 1) ? '' : cfg.resultAsStringDelimiter)
                        }).data('json', value);

捕获选择事件更改并绑定关闭按钮

$(ms).on('selectionchange', function (e, m) {
          $(".ms-close-btn").bind("click", function (event) {
              var theValue = $(this).parent().attr("data-id");
              alert(theValue);             
          });
      });
于 2015-06-16T06:52:30.957 回答