爲什麼<h：outputScript>不起作用<h:form>

我正在使用JSF 2.1。我試圖在<h:inputTextarea>上使用TinyEditor。這裏是我的代碼，爲什麼<h：outputScript>不起作用<h:form>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:p="http://primefaces.org/ui"> 
<h:head> 

    <h:outputStylesheet library="css" name="editor_style.css" /> 
    <h:outputStylesheet library="css" name="css/main.css" /> 
    <h:outputStylesheet library="css" name="css/dropdown.css" />  
    <h:outputScript name="js/tinyeditor.js"></h:outputScript> 
</h:head> 

<h:body> 
    <div class="content"> 
     <ui:include src="/template/layout/commonLayout.xhtml" /> 
     <ui:include src="/template/layout/menu.xhtml" /> 
     <h:form> 
      <div class="quick_links"> 
       <div class="q_title">     
       </div> 
       <div class="q_window"> 
        <div class="q_top"></div> 
        <div class="q_main"> 

         <h:inputTextarea value="#{EditorBean.value}" id="input" 
          style="width:100%; height:300px;">Sample FAQ</h:inputTextarea> 

         <h:outputScript>       
       new TINY.editor.edit('editor',{ 
        id:'input', 
        width:945, 
        height:175, 
        cssclass:'te', 
        controlclass:'tecontrol', 
        rowclass:'teheader', 
        dividerclass:'tedivider', 
        controls:['bold','italic','underline','strikethrough','|','subscript','superscript','|', 
           'orderedlist','unorderedlist','|','outdent','indent','|','leftalign', 
           'centeralign','rightalign','blockjustify','|','unformat','|','undo','redo','n', 
           'font','size','style','|','hr','link','unlink'], 
        footer:true, 
        fonts:['Verdana','Arial','Georgia','Trebuchet MS'], 
        xhtml:true, 
        cssfile:'style.css', 
        bodyid:'editor', 
        footerclass:'tefooter', 
        toggle:{text:'Source',activetext:'HTML',cssclass:'toggle'}, 
        resize:{cssclass:'resize'} 
       }); 
       </h:outputScript> 

        </div> 
        <div class="q_bottom"></div> 
       </div> 
       <h:commandButton value="Savebutton" action="#{EditorBean.test}"></h:commandButton> 
      </div> 
      <div class="push"></div> 
     </h:form> 
    </div> 


</h:body> 
</html>

如果我刪除<h:form>標籤，那麼只有被編輯顯示，但<h:commandButton>不起作用。如果我保留<h:form>標記，那麼<h:commandButton>可以工作，但TinyEditor編輯器不會被初始化。

這是如何造成的，我該如何解決？

來源

2012-12-05 KalaK

<h:outputScript>工作得很好。具體的問題只是在你自己的JavaScript代碼中。你在TinyEditor配置腳本指定了「輸入」的ID：

id:'input',

然而存在與在JSF生成的HTML輸出該ID沒有這樣的HTML元素。是的，您應該查看JSF生成的HTML輸出，因爲這基本上都是瀏覽器正在檢索的內容。 JavaScript不能在網絡服務器上運行，而是在網頁瀏覽器中看到，只能看到JSF生成的HTML輸出。在瀏覽器中點擊右鍵並執行查看源代碼也可以自己查看。

生成的<h:inputTextarea>的ID在此特定結構中具有前綴<h:form>的ID。在您的特定情況下，您沒有爲<h:form>指定任何ID，因此JSF將自動生成一個像j_id123這樣的標識，以便由<h:inputTextarea>生成的<textarea>的HTML元素標識將變爲j_id123:input。您需要在TinyEditor配置腳本中準確指定該ID。

但是，更好的辦法是在<h:form>上指定一個固定ID，因爲無論何時將視圖添加/刪除組件都會自動生成ID。

<h:form id="form"> 
    <h:inputTextarea id="input" /> 
    ...

這種方式產生的<textarea>將獲得form:input的ID。然後你可以在TinyEditor配置腳本中使用它：

id:'form:input',

來源

2012-12-05 12:08:05 BalusC

這個解釋非常有用，謝謝！但它不工作！ – KalaK

如果你已經理解了解釋，那麼你會在更詳細的技術細節中闡述「它的不工作」。但你沒有。所以不可能指出你的錯誤。 – BalusC

對不起！我沒有ü說什麼一樣，我已經做了以下的變化，
的的樣品常見問題 \t ID：「形式：輸入」所以根據代碼，輸入文本值之後，吸氣劑Ñ設定器應該被稱爲其在豆。如果我刪除編輯器，它工作正常！但如果我添加編輯器，它不會！根據你的解釋，我覺得輸入文本區域獲取形式的id：輸入，但是當我在TinyEditor腳本id：'form：input'中使用它時，它失敗！ – KalaK

爲什麼<h：outputScript>不起作用<h:form>

回答

相關問題