Re: Migration issue: JavsScriptUtils.writeJavaScript() in onRender() does not seem to work with Ajax?

[Martin Dietze]

On Mon, February 25, 2013, Martin Grigorov wrote:
 
> Well, I have written a Wiki page and few blog articles about the changes in
> Wicket 6 but it seems you haven't read them before asking :-)

I understand your point well, I myself have often spent lots of
time writing documentation which people do not read well enough. 
Honestly, I read the migration guides. Then I spent quite some
days doing the work. Unfortunately there's always a bit going
down the drain as the human brain does not always filter things
the way we'd like it to :)

> In my opinion no one should use Component#onRender(). You should really
> understand how Wicket rendering internals work (MarkupStream,
> MarkupElement, component resolvers, etc.) to override it. There are hooks
> in Behavior class for almost everything a user code should ever need -
> beforeRender, afterRender, renderHead.

It's good you point that out. Still I think a 'pattern migration
guide' might help, and it should not be done by one person alone
but the community (I'll gladly contribute everything I've run
across).

Thanks again for your help!

Cheers,

M'bert

-- 
--- / http://herbert.the-little-red-haired-girl.org / -
=+= 
Perl ist der gegl�ckte Versuch, einen braindump direkt ausf�hrbar zu
machen.  -- Lutz Donnerhacke in dasr

-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org

Re: Migration issue: JavsScriptUtils.writeJavaScript() in onRender() does not seem to work with Ajax?

[Martin Grigorov]

On Mon, Feb 25, 2013 at 5:52 PM, Martin Dietze  wrote:

> On Mon, February 25, 2013, Martin Grigorov wrote:
>
> > > | AjaxCallListener myAjaxCallListener = new AjaxCallListener();
> > > | myAjaxCallListener.onBeforeSend( return "for ( instance in
> > > CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement();" );
> > >
> >
> > except the leading "return" all looks OK to me.
> > Add some logging with console.log() and see what is available in the
> > context.
>
> OK, I got it, thought this would be nice to have in the archives
> for others. First, the "return" was of course not from the real
> code, I did some on-the-fly optimizing of the code to avoid
> unnecessary complexity in this example before I posted it.
>
> The culprit was basically the lack of three letters - "var".
> The variable "instance" was not declared before use. While this
> is totally fine when executed in the browser, it throws an
> exception in the code environment in which Wicket calls this
> callback. This way the code works:
>
> | var instance; for ( instance in CKEDITOR.instances )
> CKEDITOR.instances[instance].updateElement();
>
> I had to ask my local JS guru for help, I would never have found
> this one alone.
>
>
> As I've run across a number of issues migrating from 1.4 to 6.6
> now, I would like to suggest creating and continuously extending
> a Wiki page, like: "Old patterns vs. New patterns", where we can
> just add such things (as: for Ajax, instead of
> JavaScriptUtils.writeJavaScript() inside onRender() use
> OnDomReadyHeaderItem.forScript() in renderHead()), so that they
> can be found more easily?
>

Well, I have written a Wiki page and few blog articles about the changes in
Wicket 6 but it seems you haven't read them before asking :-)

In my opinion no one should use Component#onRender(). You should really
understand how Wicket rendering internals work (MarkupStream,
MarkupElement, component resolvers, etc.) to override it. There are hooks
in Behavior class for almost everything a user code should ever need -
beforeRender, afterRender, renderHead.


>
> Cheers,
>
> M'bert
>
> --
> --- / http://herbert.the-little-red-haired-girl.org /
> -
> =+=
> Tower: Hoehe und Position?
> Pilot: Ich bin 1.80m und sitze vorne links.
>
> -
> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
> For additional commands, e-mail: users-h...@wicket.apache.org
>
>


-- 
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com 

Re: Migration issue: JavsScriptUtils.writeJavaScript() in onRender() does not seem to work with Ajax?

[Martin Dietze]

On Mon, February 25, 2013, Martin Grigorov wrote:

> > | AjaxCallListener myAjaxCallListener = new AjaxCallListener();
> > | myAjaxCallListener.onBeforeSend( return "for ( instance in
> > CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement();" );
> >
> 
> except the leading "return" all looks OK to me.
> Add some logging with console.log() and see what is available in the
> context.

OK, I got it, thought this would be nice to have in the archives
for others. First, the "return" was of course not from the real
code, I did some on-the-fly optimizing of the code to avoid
unnecessary complexity in this example before I posted it.

The culprit was basically the lack of three letters - "var".
The variable "instance" was not declared before use. While this
is totally fine when executed in the browser, it throws an
exception in the code environment in which Wicket calls this
callback. This way the code works:

| var instance; for ( instance in CKEDITOR.instances ) 
CKEDITOR.instances[instance].updateElement();

I had to ask my local JS guru for help, I would never have found
this one alone.


As I've run across a number of issues migrating from 1.4 to 6.6
now, I would like to suggest creating and continuously extending
a Wiki page, like: "Old patterns vs. New patterns", where we can
just add such things (as: for Ajax, instead of
JavaScriptUtils.writeJavaScript() inside onRender() use
OnDomReadyHeaderItem.forScript() in renderHead()), so that they
can be found more easily? 

Cheers,

M'bert

-- 
--- / http://herbert.the-little-red-haired-girl.org / -
=+= 
Tower: Hoehe und Position?
Pilot: Ich bin 1.80m und sitze vorne links.

-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org

Re: Migration issue: JavsScriptUtils.writeJavaScript() in onRender() does not seem to work with Ajax?

[Martin Grigorov]

On Mon, Feb 25, 2013 at 4:32 PM, Martin Dietze  wrote:

> On Mon, February 25, 2013, Martin Grigorov wrote:
>
> > replace with:
> >   response.render( OnDomReadyHeaderItem.forScript( script ) );
>
> OK, did that. Now I am running into a different error when I
> press "save" on my editor component. For this event I have an
> AjaxCallListener like this:
>
> | AjaxCallListener myAjaxCallListener = new AjaxCallListener();
> | myAjaxCallListener.onBeforeSend( return "for ( instance in
> CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement();" );
>

except the leading "return" all looks OK to me.
Add some logging with console.log() and see what is available in the
context.


>
> This is necessary to copy the text the user has entered from the
> Javascript code back into the form component. On "save" I now
> get the following error:
>
> | Wicket.Ajax: An error occurred while executing Ajax
> request:ReferenceError: instance is not defined
>
> It looks to me like the script in OnDomReadyHeaderItem was
> executed allright, but the state inside the Javascript code
> has been lost in the meantime?
>
> Cheers,
>
> M'bert
>
> --
> --- / http://herbert.the-little-red-haired-girl.org /
> -
> =+=
> Arthur: "It's at times like this I wish I'd listened to my mother"
> Ford  : "Why, what did she say?"
> Arthur: "I don't know, I never listened"
>
> -
> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
> For additional commands, e-mail: users-h...@wicket.apache.org
>
>


-- 
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com 

Re: Migration issue: JavsScriptUtils.writeJavaScript() in onRender() does not seem to work with Ajax?

[Martin Dietze]

On Mon, February 25, 2013, Martin Grigorov wrote:

> replace with:
>   response.render( OnDomReadyHeaderItem.forScript( script ) );

OK, did that. Now I am running into a different error when I
press "save" on my editor component. For this event I have an
AjaxCallListener like this:

| AjaxCallListener myAjaxCallListener = new AjaxCallListener();
| myAjaxCallListener.onBeforeSend( return "for ( instance in CKEDITOR.instances 
) CKEDITOR.instances[instance].updateElement();" );

This is necessary to copy the text the user has entered from the
Javascript code back into the form component. On "save" I now
get the following error:

| Wicket.Ajax: An error occurred while executing Ajax request:ReferenceError: 
instance is not defined 

It looks to me like the script in OnDomReadyHeaderItem was
executed allright, but the state inside the Javascript code
has been lost in the meantime?

Cheers,

M'bert

-- 
--- / http://herbert.the-little-red-haired-girl.org / -
=+= 
Arthur: "It's at times like this I wish I'd listened to my mother"
Ford  : "Why, what did she say?"
Arthur: "I don't know, I never listened"

-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org

Re: Migration issue: JavsScriptUtils.writeJavaScript() in onRender() does not seem to work with Ajax?

[Martin Grigorov]

On Mon, Feb 25, 2013 at 4:09 PM, Martin Dietze  wrote:

> On Mon, February 25, 2013, Martin Grigorov wrote:
>
> > The Ajax response processing looks like:
> > - execute prependJavaScripts
> > - replace components
> > - execute ondomready scripts
> > - execute appendJavascripts
> >
> > I.e. the component DOM element must be there.
> > Show us your new code.
>
> Thanks, it's here:
>
> |  @Override
> |  public void renderHead( IHeaderResponse response ) {
> |  super.renderHead( response );
> |  final String markupId = field.getMarkupId();
> |  String script = "if (CKEDITOR.instances['" + markupId + "'])
> CKEDITOR.remove(CKEDITOR.instances['" + markupId + "']); " //
> |  + "var editor_" + markupId + " = CKEDITOR.replace('" + markupId
> + "');";
> |  response.render( JavaScriptHeaderItem.forScript( script, null ) );
>

replace with:
  response.render( OnDomReadyHeaderItem.forScript( script ) );


> |  }
>
> Cheers,
>
> M'bert
>
> --
> --- / http://herbert.the-little-red-haired-girl.org /
> -
> =+=
> Ed, the greatest WYGIWYG editor of all.
>
> -
> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
> For additional commands, e-mail: users-h...@wicket.apache.org
>
>


-- 
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com 

Re: Migration issue: JavsScriptUtils.writeJavaScript() in onRender() does not seem to work with Ajax?

[Martin Dietze]

On Mon, February 25, 2013, Martin Grigorov wrote:

> The Ajax response processing looks like:
> - execute prependJavaScripts
> - replace components
> - execute ondomready scripts
> - execute appendJavascripts
> 
> I.e. the component DOM element must be there.
> Show us your new code.

Thanks, it's here:

|  @Override
|  public void renderHead( IHeaderResponse response ) {
|  super.renderHead( response );
|  final String markupId = field.getMarkupId();
|  String script = "if (CKEDITOR.instances['" + markupId + "']) 
CKEDITOR.remove(CKEDITOR.instances['" + markupId + "']); " //
|  + "var editor_" + markupId + " = CKEDITOR.replace('" + markupId + 
"');";
|  response.render( JavaScriptHeaderItem.forScript( script, null ) );
|  }

Cheers,

M'bert

-- 
--- / http://herbert.the-little-red-haired-girl.org / -
=+= 
Ed, the greatest WYGIWYG editor of all.

-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org

Re: Migration issue: JavsScriptUtils.writeJavaScript() in onRender() does not seem to work with Ajax?

[Martin Grigorov]

Hi,

The Ajax response processing looks like:
- execute prependJavaScripts
- replace components
- execute ondomready scripts
- execute appendJavascripts

I.e. the component DOM element must be there.
Show us your new code.


On Mon, Feb 25, 2013 at 3:56 PM, Martin Dietze  wrote:

> On Mon, February 25, 2013, Martin Dietze wrote:
>
> > Thank you, in this case I get a Wicket Ajax error:
> >
> > | Wicket.Ajax: Wicket.Head.Contributor.processScript:
> [CKEDITOR.editor.replace] The element with id or name "valueb54" was not
> found.: eval -> if (CKEDITOR.instances['valueb54'])
> > | CKEDITOR.remove(CKEDITOR.instances['valueb54']); var editor_valueb54 =
> CKEDITOR.replace('valueb54');
>
> Sorry, I forgot to mention that of course the element with the
> id 'valueb54' does exist, it is the edit component which is just
> made visible through the Ajax call. Obviously the JS code is
> excecuted before the component has been placed in the DOM?
>
> Cheers,
>
> M'bert
>
> --
> --- / http://herbert.the-little-red-haired-girl.org /
> -
> =+=
> Ich trink kein Wasser. Da ficken Fische drin...
>
> -
> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
> For additional commands, e-mail: users-h...@wicket.apache.org
>
>


-- 
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com 

Re: Migration issue: JavsScriptUtils.writeJavaScript() in onRender() does not seem to work with Ajax?

[Martin Dietze]

On Mon, February 25, 2013, Martin Dietze wrote:

> Thank you, in this case I get a Wicket Ajax error:
> 
> | Wicket.Ajax: Wicket.Head.Contributor.processScript: 
> [CKEDITOR.editor.replace] The element with id or name "valueb54" was not 
> found.: eval -> if (CKEDITOR.instances['valueb54'])
> | CKEDITOR.remove(CKEDITOR.instances['valueb54']); var editor_valueb54 = 
> CKEDITOR.replace('valueb54'); 

Sorry, I forgot to mention that of course the element with the
id 'valueb54' does exist, it is the edit component which is just
made visible through the Ajax call. Obviously the JS code is
excecuted before the component has been placed in the DOM?

Cheers,

M'bert

-- 
--- / http://herbert.the-little-red-haired-girl.org / -
=+= 
Ich trink kein Wasser. Da ficken Fische drin...

-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org

Re: Migration issue: JavsScriptUtils.writeJavaScript() in onRender() does not seem to work with Ajax?

[Martin Dietze]

On Mon, February 25, 2013, Martin Grigorov wrote:

> Such kind of code should really be executed within #renderHead() with
> OnDomReadyHeaderItem.
> Don't let any JS try to use your HTML DOM elements before the DOM is
> available.

Thank you, in this case I get a Wicket Ajax error:

| Wicket.Ajax: Wicket.Head.Contributor.processScript: [CKEDITOR.editor.replace] 
The element with id or name "valueb54" was not found.: eval -> if 
(CKEDITOR.instances['valueb54'])
| CKEDITOR.remove(CKEDITOR.instances['valueb54']); var editor_valueb54 = 
CKEDITOR.replace('valueb54'); 

Another thing: if writing Javascript code into the response should
not be done in onRender(), should not JavaScriptUtils.writeJavaScript()
be made obsolete?

Cheers,

M'bert

-- 
--- / http://herbert.the-little-red-haired-girl.org / -
=+= 
Ed, the greatest WYGIWYG editor of all.

-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org

Re: Migration issue: JavsScriptUtils.writeJavaScript() in onRender() does not seem to work with Ajax?

[Martin Grigorov]

Hi,

Such kind of code should really be executed within #renderHead() with
OnDomReadyHeaderItem.
Don't let any JS try to use your HTML DOM elements before the DOM is
available.


On Mon, Feb 25, 2013 at 3:05 PM, Martin Dietze  wrote:

> OK, I've changed the subject, as it seems like I'm running into
> a more general issue here. The original issue was JS code
> rendered into a flyout with search results in my application
> never made it into the markup the browser actually sees.
>
> Now I've identified another problem which seems identical in its
> cause. I have an editor component using CKEditor. The component
> derives from Panel. In its onRender() method it has the
> following code:
>
> |@Override
> |public void onRender() {
> |super.onRender();
> |final Response response = getResponse();
> |final String markupId = textField.getMarkupId();
> |JavaScriptUtils.writeJavaScript( response,
> |"if (CKEDITOR.instances['" + markupId + "'])
> CKEDITOR.remove(CKEDITOR.instances['" + markupId + "']);" //
> |"var editor_" + markupId + " = CKEDITOR.replace('" + markupId
> + "');" //
> |);
> |}
>
> This renders a little JS code block under the Wicket TextField
> instance that holds the text for CKEditor.
>
> The code works well if the editor component has been in the
> page from the beginning. However if I make the component visible
> via Ajax (e.g. after clicking an AjaxLink), the JS code is not
> rendered at all.
>
> I am still in the process of migrating my project from Wicket
> 1.4.x to 6.6.0. The above code worked flawlessly with 1.4.x.
>
> Am I making a mistake, or is this a problem in Wicket?
>
> Cheers,
>
> M'bert
>
> --
> --- / http://herbert.the-little-red-haired-girl.org /
> -
> =+=
> Nachts wache ich schweißgebadet auf, weil OE-begeisterte Newbies mit Bill
> Gates hinterm Newsserver Schwarze Messen feiern, und auch mein Psychologe
> ist schon total ratlos. Ich habe einfach fertig.  -- anonymer Troll in dsnu
>
> -
> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
> For additional commands, e-mail: users-h...@wicket.apache.org
>
>


-- 
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com 

Migration issue: JavsScriptUtils.writeJavaScript() in onRender() does not seem to work with Ajax?

[Martin Dietze]

OK, I've changed the subject, as it seems like I'm running into
a more general issue here. The original issue was JS code
rendered into a flyout with search results in my application
never made it into the markup the browser actually sees.

Now I've identified another problem which seems identical in its
cause. I have an editor component using CKEditor. The component
derives from Panel. In its onRender() method it has the
following code:

|@Override
|public void onRender() {
|super.onRender();
|final Response response = getResponse();
|final String markupId = textField.getMarkupId();
|JavaScriptUtils.writeJavaScript( response,
|"if (CKEDITOR.instances['" + markupId + "']) 
CKEDITOR.remove(CKEDITOR.instances['" + markupId + "']);" // 
|"var editor_" + markupId + " = CKEDITOR.replace('" + markupId + 
"');" //
|);
|}

This renders a little JS code block under the Wicket TextField
instance that holds the text for CKEditor.

The code works well if the editor component has been in the
page from the beginning. However if I make the component visible
via Ajax (e.g. after clicking an AjaxLink), the JS code is not
rendered at all.

I am still in the process of migrating my project from Wicket
1.4.x to 6.6.0. The above code worked flawlessly with 1.4.x.

Am I making a mistake, or is this a problem in Wicket?

Cheers,

M'bert

-- 
--- / http://herbert.the-little-red-haired-girl.org / -
=+= 
Nachts wache ich schwei�gebadet auf, weil OE-begeisterte Newbies mit Bill 
Gates hinterm Newsserver Schwarze Messen feiern, und auch mein Psychologe 
ist schon total ratlos. Ich habe einfach fertig.  -- anonymer Troll in dsnu

-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org