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?
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>