Tapestry 5
  1. Tapestry 5
  2. TAP5-1109

Updating multiple zones within a Form creates anomalous empty text fields

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 5.2.0
    • Fix Version/s: 5.2.0
    • Component/s: tapestry-core
    • Labels:
      None

      Description

      The JSON response includes an extra input field after a select field when using a MultiZoneUpdate. The extra input is then showing up in the rendered page in the browser.

      Example:
      /*

      • Form.java
        */
        package com.test.pages;

      import com.test.model.GenericSelectModel;
      import com.test.vo.SelectObj;
      import java.util.ArrayList;
      import java.util.List;
      import org.apache.tapestry5.EventContext;
      import org.apache.tapestry5.SelectModel;
      import org.apache.tapestry5.ajax.MultiZoneUpdate;
      import org.apache.tapestry5.annotations.Component;
      import org.apache.tapestry5.annotations.Property;
      import org.apache.tapestry5.corelib.components.Select;
      import org.apache.tapestry5.corelib.components.Zone;
      import org.apache.tapestry5.ioc.annotations.Inject;
      import org.apache.tapestry5.ioc.services.PropertyAccess;
      import org.apache.tapestry5.services.Request;

      /**
      *

      • @author aderkey
        */
        public class Form {

      @Inject
      private Request request;

      @Inject
      private PropertyAccess propertyAccess;

      @Component(id="selectValue1", parameters =

      {"model=select1Model", "encoder=select1Model"}

      )
      private Select select1;

      @Property
      private SelectModel select1Model;

      @Property
      private SelectObj selectValue1;

      @Component(id="selectValue2", parameters =

      {"model=select2Model", "encoder=select2Model"}

      )
      private Select select2;

      @Property
      private SelectModel select2Model;

      @Property
      private SelectObj selectValue2;

      @Component(id="select1ValueZone")
      private Zone select1ValueZone;

      @Component(id="select2ValueZone")
      private Zone select2ValueZone;

      void onActivate(EventContext ctx)

      { List<SelectObj> select1List = new ArrayList(); select1List.add(new SelectObj(0, "0 pre ajax")); select1List.add(new SelectObj(1, "1 pre ajax")); select1List.add(new SelectObj(2, "2 pre ajax")); select1List.add(new SelectObj(3, "3 pre ajax")); select1List.add(new SelectObj(4, "4 pre ajax")); select1Model = new GenericSelectModel(select1List, SelectObj.class, "text", "id", propertyAccess); List<SelectObj> select2List = new ArrayList(); select2List.add(new SelectObj(0, "0 pre ajax")); select2List.add(new SelectObj(1, "1 pre ajax")); select2List.add(new SelectObj(2, "2 pre ajax")); select2List.add(new SelectObj(3, "3 pre ajax")); select2Model = new GenericSelectModel(select2List, SelectObj.class, "text", "id", propertyAccess); }

      public Object onValueChangedFromSelectValue1(SelectObj selectObj) {
      System.out.println("onValueChangedSelectValue1");
      List<SelectObj> select2List = new ArrayList();
      select2List.add(new SelectObj(4, "4 post ajax"));
      select2List.add(new SelectObj(5, "5 post ajax"));
      select2List.add(new SelectObj(6, "6 post ajax"));
      select2List.add(new SelectObj(7, "7 post ajax"));
      select2Model = new GenericSelectModel(select2List, SelectObj.class, "text", "id", propertyAccess);

      if(request.isXHR())

      { return new MultiZoneUpdate("select1ValueZone", select1ValueZone.getBody()).add("select2ValueZone", select2ValueZone.getBody()); }

      else

      { return this; }

      }

      }

      Form.tml

      <body t:type="Layout" t:title="form" t:bodyId="formPage" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" xmlns="tapestry:parameter">
      <form t:type="Form" t:id="form" t:clientValidation="false" action="#">
      <select t:type="Select" t:id="selectValue1" t:validate="required" t:zone="select1ValueZone"/>
      <t:zone t:id="select1ValueZone" visible="false">Show</t:zone>
      <t:zone t:id="select2ValueZone"><select t:type="Select" t:id="selectValue2" t:validate="required"/></t:zone>
      </form>
      </body>

      JSON Response:
      {"content":"","zones":

      {"select2ValueZone":"<select id='selectValue2-127fe104b7d' name='selectValue2'><option value='4'>4 post ajax<\/option><option value='5'>5 post ajax<\/option><option value='6'>6 post ajax<\/option><option value='7'>7 post ajax<\/option><\/select><input><\/input>","select1ValueZone":"Show"}

      }

        Activity

        Hide
        Howard M. Lewis Ship added a comment -

        BTW, those empty text fields are supposed to become hidden fields for additional t:formdata, but due to a complex timing issue, the fields are not being updated until after the partial page content has been extracted into the JSON response.

        Show
        Howard M. Lewis Ship added a comment - BTW, those empty text fields are supposed to become hidden fields for additional t:formdata, but due to a complex timing issue, the fields are not being updated until after the partial page content has been extracted into the JSON response.
        Hide
        Howard M. Lewis Ship added a comment -

        I've been able to fiddle with your example and now have a test case. The solution escapes me for the moment, but that will come.

        Show
        Howard M. Lewis Ship added a comment - I've been able to fiddle with your example and now have a test case. The solution escapes me for the moment, but that will come.

          People

          • Assignee:
            Howard M. Lewis Ship
            Reporter:
            Adam Derkey
          • Votes:
            1 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development