several <pe:codeMirror> in tabs, inside <p:dialog>

[flavio.oliveri]

Hello guys, thanks for the amazing library you are doing!

I have an issue with <pe:codemirror>. I'm trying to have 3 editors in a modal dialog:

Code: Select all

		<p:dialog id="jsDialog"  header="Engine" widgetVar="jsDialogWidget" modal="true"  >
			<h:form id="jsForm" >
				<p:tabView id="tab" orientation="top">				
					<p:tab title="Condition">
						<pe:codeMirror widgetVar="conditionEditor" id="condition" mode="javascript" theme="eclipse" value="#{ruleView.selectedRule.condition}" lineNumbers="true" extraKeys="{ 'Ctrl-Space': function(cm) {CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);}}" />
					</p:tab>
					<p:tab title="Operation">
						<pe:codeMirror widgetVar="operationEditor" id="operation" mode="javascript" theme="eclipse" value="#{ruleView.selectedRule.operation}" lineNumbers="true" extraKeys="{ 'Ctrl-Space': function(cm) {CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);}}" />
					</p:tab>
					<p:tab title="Post process" >
						<pe:codeMirror widgetVar="postProcessEditor" id="postProcess" mode="javascript" theme="eclipse" value="#{ruleView.selectedRule.postProcess}" lineNumbers="true" extraKeys="{ 'Ctrl-Space': function(cm) {CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);}}" />
					</p:tab>
				</p:tabView>
				<div>
					<p:commandButton id="submitJsForm" value="Modify" oncomplete="jsDialogWidget.hide();" />
					<p:commandButton id="cancelJsForm" value="Cancel" oncomplete="jsDialogWidget.hide();" process="@none" update="jsForm" />
				</div>  
			</h:form>
		</p:dialog>

When cancel button is pressed, I need to refresh the form to restore the original values form the CDI beans, but when I update the form via ajax, only the <pe:codemirror> of the active tab gets initialized, in the others I see only the text area and not the widget.

I tried to exectute widget.initilize() on the event onComplete() of the cancel button, but if the widget gets initialized twice the behavoir is not the expected. Anyone know what I should do in onComplete() in order to initialize only the widgets that needs it?? Is there any other solution to the problem?

Thanks a lot!

[flavio.oliveri]

Hello again.

I just want to know in which event I should call widget.initialize() and if there is a way to know if the widget is initilized, because if I exec initilize() twice, 2 editors for the same text area are created.

Thanks!

[flavio.oliveri]

Well, I guess I figured out what to do:

On the event onTabShow of the tab I added:

Code: Select all

if (!widget.instance || widget.jq.is(':visible')) {
  widget.initialize();
}
widget.instance.focus();

It solved the problem.

Thanks again guys, the library is just amazing.