Orbeon Initial Javascript not loaded

We are facing initial javascript not loaded during orbeon seperate deployment. Let me explain my project,

We have a single page application and the application moves from first page to second page on a button action, second page will have xforms code.

We are following seperate deployment, so the second page (xforms page) is processed by Orbeon and response is sent back to browser, however the second page is totally hidden. Yes, they contents are properly coming to browser but always hidden.

I have created a sample project to explain this scenario, if you launch this application,
Just click the 'Submit' button on the first page, which will load the second Partial page (xforms page). This page will be coming to browser but it is always hidden because of class "xforms-initially-hidden".

It looks like some initial javascirpt will remove this hidden class automatically which is not happening. Please help us on this.

Sample project attached.

Not able to attach the big project in this post, i can send in mail, if you like to help on this.

Hi Vedha,

I think that somehow you attachment is missing. Could you try attaching it again to a response?

Alex

I am not able to attach because of my project size. It is around 26MB. Can i share through mail?

Hi Vedha,

Yes, of course. My email is my Twitter handle (see below), AT orbeon.com.

Alex

Hi,

I have sent you the project. Please check and let me know.

Hi Vedha,

I got it, thank you. Could you tell me more about what I should do to reproduce the issue? I deploy your war on /myapp, and Orbeon Forms under /orbeon. What next? Where should I go, what behavior do you observe, and what behavior did you expect?

Alex

You can access the page,

localhost:8080/NewXForm/

You should be seeing a page with one buttton SUBMIT. Just click on that button, it will load the actual "XFORMS" file (XFormsAppMainPage.xhtml). This page is loaded to client side but it is hidden. I have verified this in client debug tools.

<form id="xforms-form" class="xforms-form xforms-initially-hidden xforms-hint-appearance-inline xforms-help-appearance-dialog ng-pristine ng-valid ng-scope" onsubmit="return false" method="POST" action="/NewXForm/orbeon/xforms-server-submit">

Let me know if you need more details.

Hi Vedha,

Mmmh… something isn't right: the index.jsp references files like xformsapp/resources, but the resources directory is at the same level as index.jsp, so that path won't work. After moving all the directories inside a newly created xformsapp directory, I see the submit button. When I click the button, I see: http://i.imgur.com/byqyWwz.png. In the source, I see an xf:model, xf:repeat, which shouldn't be there: http://i.imgur.com/VUqYeLH.png.

Are you saying you're loading a page via Ajax and embedding it into the current page? That most likely won't work. The XForms needs to be in the markup produced by your servlet in response to your browser requesting a page, not an Ajax request. Can you change your code to directly go to a page that contains XForms?

Alex

I guess something is missing in your project. Why xforms code is coming to browser?

Is the seperate deployment working fine in your workspace?

Meanwhile i shall try to provide you more simplified sample project for you.

Vedha, now that you mention this, I see there is no WEB-INF in your war :). So I imagine that wasn't a full war, and that I'm expected to add something to it? Yes, a simpler example, with fool-proof ;) instructions on how to run it, exactly what to do when it runs, screenshots of what you see, and a description of what expect to see will help.

I am back to this thread now. :) I have shared a new project with more details in that. Please check and let me know. I have mailed it with subject "Re: Orbeon Initial Javascript not loaded".

Hi Vedha,

I'm not sure to follow you. "Orbeon Initial Javascript not loaded" is the title of this thread. Where did you email more detailed information?

Alex

Hi,

Sorry for the late response here. I was concentrating on other issues in the Orbeon integration.

Before, I have emailed you the project, similar to how i did sometime back. Anyway, leave that all.

Our team created a very small (attached here) sample to demonstrate the problem.

Let me make it clear,

1) Problem: Some of our Xforms page is displayed blank in the browser. (the HTML from Orbeon is coming to browser with class="xforms-initially-hidden")

2) This happens only when we do the Xforms seperate deployment (as mentioned here orbeon reference) with some specific steps.

3) To demonstrate this, we have created the sample and attached here. XFormsAs.war

4) Verifying the problem:

i) Import this war into any webserver and start the server.
Access page "http://localhost:8080/XFormsAs/#/home" if you deployed in localhost on port 8080.
This page will be shown Home_Page.jpg

ii) Click on the "SubmitQuery" button, this will take you to the Main page (it will be displayed blank)
Main_Page.jpg

If you carefully verify the HTML in the browser, contents of that page will be hidden because of class="xforms-initially-hidden". You could verify the same in the screen shot also.

Some information:

1) Some initial javascript from Orbeon is not getting executed.

2) This might be happening only when we have Angular and XForms together.

Hi Vedha,

Just a quick note to mention that I've reproduced with your example a problem similar to the one you were describing. It might not be the same thing, since I used Tomcat, but I'll investigate it in the next few days, and will follow-up here once I know more about it.

Alex

Thanks. I have also verified our issue in Tomcat and yes it happens. Will wait for your response.

Hi Vedha,

Just a quick update to mention that we're reproduced the issue I was referring to independently of your example, and created:

https://github.com/orbeon/orbeon-forms/issues/2775

We'll follow-up on this thread when we have more on this.

Alex

Looks interesting. Let me know if you find any work around atleast. Right now we are removing the "xforms-initially-hidden" class from the form tag using onload Jquery and managing.

Hi Vedha, we haven't forgotten about this one, and have planned to work on this this week. So, stay tuned! :)

Alex

For reference, we now have a fix for issue #2775. Please let us know if you need a patch.

-Erik

Hi Vedha,

With the fix Erik did, replacing orbeon-xforms-filter.jar with the latest one, I can now see the form properly when going to:

http://localhost:8080/XFormsAs/app/views/XFormsAppMainPage.xhtml

However, when going to URL below, I still don't see the form. I see Angular loading the above HTML page through Ajax, but somehow it isn't the same as just the browser showing the page. I'm no Angular expert, and haven't tried to debug this. Is Angular supposed to be able to, this way, "include" any web page, or are there restrictions on the page to be "included"? If there are, do you know which one?

http://localhost:8080/XFormsAs/#/mainPage

Alex