如何进行 django 就地编辑以及基于 AJAX 的 django 无尽分页答案

【问题标题】：How to do django inplace-edit along with AJAX based django endless-pagination如何进行 django 就地编辑以及基于 AJAX 的 django 无尽分页
【发布时间】：2014-05-12 21:38:19
【问题描述】：

基于 AJAX 的 django 无尽分页有 2 个模板： 1.主要issue_detail.html 2.分页模板issue_detail_page.html

在 base.html 模板中，就在 extra_header 块之前：

{% inplace_static %}

我尝试在 issue_detail_page.html 中执行以下操作：

{% load endless %}
{% load inplace_edit %}

{% lazy_paginate 2 completed_actions using "completed_actions_page" %}
    {% for action in completed_actions %}
        <tr>
            <td><a href="{% url 'action_detail' issuelist.id issue.id action.id %}">{{action.title}}</a></td>
            <td>{% inplace_edit "action.owner" %}</td>
            <td>{% inplace_edit "action.event_date" %}</td>
            <td>{% inplace_edit "action.state" %}</td>
        </tr>
    {% endfor %}
{% show_more %}

但 Ajax 加载的页面（表格数据）不可编辑。

查了html，发现第一个/原始表数据是：

<span class="inplaceedit textinplaceedit enable">

而稍后通过单击“更多”链接使用 AJAX 加载的页面表数据是：

<span class="inplaceedit textinplaceedit">

有人可以建议如何进行这项工作吗？

【问题讨论】：

标签： javascript ajax django django-endless-pagination django-inplaceedit

【解决方案1】：

试试这个：

$.getScript("{{ STATIC_URL }}js/jquery.json.js").done(function( script, textStatus ) {
$.getScript("{{ STATIC_URL }}js/jquery.inplaceeditform.js").done(function( script, textStatus ) {
    var options = {"getFieldUrl": "/inplaceeditform/get_field/",
            "saveURL": "/inplaceeditform/save/",
            "successText": "Successfully saved",
            "eventInplaceEdit": "click",
            "disableClick": true,
            "autoSave": true,
            "unsavedChanges": "You have unsaved changes!",
            "enableClass": "enable",
            "fieldTypes": "input, select, textarea",
            "focusWhenEditing": true};
     var inplaceManager = $(".inplaceedit:not(.enable)").inplaceeditform(options);
     inplaceManager.enable();
});
});

【讨论】：

【解决方案2】：

替换文件inplace_js.html和jquery.inplaceeditform.js：

inplace_js.html:

<!-- it needs jquery to work
<script src="//code.jquery.com/jquery-2.1.4.js" type="text/javascript"></script>
-->
<script src="{{ STATIC_URL }}js/jquery.json.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}js/jquery.inplaceeditform.js" type="text/javascript"></script>
<script type="text/javascript">
    $.inplaceeditform.inplaceManager={}
    $.inplaceeditform.inplaceManager.options = {"getFieldUrl": "{{ inplace_get_field_url }}",
                                               "saveURL": "{{ inplace_save_url }}",
                                               "successText": "{{ success_text }}",
                                               "eventInplaceEdit": "{{ event }}",
                                               "disableClick": {{ disable_click }},
                                               "autoSave": {{ auto_save }},
                                               "unsavedChanges": "{{ unsaved_changes }}",
                                               "enableClass": "{{ enable_class }}",
                                               "fieldTypes": "{{ field_types }}",
                                               "focusWhenEditing": {{ focus_when_editing }}};
</script>
<script src="{{ STATIC_URL }}js/jquery.inplaceeditform.hooks.js" type="text/javascript"></script>

{% if activate_inplaceedit %}
    <script type="text/javascript">
        var isIE = function () {
            if(typeof jQuery!== typeof undefined && jQuery.browser === undefined){
                jQuery.browser = { msie : true};
        }};
    </script>
    <!--[if IE]>
        <script type="text/javascript">
            isIE(); /* IE <= 9*/
        </script>
    <![endif]-->
    <!--[if !IE]><!-->
        <script type="text/javascript"> 
            if (/*@cc_on!@*/false) { 
                isIE(); /* IE 10*/
            }
        </script>
    <!--<![endif]-->
    <script type="text/javascript">

        (function($){
            $(document).ready(function () {
                {% include "inplaceeditform/inc.extra_options.html" %}

                {% if not toolbar %}
                    $.inplaceeditform.inplaceManager.enable();
                {% else %}
                    {% include "inplaceeditform/inc.inplace_toolbar.html" %}
                {% endif %}

        });
    })(jQuery);
    </script>
    {% include "inplaceeditform/inc.csrf_token.html" %}
    {{ inplace_js_extra|safe }}
{% endif %}

jquery.inplaceeditform.js:

$.extend($.inplaceeditform.inplaceManager, {
    enable: function () {
        $(".inplaceedit").inplaceeditform($.inplaceeditform.inplaceManager.options).enable();
    },
    disable: function () {
        $(".inplaceedit").inplaceeditform($.inplaceeditform.inplaceManager.options).disable();
    }
});

要在任何地方启用就地编辑，请尝试： $.inplaceeditform.inplaceManager.enable();

【讨论】：