I am using JSF 2.1. I'm trying to use TinyEditor on a <h:inputTextarea>. Here is my code,
<!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>
If I remove the <h:form> tag, then only editor gets displayed, but the <h:commandButton> doesn't work.
If I keep the <h:form> tag, then the <h:commandButton> works, but the TinyEditor editor does not get initialized.
How is this caused and how can I solve it?
The <h:outputScript> works perfectly fine. The concrete problem is just in your own JavaScript code. You specified an ID of "input" in the TinyEditor configuration script:
id:'input',
However there is no such HTML element with that ID in the JSF-generated HTML output. Yes, you should be looking at the JSF-generated HTML output, because that's basically all what the browser is retrieving. JavaScript does not run in webserver, but in the webbrowser and sees the JSF-generated HTML output only. Rightclick page in browser and do View Source to see it yourself as well.
The generated ID of the <h:inputTextarea> has in this particular construct the ID of the <h:form> prepended. In your particular case, you didn't specify any ID for the <h:form>, so JSF will autogenerate one like so j_id123 so that the HTML element ID of the <textarea> as generated by <h:inputTextarea> will become j_id123:input. You need to specify exactly that ID in the TinyEditor configuration script.
However, better is to specify a fixed ID on the <h:form>, as the autogenerated ID may change whenever you add/remove components to the view.
<h:form id="form">
<h:inputTextarea id="input" />
...
This way the generated <textarea> will get an ID of form:input. Then you can just use it in the TinyEditor configuration script:
id:'form:input',
Related
Let's say I have a ditamap file.I have published into html5.after published let's say my html file look like
<body id="SampleTopic">
<h1 class="title topictitle1" id="ariaid-title1">Sample topic</h1>
<div class="body">
<p class="p">some<strong class="ph b">bold</strong><span class="ph special">text</span></p>
<div class="p">
<dl class="dl">
<dt class="dt dlterm">Term</dt>
<dd class="dd">Defination</dd>
</dl>
</div>
</div>
</article>
</body>
here in Html file, I want to add some new attribute on the body element like
<body id="SampleTopic" class="test">
so can anyone help me with how to solve this????
can I add some plugin, if yes how to write the code???
If all you need is the HTML #class attribute, then there's no need to develop a custom plug-in.
You can just specify a value for the #outputclass attribute on an element in your DITA source files, and the value will be passed to the HTML #class attribute in the output.
I have a template layout with JSF 2 and primefaces and primefaces extensions layoutPane. The left side has an search area and a structure are. The right side is a details area.
Here a short form of the template:
<html>
<f:view contentType="text/html">
<h:head>
</h:head>
<h:body style="width: 100%; height: 100%;">
<pe:layout id="layoutId">
<pe:layoutPane id="layoutPaneWestId" position="west" size="30%" closable="false" resizeWhileDragging="true">
<pe:layoutPane id="layoutPaneSearchId" position="north" closable="false" resizable="false">
<h:form id="searchForm">
<ui:insert name="search" />
</h:form>
</pe:layoutPane>
<pe:layoutPane id="layoutPaneContentId" position="center">
<h:form id="structureForm">
<ui:insert name="content" />
</h:form>
</pe:layoutPane>
</pe:layoutPane>
<pe:layoutPane id="layoutPaneDetailId" position="center" size="70%" closable="false">
<h:form id="detailsForm">
<ui:insert name="details" />
</h:form>
</pe:layoutPane>
</pe:layout>
</h:body>
Each area has its own form. Now I ask myself what shall I do with the e. g. with a global p:growl. In which form should it be? Nested forms are invalid html as I know.
Another big problem is that when I type something in the search field in searchForm and click on an accordion panel in structureForm, the content of the search field is submitted. Why?
Kind regards
Oli
You should put your global p:growl in another form outside pe:layout.
The second problem could be related to some update invoked from structureForm to searchForm
I have a problem while using
<form:form/>
at mine custom tag when it is placed at main form. Here is example
<form:form method="POST" id="form1_id" action="${url1}" modelAttribute="form1">
<div>
...
</div>
<comp:myComp link="${url2}"/>
<div>
....
</div>
<form:form>
And this is my tag at myComp.tag file
<div>
...
<div>
<jsp:doBody />
<form:form method="POST" id="form2_id" action="${link2}" modelAttribute="uploadForm">
...
<form:button id="myButton"> </form:button>
...
</form:form>
The problem is when I push on myButton there is no any affect! When I looked on HTML I noticed there is no tag for my form2_id form! That's mean when we use nested forms it is not valid. I agree. This is correct. But look carefully at mine example - I've intentionally used
<jsp:doBody />
tag for placing second form out of the my main form! So what is wrong here?
I'm doing a simple search engine for my web app and I'm facing a problem.
My search.xhtml works by getting a parameter, so that search.xhtml?key=lol will return the results for "lol".
What I need to do is that my search commandButton will redirect do search.xhtml?key=INPUT TEXT CONTENT.
Here's my simple code :
<div id="searchBox">
<pou:panel id="searchPanel">
<h:form>
<h:inputText id="searchInput" value="#{dispensaRicercaBean.query}" size="99" maxlength="99"/> <pou:commandButton icon="ui-icon-search" action="ricerca?faces-redirect=true"/>
<pou:watermark value="Search" for="searchInput"/>
</h:form>
</pou:panel>
</div>
where dispensaRicercaBean is #RequestScoped and my result page loads the data calling executeQuery(#{request.getParameter('key')) (a rough example, actually there are some differences)
How can I do that?
Use a plain HTML <form>
<form action="ricera.xhtml">
<h:inputText id="key" size="99" maxlength="99" />
<pou:watermark value="Search" for="key" />
<pou:button icon="ui-icon-search" onclick="submit(); return;" />
</form>
In the main kid template file, I want it to have only div tags, each of which do only call a rendered kid file and paste content inside it. (like "include" function in php) but I don't know how to do this. Does someone have any ideas about it?
If you swap to genshi instead of the default kid you can do this with an include tag:
<xi:include href="menu.html" />
Swapping to genshi is fairly easy, I think its a matter of confuration only. The templates tags works otherwise the same. You should rename the extensions from .kid to .html though.
You can first define a "base_layout.kid" template:
<html xmlns:py="http://purl.org/kid/ns#">
<head>
<title>App Name - ${page_title}</title>
<link href="layout.css" type="text/css" rel="stylesheet" />
${page_specific_css()}
</head>
<body>
<h1>Now viewing: ${page_title} of App Name</h1>
<content>Default content</content>
<div class="footer">Page Footer Text</div>
</body>
</html>
Then replace the "content" tag in "page.kid" with whatever data you want:
<html py:layout="'base_layout.kid'"
xmlns:py="http://purl.org/kid/ns#">
<link py:def="page_specific_css()"
href="layout.css" type="text/css" rel="stylesheet" />
<div py:match="item.tag == 'content'">
<ul>
<li>Content Item 1</li>
<li>Content Item 2</li>
<li>Content Item 3</li>
</ul>
</div>
</html>
You can check whether you get the correct html in python shell (after removing all the identifiers used):
>>> import kid
>>> t = kid.Template("page.kid")
>>> print t.serialize()