ListBox: Navigation methods should not be created when rendering ListBox (#20161014-741678).

These methods were generated when rendering the ListBox and with the id
of the ListBox in their name. However, a customer reported the following
problem on Accounting Periods ListBox:

  1. Display Accounting Period ListBox on ZEO-1.
       => The ListBox will be rendered and 'listbox_period_list_*' methods will be generated on ZEO-1.
  2.  Click on 'Next Page' button and the user is redirect to ZEO-2 where the ListBox has never been generated.
       => The method does not exist yet and thus a 404 error is raised.

Instead of having one method per ListBox ID, only one is now created (eg
listbox_setPage() for SelectionTool.setPage()) at Zope startup and the
ListBox ID previously defined in the method name is now defined in the
value attributes of the buttons.

bt5/erp5_accounting_ui_test/PathTemplateItem/portal_tests/accounting_zuite/test_accounting_module/test_accounting_transaction_module_empty_transactions.html.zpt

@@ -174,7 +174,7 @@ Accounting Transaction Module Displays empty Transactions
 </tr>
 <tr>
   <td>clickAndWait</td>
-  <td>//input[@class="listbox-check-all"]</td>
+  <td>//button[@class="listbox-check-all"]</td>
   <td></td>
 </tr>
 <tr>

bt5/erp5_accounting_ui_test/PathTemplateItem/portal_tests/accounting_zuite/test_accounting_transaction_template/test_template.zpt

@@ -227,7 +227,7 @@ Test Accounting Transaction Template
 </tr>
 <tr>
   <td>clickAndWait</td>
-  <td>//input[@class="listbox-check-all"]</td>
+  <td>//button[@class="listbox-check-all"]</td>
   <td></td>
 </tr>
 <tr>

bt5/erp5_knowledge_pad_ui_test/PathTemplateItem/portal_tests/gadgets_zuite/testBasicGadgetSystem.zpt

@@ -120,7 +120,7 @@
 </tr>
 <tr>
   <td>clickAndWait</td>
-  <td>//input[@class="listbox-check-all"]</td>
+  <td>//button[@class="listbox-check-all"]</td>
   <td></td>
 </tr>
 <tr>

bt5/erp5_ui_test/PathTemplateItem/portal_tests/listbox_zuite/testLabelLine.zpt

@@ -16,12 +16,12 @@
 <tal:block metal:use-macro="here/ListBoxZuite_CommonTemplate/macros/init" />
 <tr>
   <td>verifyElementPresent</td>
-  <td>//input[@class="listbox-check-all"]</td>
+  <td>//button[@class="listbox-check-all"]</td>
   <td></td>
 </tr>
 <tr>
   <td>verifyElementPresent</td>
-  <td>//input[@class="listbox-uncheck-all"]</td>
+  <td>//button[@class="listbox-uncheck-all"]</td>
   <td></td>
 </tr>
 <tr>
@@ -66,12 +66,12 @@
 </tr>
 <tr>
   <td>verifyElementNotPresent</td>
-  <td>//input[@class="listbox-check-all"]</td>
+  <td>//button[@class="listbox-check-all"]</td>
   <td></td>
 </tr>
 <tr>
   <td>verifyElementNotPresent</td>
-  <td>//input[@class="listbox-uncheck-all"]</td>
+  <td>//button[@class="listbox-uncheck-all"]</td>
   <td></td>
 </tr>
 <tr>

product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/ListBox_asHTML.zpt

@@ -226,22 +226,26 @@
             <th tal:condition="python: show_select_column"
                 class="listbox-table-select-cell">
            
-              <input class="listbox-check-all"
-                     type="image"
-                     name="checkAll:method" value="1"
+              <button class="listbox-check-all" title="Check All"
+                      type="submit" name="listbox_checkAll:method" value="listbox"
+                      tal:attributes="value string:${field_id}"
+                      i18n:domain="ui" i18n:attributes="title">
+                <img class="listbox-check-all" src="images/checkall.png"
                      alt="Check All" title="Check All"
-                     tal:attributes="name string:${field_id}_checkAll:method;
-                                     src string:${portal_url_string}/images/checkall.png"
-                     i18n:domain="ui" i18n:attributes="title" />
+                     tal:attributes="src string:${portal_url_string}/images/checkall.png"
+                     i18n:domain="ui" i18n:attributes="title;alt" />
+              </button>
               &nbsp;
-              <input class="listbox-uncheck-all"
-                     type="image" 
-                     name="uncheckAll:method" value="1"
+              <button class="listbox-uncheck-all" title="Uncheck All"
+                      type="submit" name="listbox_uncheckAll:method" value="listbox"
+                      tal:attributes="value string:${field_id}"
+                      i18n:domain="ui" i18n:attributes="title">
+                <img class="listbox-uncheck-all" src="images/decheckall.png"
                      alt="Uncheck All" title="Uncheck All"
-                     tal:attributes="src string:${portal_url_string}/images/decheckall.png;
-                                     name string:${field_id}_uncheckAll:method;"
-                     i18n:domain="ui" i18n:attributes="title" />         
-                  
+                     tal:attributes="src string:${portal_url_string}/images/decheckall.png;"
+                     i18n:domain="ui" i18n:attributes="title;alt" />
+              </button>
+
               </th>
 
               <!-- Label column row -->

product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/ListBox_asHTMLLibrary.zpt

@@ -161,17 +161,17 @@
 
     <tal:block tal:condition="python: here.current_page > 0">
       <button type="submit"
-              title="First Page" name="firstPage:method"
+              title="First Page" name="listbox_firstPage:method" value="listbox"
               class="listbox_first_page"
-              tal:attributes="name string:${field_id}_firstPage:method;
+              tal:attributes="value string:${field_id};
                               class python: test(is_default_listbox_field, 'listbox_first_page', 'listbox_first_page %s_first_page' %field_id)"
               i18n:domain="ui" i18n:attributes="title">
         <span class="image"/>
       </button>
       <button type="submit"
-              title="Previous Page" name="previousPage:method"
+              title="Previous Page" name="listbox_previousPage:method" value="listbox"
               class="listbox_previous_page"
-              tal:attributes="name string:${field_id}_previousPage:method;
+              tal:attributes="value string:${field_id};
                               class python: test(is_default_listbox_field, 'listbox_previous_page', 'listbox_previous_page %s_previous_page' %field_id)"
               i18n:domain="ui" i18n:attributes="title">
         <span class="image"/>
@@ -186,15 +186,15 @@
 
     <tal:block tal:condition="python: here.current_page < here.total_pages - 1">
       <button type="submit"
-              title="Next Page" name="nextPage:method" class="listbox_next_page"
-              tal:attributes="name string:${field_id}_nextPage:method;
+              title="Next Page" name="listbox_nextPage:method" value="listbox" class="listbox_next_page"
+              tal:attributes="value string:${field_id};
                               class python: test(is_default_listbox_field, 'listbox_next_page', 'listbox_next_page %s_next_page' %field_id)"
               i18n:domain="ui" i18n:attributes="title">
         <span class="image"/>
       </button>
       <button type="submit"
-              title="Last Page" name="lastPage:method" class="listbox_last_page"
-              tal:attributes="name string:${field_id}_lastPage:method;
+              title="Last Page" name="listbox_lastPage:method" value="listbox" class="listbox_last_page"
+              tal:attributes="value string:${field_id};
                               class python: test(is_default_listbox_field, 'listbox_last_page', 'listbox_last_page %s_last_page' %field_id)"
               i18n:domain="ui" i18n:attributes="title" >
         <span class="image"/>
@@ -265,13 +265,18 @@
 
   <!-- Type in listbox navigation --> 
   <tal:block metal:define-macro="type_in_page_navigation">
+    <input type="submit"
+           id="listbox_setPage" class="hidden_button"
+           name="listbox_setPage:method" value="listbox"
+           tal:attributes="value string:${field_id};
+                           id string:${field_id}_setPage" />
     <input class="listbox_set_page" 
            name="page_start" onblur="this.value=this.defaultValue"
            tal:attributes="name string:${field_id}_page_start;
                            class python: test(is_default_listbox_field, 'listbox_set_page', 'listbox_set_page %s_set_page' %field_id);
                            value python:here.current_page + 1;
                            size python:len(str(here.total_pages));
-                           onkeypress string:submitFormOnEnter(event, this.form, '${field_id}_setPage')" />
+                           onkeypress string:submitFormOnEnter(event, $$('#${field_id}_setPage'))" />
     / <tal:block content="here/total_pages" />
   </tal:block>
 

product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/erp5.js.js

@@ -16,9 +16,14 @@ along with this program; if not, write to the Free Software
 Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 */
 
-function submitAction(form, act) {
-  form.action = act;
-  form.submit();
+function submitAction(form_or_submit, act) {
+  if ($(form_or_submit).is('form')) {
+    form = form_or_submit;
+    form.action = act;
+    form.submit();
+  } else {
+    form_or_submit.click();
+  }
 }
 
 // This function will be called when the user click the save button. As 
@@ -144,18 +149,22 @@ function fixLeftRightHeightAndFocus(fix_height) {
 // and modify respective main form action
 // if clear_changed_flag is set to true, changed will be set to false, so no
 // warning message about unsaved changes will be displayed
-function submitFormOnEnter(event, form, method_name, clear_changed_flag, element){
+function submitFormOnEnter(event, form_or_submit, method_name, clear_changed_flag, element){
   if (clear_changed_flag === null){ clear_changed_flag = false; }
   if(event.keyCode == 13){
-    if (form == "main_form") {
-      form = document.forms[form]; // backward compatibility
-    }
-    $('<input />').attr('type', 'hidden').attr('name', method_name + ':method').appendTo(form);
-    $('#hidden_button').prop('disabled', true);
     if (clear_changed_flag === true) {
       changed = false;
     }
-    form.submit();
+    if ($(form_or_submit).is('form')) {
+      form = form_or_submit;
+      if (form == "main_form") {
+        form = document.forms[form]; // backward compatibility
+      }
+      form.action = method_name;
+      form.submit();
+    } else {
+      form_or_submit.click();
+    }
     event.preventDefault();
     return false;
   }

product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/erp5_listbox.css.css

@@ -393,10 +393,12 @@ table.listbox input{
   float:none;
 }
 
-table.listbox input.listbox-check-all,
-table.listbox input.listbox-uncheck-all,
+table.listbox button.listbox-check-all,
+table.listbox button.listbox-uncheck-all,
 table.listbox input.listbox-select-action{
   width:auto;
+  padding:0;
+  float:none;
 }
 
 .listbox-table-data-cell > .figure{

product/ERP5Form/ListBox.py

@@ -2300,7 +2300,7 @@ class ListBoxHTMLRendererLine(ListBoxRendererLine):
     request.set('cell', brain)
     html_list = []
 
-    # Generate page selection methods based on the Listbox id
+    # Deprecated: Generate page selection methods based on the Listbox id
     createFolderMixInPageSelectionMethod(field_id)
 
     for (original_value, processed_value), (sql, title), alias \

product/ERP5Form/Tool/SelectionTool.py

@@ -1802,9 +1802,9 @@ for x in SelectionTool.__dict__:
     continue
   candidate_method_id_list.append(x)
 
-# Monkey patch FolderMixIn with SelectionTool methods
-#   kept here for compatibility with previous implementations
-#   of Listbox HTML renderer. See bellow new implementation
+# Monkey patch FolderMixIn with SelectionTool methods, and wrapper methods
+# ('listbox_<WRAPPED_METHOD_NAME>()') used to set ListBox properties for
+# pagination
 for property_id in candidate_method_id_list:
   def portal_selection_wrapper(self, wrapper_property_id=property_id, *args, **kw):
     """
@@ -1821,6 +1821,50 @@ for property_id in candidate_method_id_list:
   if security_property is not None:
     setattr(FolderMixIn, security_property_id, security_property)
 
+  def portal_selection_wrapper(self, wrapper_property_id=property_id, *args, **kw):
+    """
+      Wrapper method for SelectionTool.
+    """
+    portal_selection = getToolByName(self, 'portal_selections')
+    request = self.REQUEST
+    try:
+      listbox_id = request.form['listbox_%s' % wrapper_property_id]
+    except KeyError:
+      # Backward-compatibility: Should be removed as soon as
+      # createFolderMixInPageSelectionMethod has been removed
+      warnings.warn(
+        "DEPRECATED: listbox_%s: 'value' attribute of the submit button "
+        "should be set to the ListBox ID and the method name 'listbox_%s" %
+        (wrapper_property_id, wrapper_property_id),
+        DeprecationWarning)
+
+      listbox_id = 'listbox'
+
+    selection_name_property_id = "%s_list_selection_name" % listbox_id
+    listbox_uid_property_id = "%s_uid" % listbox_id
+    list_start_property_id = "%s_list_start" % listbox_id
+    page_start_property_id = "%s_page_start" % listbox_id
+    # Rename request parameters
+    if request.has_key(selection_name_property_id):
+      request.form['list_selection_name'] = request[selection_name_property_id]
+    if request.has_key(listbox_uid_property_id):
+      request.form['listbox_uid'] = request[listbox_uid_property_id]
+    if request.has_key(list_start_property_id):
+      request.form['list_start'] = request[list_start_property_id]
+    if request.has_key(page_start_property_id):
+      request.form['page_start'] = request[page_start_property_id]
+    # Call the wrapper
+    method = getattr(portal_selection, wrapper_property_id)
+    return mapply(method, positional=args, keyword=request,
+                  context=self, bind=1)
+  new_property_id = "listbox_%s" % property_id
+  setattr(FolderMixIn, new_property_id, portal_selection_wrapper)
+  security_property_id = '%s__roles__' % (property_id, )
+  security_property = getattr(SelectionTool, security_property_id, None)
+  if security_property is not None:
+    new_security_property_id = '%s__roles__' % (new_property_id, )
+    setattr(FolderMixIn, new_security_property_id, security_property)
+
 def createFolderMixInPageSelectionMethod(listbox_id):
   """
   This method must be called by listbox at rendering time.
@@ -1832,6 +1876,10 @@ def createFolderMixInPageSelectionMethod(listbox_id):
   multiple multi-page listboxes in view mode. It also
   opens the way towards multiple editable listboxes in the same
   page although this is something which we can not recommend.
+
+  Deprecated because these methods are generated when rendering the
+  ListBox. Therefore, they are only available on the ZEO client
+  where it has been rendered but not the other ZEO clients.
   """
   # Immediately return in the method already exists
   test_method_id = "%s_nextPage" % listbox_id
@@ -1844,6 +1892,13 @@ def createFolderMixInPageSelectionMethod(listbox_id):
       """
         Wrapper method for SelectionTool.
       """
+      warnings.warn(
+        "DEPRECATED: %s_%s: The ListBox ID must not be contained anymore in the "
+        "method name, but instead be in the 'value' attribute of the submit "
+        "button and the method name should be 'listbox_%s'" %
+        (wrapper_listbox_id, wrapper_property_id, wrapper_method_id),
+        DeprecationWarning)
+
       portal_selection = getToolByName(self, 'portal_selections')
       request = self.REQUEST
       selection_name_property_id = "%s_list_selection_name" % listbox_id

product/ERP5Form/www/ListBox_asHTML.zpt

@@ -143,20 +143,31 @@
                     i18n:translate="" i18n:domain="ui"> - <tal:block tal:replace="python: len(here.getCheckedUidList())" i18n:name="number">0</tal:block> item(s) selected</span>
               </td>
 	      <td style="white-space: nowrap; vertical-align: middle; text-align: center;">
-                <input tal:condition="python: here.current_page > 0"
-                  id="listbox_previous_page" type="image" src="1leftarrowv.png"
-                  title="Previous Page" name="previousPage:method"
+                <button tal:condition="python: here.current_page > 0"
+                  id="listbox_previous_page" type="submit"
+                  title="Previous Page" name="listbox_previousPage:method" value="listbox"
                   tal:attributes="id string:${field_id}_previous_page;
-                                  name string:${field_id}_previousPage:method;
-                                  src string:${portal_url_string}/images/1leftarrowv.png"
-                  i18n:domain="ui" i18n:attributes="title" />
+                                  value string:${field_id}"
+                  i18n:domain="ui" i18n:attributes="title">
+                  <img src="1leftarrowv.png"
+                    alt="Previous Page"
+                    title="Previous Page"
+                    tal:attributes="src string:${portal_url_string}/images/1leftarrowv.png"
+                    i18n:domain="ui" i18n:attributes="title;alt" />
+                </button>
               </td>
 	      <td style="white-space: nowrap; vertical-align: middle; text-align: center">
+                <input type="submit"
+                  id="listbox_setPage"
+                  class="hidden_button"
+                  name="listbox_setPage:method" value="listbox"
+                  tal:attributes="value string:${field_id};
+                                  id string:${field_id}_setPage" />
                 <select id="listbox_page_selection" name="list_start" title="Change Page" size="1"
                   tal:define="lines here/getMaxLineNumber"
                   tal:attributes="id string:${field_id}_page_selection;
                                   name string:${field_id}_list_start;
-                                  onchange string:submitAction(this.form, '${context_url}/${field_id}_setPage')"
+                                  onchange string:submitAction($$('#${field_id}_setPage'))"
                   i18n:domain="ui" i18n:attributes="title">
                   <option value="0"
                     tal:repeat="p python: range(0, here.total_pages)"
@@ -166,13 +177,18 @@
                 </select>
               </td>
 	      <td style="white-space: nowrap; vertical-align: middle; text-align: center">
-                <input tal:condition="python: here.current_page < here.total_pages - 1"
-                  id="listbox_next_page" type="image" src="1rightarrowv.png"
-                  title="Next Page" name="nextPage:method"
+                <button tal:condition="python: here.current_page < here.total_pages - 1"
+                  id="listbox_next_page" type="submit"
+                  title="Next Page" name="listbox_nextPage:method" value="listbox"
                   tal:attributes="id string:${field_id}_next_page;
-                                  name string:${field_id}_nextPage:method;
-                                  src string:${portal_url_string}/images/1rightarrowv.png"
-                  i18n:domain="ui" i18n:attributes="title" />
+                                  value string:${field_id}"
+                  i18n:domain="ui" i18n:attributes="title">
+                  <img src="1rightarrowv.png"
+                    alt="Next Page"
+                    title="Next Page"
+                    tal:attributes="src string:${portal_url_string}/images/1rightarrowv.png"
+                    i18n:domain="ui" i18n:attributes="title;alt" />
+                </button>
               </td>
             </tr>
           </table>
@@ -194,18 +210,33 @@
               </td>
               <td tal:condition="show_select_column"
                 class="Data" style="width: 50px; text-align: center; vertical-align: middle">
-                <input id="listbox_check_all" type="image"
-                  name="checkAll:method" value="1"
-                  src="checkall.png" alt="Check All" title="Check All"
+                <button id="listbox_check_all" type="submit"
+                  name="listbox_checkAll:method" value="listbox"
+                  title="Check All"
                   tal:attributes="id string:${field_id}_check_all;
-                                  name string:${field_id}_checkAll:method;
-                                  src string:${portal_url_string}/images/checkall.png"
-                  i18n:domain="ui" i18n:attributes="title" />&nbsp;<input id="listbox_uncheck_all" type="image" name="uncheckAll:method" value="1"
-                  src="%(portal_url_string)s/images/decheckall.png" style="border: 0" alt="Uncheck All" title="Uncheck All"
+                                  value string:${field_id}"
+                  i18n:domain="ui" i18n:attributes="title">
+                  <img class="listbox-check-all"
+                     src="images/checkall.png"
+                     alt="Check All"
+                     title="Check All"
+                     tal:attributes="src string:${portal_url_string}/images/checkall.png"
+                     i18n:domain="ui" i18n:attributes="title;alt" />
+                </button>
+                &nbsp;
+                <button id="listbox_uncheck_all" type="submit"
+                  name="listbox_uncheckAll:method" value="listbox"
+                  title="Uncheck All"
                   tal:attributes="id string:${field_id}_uncheck_all;
-                                  name string:${field_id}_uncheckAll:method;
-                                  src string:${portal_url_string}/images/decheckall.png"
-                  i18n:domain="ui" i18n:attributes="title" />
+                                  value string:${field_id}"
+                  i18n:domain="ui" i18n:attributes="title">
+                  <img class="listbox-uncheck-all"
+                    src="images/decheckall.png"
+                    alt="Uncheck All"
+                    title="Uncheck All"
+                    tal:attributes="src string:${portal_url_string}/images/decheckall.png;"
+                    i18n:domain="ui" i18n:attributes="title;alt" />
+                </button>
               </td>
               <tal:block tal:repeat="value here/getLabelValueList">
                 <tal:block tal:define="sql python: value[0];