2013-05-06 67 views
0

我在重複控制中有一個字段。現在,我在onChange事件中使用viewScope來捕獲重複控件中的字段值。每次該字段必須進行部分刷新才能獲取範圍變量中設置的值。從重複控制獲取值

這裏的問題是,當用戶設置重複控制之外的焦點,焦點不設置,直到場的局部刷新完成。有時候,當用戶訪問遠程多米諾服務器時,局部刷新速度太慢。提交表單時,是否有一種有效的方法來捕獲重複控制中的值?

這個想法是當用戶點擊添加按鈕時動態創建字段。將焦點從重複控制內的區域移動到重複控制區域外時,會出現問題。直到重複控制內的字段部分刷新完成,焦點纔會被設置。如果服務器在您的機器上本地運行,則可能不會發生這種情況。下面的代碼顯示了重複控制的使用,以創建字段動態

<xp:button value="Add Objects" id="addNavObj"> 
    <xp:eventHandler event="onclick" submit="true" 
     refreshId="objLine" refreshMode="partial" id="eventHandler24"> 
     <xp:this.action><![CDATA[#{javascript:viewScope.rowItems=viewScope.rowItems+1;getComponent("navObjRep").setValue(parseInt(viewScope.rowItems));}]]></xp:this.action> 
    </xp:eventHandler> 
</xp:button> 
<xp:repeat rows="30" var="rowData" indexVar="rowIndex" 
    repeatControls="false" first="0" value="#{javascript:viewScope.rowItems}" 
    id="navObjRep" style="width:800.0px"> 
    <xp:panel style="width:800.0px" id="objLine"> 
     <xp:table style="width:800.0px"> 
      <xp:tr> 
       <xp:td style="width:245.0px"> 
        <xp:inputText id="objType" style="width:130.0px"> 
         <xp:typeAhead mode="full" minChars="1" ignoreCase="true" 
          id="typeAhead4" rendered="false"> 
         </xp:typeAhead> 
        </xp:inputText> 
       </xp:td> 
       <xp:td style="width:46.0px"> 
        <xp:inputText id="objCode"> 
         <xp:eventHandler event="onchange" submit="true" 
          refreshMode="partial" refreshId="objCode" id="eventHandler3"> 
          <xp:this.action><![CDATA[#{javascript:viewScope['objCode'+rowIndex] = getComponent("objCode").getValue()}]]></xp:this.action> 
         </xp:eventHandler> 
        </xp:inputText> 
       </xp:td> 
       <xp:td style="width:300.0px"> 
        <xp:inputTextarea id="objDesc" style="height:40.0px;width:200.0px"> 
         <xp:eventHandler event="onclick" submit="false" id="eventHandler40"></xp:eventHandler> 
         <xp:eventHandler event="onchange" submit="true" 
          refreshMode="partial" refreshId="objDesc" id="eventHandler4"> 
          <xp:this.action><![CDATA[#{javascript:viewScope['objDesc'+rowIndex] = getComponent("objDesc").getValue()}]]></xp:this.action> 
         </xp:eventHandler> 
        </xp:inputTextarea> 
       </xp:td> 
      </xp:tr> 
     </xp:table> 
    </xp:panel> 
</xp:repeat> 
+0

您需要退一步:您嘗試實現的功能是什麼?最終,解決方案與您的方法完全不同。所以多分享一點! – stwissel 2013-05-06 10:44:02

+0

只是爲了清楚我明白你:當你點擊按鈕刷新整個重複控制,你也可以在onTextArea的onChange處理程序中執行此操作(爲什麼那個?OnChange會很頻繁地觸發,除非你有複選框/收音機/下拉菜單它往往會在往返中造成很多問題)。響應需要一些時間(網絡,CPU),所以一旦數據回來,它就會擾亂客戶端的焦點。 - 你想要達到什麼用戶體驗?我仍然缺少那部分。 – stwissel 2013-05-06 22:48:54

+0

在上面的標記中,每次單擊添加對象按鈕時,刷新重複控件以添加具有動態創建字段的新表格行。具有部分刷新的onChange事件被設置爲內部的所有字段以捕獲字段內的值並在viewScope中設置。如果用戶想要爲他們的購買訂單添加新的行項目或爲每個活動添加時間表那天 – shibu 2013-05-07 03:56:37

回答

0

不要使用一個編輯框的onChange事件的局部刷新 - 你創造一種體驗惡夢。 Excercise 23有你需要的。

0

它只是一個簡單的,例如與輸入的可變數量的重複控制和計算Fields.Hope它可以幫助你解決你的問題。

<xp:this.beforePageLoad><![CDATA[#{javascript:var languages:java.util.Vector = @Explode("de,en,pl",","); 
       viewScope.put("allLanguages",languages); 
       viewScope.put("selectedLanguages", languages)}]]> 
    </xp:this.beforePageLoad> 

<xp:checkBoxGroup id="checkBoxGroup1" value="#{viewScope.selectedLanguages}"> 
    <xp:this.defaultValue><![CDATA[#{javascript:return viewScope.get("allLanguages");}]]></xp:this.defaultValue> 
    <xp:eventHandler event="onchange" submit="true" refreshMode="complete"> 
     <xp:this.action><![CDATA[#{javascript:// full update //partial update}]]></xp:this.action> 
    </xp:eventHandler> 
    <xp:selectItems> 
     <xp:this.value><![CDATA[#{javascript:return viewScope.get("allLanguages");}]]></xp:this.value> 
    </xp:selectItems> 
</xp:checkBoxGroup> 

<xp:repeat id="repeat1" rows="30" var="varcollection" repeatControls="true"> 
      <xp:this.value><![CDATA[#{javascript:return viewScope.get("allLanguages");}]]></xp:this.value> 

    <xp:span> 
     <xp:this.rendered><![CDATA[#{javascript:var vec:java.util.Vector = viewScope.get("selectedLanguages"); 
    return @IsMember(varcollection,vec); 
    }]]></xp:this.rendered> 

       <xp:label id="label1"> 
        <xp:this.value><![CDATA[#{javascript:return varcollection + ": ";}]]></xp:this.value> 
       </xp:label> 

       <xp:inputText id="inputText1" loaded="true"> 
        <xp:this.value><![CDATA[${javascript:var fieldName = "Help_" + varcollection; 
    return '#{viewScope.' + fieldName + '}';}]]></xp:this.value> 

        <xp:eventHandler event="onchange" submit="true" 
         refreshMode="partial" refreshId="computedField1"> 
        </xp:eventHandler></xp:inputText> 
       &#160;&#160;<xp:text escape="true" id="computedField4"><xp:this.value><![CDATA[#{javascript:var fieldName = "Help_" + varcollection; 
    return '#{viewScope.' + fieldName + '}';}]]></xp:this.value></xp:text>&#160;&#160; 
       <xp:text escape="true" id="computedField1"> 
        <xp:this.value><![CDATA[${javascript:var fieldName = "Help_" + varcollection; 
    return '#{viewScope.' + fieldName + '}'; 
    }]]></xp:this.value> 
       </xp:text> 

       <xp:br></xp:br> 

      </xp:span> 

     </xp:repeat> <xp:br></xp:br> 
       <xp:button value="Submit" id="button1"> 
       <xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true"></xp:eventHandler></xp:button> 
       <xp:br></xp:br> 
       <xp:br></xp:br> 
       <xp:text escape="true" id="computedField3"><xp:this.value><![CDATA[#{javascript:return "value1 = " +viewScope["Help_de"] + 
        "value2 = " +viewScope["Help_en"] + 
        "value3 = " +viewScope["Help_pl"]}]]></xp:this.value></xp:text> 

最後computet場:computetdField3將獲得價值'onSubmit'和其他onChange

+0

感謝您的答覆。對視圖範圍變量的使用有了新的想法。如果重複控制設置爲true,上面的例子就可以工作。當控件設置爲false時,它失敗。在這裏我試圖添加字段動態使用添加按鈕,同時提交的值從重複控制 – shibu 2013-05-06 09:31:22

+0

裏面生成的字段中檢索它失敗,因爲如果你關閉重複控制你不能recive任何索引變種,控件('label2','inputText2'和'comptutedField5/2')我創建到不同的數據源'(ScopeVariables)'。我同意stwissel maby你需要一個完全的解決方案來解決你的問題,所以maby給了我們更多的背景。 – 2013-05-06 11:31:04

0

我爲了同樣的問題而苦苦掙扎了幾個小時。 我從不同的視圖重複建立,甚至對結果進行一些合併,以顯示每行3個字段的良好輸入矩陣。 我想爲重複中填充字段的每一行創建新文檔。

部分刷新確實是一場噩夢。

最終,我結束了客戶端腳本onfocusonChange事件,以將我的數據添加到頁面上的隱藏字段。我連接每行3個字段,並將它們放在由§分隔的隱藏字段中。
當按下提交按鈕時,我只是得到服務器端的那個隱藏字段的值,@Explode("§")它並且運行通過新創建的數組並且從它們創建文檔。