Can I use "this" in onstart attribute of <p:ajax> tag ?

[schlebe]

I use following code to show or hide toolbar of TextEditor widget.

Code: Select all

<h:form id="form">
	<p:textEditor id="te" value="#{bean.text}">
		<p:ajax event="focus" onstart="showToolbar('form:te');" />
		<p:ajax event="blur" onstart="hideToolbar('form:te');" />
	</p:textEditor>
</h:form>

This work well.

The only thing I want, is to improve this code in passing "this" instead of TextEditor id like this

Code: Select all

<h:form id="form">
	<p:textEditor id="te" value="#{bean.text}">
		<p:ajax event="focus" onstart="showToolbar(this);" />
		<p:ajax event="blur" onstart="hideToolbar(this);" />
	</p:textEditor>
</h:form>

When I display (using alert()) the "this" argument, the browser display [Object].
But it is impossible to know what is the type of this object !

Can I use "this" argument in <p:ajax> tag ?

If yes, what is the object's type passed to function ?

[Melloware]

Use Google Chrome and set a Debugger breakpoint so you can inspect that variable and see what Object it is an all of its properties.

[Jan Eckert]

This would be my first guess on how to solve your usecase. (not tested)

Code: Select all

<h:form id="form">
	<p:textEditor id="te" value="#{bean.text}" binding="#{editor}">
		<p:ajax event="focus" onstart="showToolbar(#{editor.clientId});" />
		<p:ajax event="blur" onstart="hideToolbar(#{editor.clientId});" />
	</p:textEditor>
</h:form>

edit: forgot the EL brackets

[kukeltje]

@JanEckart: There always is the 'component' build-in EL variable you can use without the need for binding. Not sure if it points to the ajax tag then or the editor. You might need to get the parent first. And I don't think it is needed to get the id this way at all. In the 'onstart' you have access to almost anything about the client-side component... Like melloware stated, just set a breakpoint in it and inspect

[schlebe]

I have tried and debugged, but I obtain only this the following method

Code: Select all

addParam
addParamFromInput
addParams
collectEarlyPostParams
extractParameterNamespace
handle
resolveComponentsForAjaxCall
resolveExpressionsForAjaxCall
send
__proto__: Object

From this object I don't find how to retrieve parent widget.

@Jan Eckert: I want to use "this" because I have 7 <p:textEditor> widgets on my page.

[Jan Eckert]

Well, you have the choice: Use something along the lines of

Code: Select all

<h:form id="form">
	<p:textEditor id="te" value="#{bean.text}" >
		<p:ajax event="focus" onstart="showToolbar(#{component.parent.clientId});" />
		<p:ajax event="blur" onstart="hideToolbar(#{component.parent.clientId});" />
	</p:textEditor>
</h:form>

which forces you to keep a certain part of your layout (you need to make sure that the texteditor is the direct parent of the ajax-element). This is more or less what kukeltje proposed. Or you do it with a simple binding like I would prefer, see my post above. Those are the JSF centered solutions though .... I am not super-good at the javascript side of things

[schlebe]

After another posting, I think that the best solution would be

Code: Select all

<h:form id="form">
	<p:textEditor id="TextEditorWidgetId">
		<pe:ajax event="focus" execute="showToolbar(this);" />
		<pe:ajax event="blur" execute="hideToolbar(this);" />
	</p:textEditor>
</h:form>

But this solution doesn't work

The problem with this solution (and solution using <p:ajax>) is that the showTooolbar() or hideToolbar() function are not called from <p:ajax> and <pe:ajax> tags perhaps because <p:ajax> or <pe:ajax> seems to be not present in DOM displayed on browser.

That explains what "this" javascript item is not correctly interpreted !

Can someboy say if my reasoning is correct or not ?

I would add that if "this" work correclty, the best solution would be

Code: Select all

<h:form id="form">
	<p:textEditor id="TextEditorWidgetId">
		<pe:ajax event="focus" execute="showToolbar();" />
		<pe:ajax event="blur" execute="hideToolbar();" />
	</p:textEditor>
</h:form>

because "this" is known in called function. It is not necessary to pass them !

[tandraschko]

The reason is just that we don't pass it:
https://github.com/primefaces/primeface ... ax.js#L321

So currently "this" is the ajax engine.
Also if we would pass something other, i don't think that passing the widget as "this" is correct. More correct would be to pass the triggering DOM element.

Also there is no pe:ajax.

[Jan Eckert]

Unfortunately, your code stops to make sense to me. As long as Primefaces and Primefaces Ext do not fundamentally re-define attributes, the execute-attribute of a ajax-component does by definition not trigger any JS-function, but expects a list of component-ID to execute. Maybe this is just a copy-and-paste-error?


What about this then?

Code: Select all

<h:form id="form">
	<p:textEditor id="TextEditorWidgetId">
		<f:ajax event="focus" onevent="showToolbar();" execute="@form" render="@form"/>
		<f:ajax event="blur" onevent="hideToolbar();" execute="@form" render="@form"/>
	</p:textEditor>
</h:form>

and accessing the implicit data object.

Code: Select all

<script type="text/javascript">
	function showToolbar(data) {
		// use data.source to show
	}

	function showToolbar(data) {
		// use data.source to hide
	}
		
</script>

But then again, I am not good at the JS stuff

[schlebe]

@Jan Eckert: I have found a solution in which <p:textEditor> is defined simply without using <p:ajax>.

viewtopic.php?f=3&t=54338&p=164733#p164733