javascript - Django Admin - RelatedObjectLookups - 它如何刷新并在父窗口上设置选择？

Question

我希望我的一个表单像管理页面一样工作，所以我想我会查看代码并了解它是如何工作的。

具体来说，我希望用户能够单击选择列表旁边的“+”图标，然后转到管理页面的弹出窗体以添加新项目。

当他们在那里输入新项目时，我希望该新项目出现在选择框中并被选中(就像此功能在管理页面上的工作方式一样)。

我将 admin js 库复制到我自己的模板中，并让我的链接调用相同的 JS 函数，弹出窗口确实打开正确，但在我保存新对象后，弹出窗口变为空白而不是关闭，什么也没有发生在父页面上。

这是我在页面中放置的内容:

...
<td>
    <div class="fieldWrapper">
        <select name="form-0-plasmid" id="id_form-0-plasmid">
        ...
        </select>
        <a href="/admin/VirusTracker/plasmid/add/" class="add-another" id="add_id_plasmid" onclick="return showAddAnotherPopup(this);"> <img src="/media/admin/img/admin/icon_addlink.gif" width="10" height="10" alt="Add Another"/></a>
    </div>
</td>
...

我尝试单步执行管理表单上的 javascript 以查看它是如何工作的，但我没有看到任何可以关闭窗口或填充父窗口选择的内容。

在此先感谢您的帮助。

更新 3

运行 dismissAddAnotherPopup 时出现此 javascript 错误

"SelectBox is not defined"

它指向 dismissAddAnotherPopup 中的这一行

SelectBox.add_to_cache(toId, o);

我以为我知道 Javascript，但我不明白该变量应该来自哪里 :-(

更新 2

似乎一切正常。在弹出窗口中单击保存后，我得到一个空白页面。这是该页面的来源:

<script type="text/javascript">opener.dismissAddAnotherPopup(window, "9", "CMV_flex_myr_GENE1_._._WPRE_BGH");</script>

所以看起来这个 javascript 没有被执行或者失败了。

更新

这里是大牛提到的相关代码。所以唯一的问题是这段代码要么没有触发，要么触发不正确。

django/contrib/admin/options.py:

...
        if request.POST.has_key("_popup"):
            return HttpResponse('<script type="text/javascript">opener.dismissAddAnotherPopup(window, "%s", "%s");</script>' % \
                # escape() calls force_unicode.
                (escape(pk_value), escapejs(obj)))
...

/media/admin/js/admin/RelatedObjectLookups.js:

function dismissAddAnotherPopup(win, newId, newRepr) {
    // newId and newRepr are expected to have previously been escaped by
    // django.utils.html.escape.
    newId = html_unescape(newId);
    newRepr = html_unescape(newRepr);
    var name = windowname_to_id(win.name);
    var elem = document.getElementById(name);
    if (elem) {
        if (elem.nodeName == 'SELECT') {
            var o = new Option(newRepr, newId);
            elem.options[elem.options.length] = o;
            o.selected = true;
        } else if (elem.nodeName == 'INPUT') {
            if (elem.className.indexOf('vManyToManyRawIdAdminField') != -1 && elem.value) {
                elem.value += ',' + newId;
            } else {
                elem.value = newId;
            }
        }
    } else {
        var toId = name + "_to";
        elem = document.getElementById(toId);
        var o = new Option(newRepr, newId);
        SelectBox.add_to_cache(toId, o);
        SelectBox.redisplay(toId);
    }
    win.close();
}

Answer 1

好的，javascript 仅使用启动元素的 id 属性来标识要更新的选择字段。 (从 beginig 中删除“add_”之后)。

所以我只是更改了链接的 id 属性以匹配模板中选择元素的 id:

<a href="/admin/VirusTracker/plasmid/add/" class="add-another" id="add_id_{{field.html_name}}" onclick="return showAddAnotherPopup(this);"> <img src="/media/admin/img/admin/icon_addlink.gif" width="10" height="10" alt="Add Another"/></a>

哇，我希望这在某个地方被记录下来了!我为此浪费了几个小时。

(请参阅我对问题的更新，了解有关其工作原理的更多技术细节。)