Problem to load JavaScript into Portlet

Flow
1

Dear Vaadin Community

I developed a component of vaadin with GWT and ReCaptcha service. In the Client-Side load the captcha
script
 and execute a method using JSNI for display at runtime the Captcha, Into Server-Side valid the captcha via POST. Currently this component is implemented as an application of vaadin and as a maven project and it works perfectly well.

The problem is when i use this component in a portlet that use Liferay. The component (or ReCaptcha) is displayed when init the application portlet sometimes, when i do a restartApplication or refresh the browser showing the captcha sometimes, but is unpredictable. The Widgetset that load the script is:

<module>
    <inherits name="com.vaadin.terminal.gwt.DefaultWidgetSet" />
    <script src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>       
</module>

And to watch the Captcha in browser using the following JSNI:

       public static native void create(String key, String div, String theme, String lang, int tabIndex) /*-{
			$wnd.Recaptcha.create(key, 'captchaDiv',{
			        theme:theme,lang:lang,tabindex:tabIndex
	});

This function is execute into the updateFromUIDL the first time that this is calling. The component is functional into vaadin application, but as a portlet application not show the captcha.

I’ve done some testing where i can see that this behavior is related with the time that the script takes to load the ReCaptcha. I don’t know how reduce the load time for the script. I don’t know what to do and how to handle this problem. If you need more information just ask i will try to give you as much information as you need.

Cristian

2

There are many things that could be causing this. I’ll start by listing my ideas:

  • First, you have succesfully compiled the widgetset and installed into Liferay ROOT/html/VAADIN/widgetset?
  • The window.Recaptcha may not be initialized when you call the JSNI method. How is the recaptcha_ajax.js loaded?
  • If it works on ?restartApplication but not later on, the requestRepaint might be needed on the server-side.

I know these are don’t exactly solve anything, but once the problem is isolated the solution is the easy part. :slight_smile:

3

Yes, I have succesfully compiled the widgetset and this is into my Liferay Widgetset.

I test load the script in differents forms. The first proof was load the script using GWT API in construct into clien-side

	public VReCaptchaField() {
		fIsNew = true;

		setElement(Document.get().createDivElement());
		setStyleName(CLASSNAME);

		getElement().setId("captchaDiv");

		final ScriptElement captcha = Document.get().createScriptElement();
		captcha.setSrc("http://www.google.com/recaptcha/api/js/recaptcha_ajax.js");
		captcha.setType("text/javascript");
		Document.get().getBody().appendChild(captcha);

	}

The second proof was load the JavaScript into Widgetset module

<module>
    <inherits name="com.vaadin.terminal.gwt.DefaultWidgetSet" />
    <script src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>      
</module>

I does proof to load the captcha using JSNI function and using GWT API, the following call the create method.

 public create(String fTheme, String fLanguage, String Tabindex){
      final ScriptElement creator = Document.get().createScriptElement(
			"window.Recaptcha.create(\"" + PUBLIC_KEY + "\", \"" + getElement().getId() + "\",
			 {\n" +
				"tabindex: " + fTabIndex + ", " +
				"theme:\"" + fTheme + "\", " +
				"lang:\"" + fLanguage + "\" 
			 });"
		);
		creator.setType("text/javascript");
		Document.get().getBody().appendChild(creator);
}

The result is similar in both cases. I think that this problem is because JavaScript use AJAX request after load the vaadin components and the time for wait the response via Recaptcha service is enough.

Thanks Sami !!

4

you need run in a server then run correct, also create keys with your domain see https://www.google.com/recaptcha/admin#createsite
so the client see the captcha.