oracle-adfjquery-tokeninputjspx

Jquery tokeninput in Oracle ADF


loopj Jquery tokeninput works correctly in HTML. but when I want to use it in oracle ADF form (jspx), it doesn't work. my page loads without errors.

<af:resource type="javascript" source="/js/jquery.min.js"/>  
<af:resource type="javascript" source="/js/jquery.tokeninput.js"/> 

 <af:resource type="javascript">
      $(document).ready(function() {
        $("#demo-input-facebook-theme").tokenInput([
            {id: 7, name: "Ruby"},
            {id: 11, name: "Python"},
            {id: 13, name: "JavaScript"},
            {id: 17, name: "ActionScript"},
            {id: 19, name: "Scheme"},
            {id: 23, name: "Lisp"},
            {id: 29, name: "C#"},
            {id: 31, name: "Fortran"},
            {id: 37, name: "Visual Basic"},
            {id: 41, name: "C"},
            {id: 43, name: "C++"},
            {id: 47, name: "Java"}
        ], {
            theme: "facebook"
        });
    });
    </af:resource>

 <af:form id="f1">
  <af:pageTemplate viewId="/oracle/templates/threeColumnTemplate.jspx"
                     id="pt1">
    <f:facet name="center">

         <af:inputText label="input" id="demo-input-facebook-theme" contentStyle="font-weight:bold;">

          </af:inputText>
      </f:facet>
     </af:pageTemplate>
     </af:form>

What's wrong with my code?


Solution

  • Problem solved. this is my final code:

       <f:view>
    <af:document id="d1">
    <af:resource type="javascript" source="/javascript/libs/jquery-1.4.4.js"/>
      <af:resource type="javascript" source="/resources/js/jquery.tokeninput.js"/>
    
       <af:resource type="css" source="/resources/styles/token-input.css"/>
    <af:resource type="css" source="/resources/styles/token-input-facebook.css"/>
    
    <af:resource type="javascript">
    $(document).ready(function() {
           $("input[name=it1]").tokenInput([
                {id: 7, name: "Ruby"},
                {id: 11, name: "Python"},
                {id: 13, name: "JavaScript"},
                {id: 17, name: "ActionScript"},
                {id: 29, name: "C#"},
                {id: 31, name: "Fortran"},
                {id: 37, name: "Visual Basic"},
                {id: 41, name: "C"},
                {id: 43, name: "C++"},
                {id: 47, name: "Java"}
            ],{
                theme: "facebook"
            });
        });
      </af:resource>
      <af:form id="f1">
       <af:inputText label="Enter Text :" id="it1" contentStyle="font-weight:bold;">
                </af:inputText>
      </af:form>
    </af:document>
    </f:view>