怎么做Django的就地编辑与基于AJAX的Django无端分页沿着

Question

基于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"> 

有人可以请建议如何使这项工作？

Answer 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(); 
}); 
}); 

Answer 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(); 
      } 
  }); 
  

随时随地实现inplaceedit，尝试： $.inplaceeditform.inplaceManager.enable();