How to do django inplace-edit along with AJAX based django endless-pagination

Question

AJAX based django endless-pagination has 2 templates: 1. The main issue_detail.html 2. The pagination template issue_detail_page.html

In the base.html template, right before extra_header block I have:

{% inplace_static %}

I try to do the following in the 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 %}

But the Ajax loaded pages (table data) are not editable.

I checked the HTML and found that the first/original table data is:

<span class="inplaceedit textinplaceedit enable">

Whereas the page later table data loaded using AJAX by clicking on the "more" link is:

<span class="inplaceedit textinplaceedit">

Can someone please suggest on how to make this work?

Answer 1

Replace file inplace_js.html and 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();
      }
  });
  

To enable inplaceedit anywhere, try: $.inplaceeditform.inplaceManager.enable();

Answer 2

Try this:

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