Problem with xf:repeat? or YUI input??? Multiple insert

I am facing a problem with xf:repeat or xf:insert. multiple insert is happening. This problem is quite complete. I shall try to explain.

1) Our application is having two tabs, First one is angular tab and second one is XFORMS tab.

2) First tab (Angular JS) is the home page. and user enters basic details in this page and navigate to second tabs. Refer attachment 1.jpg.1.jpg

3) The XForms tab is loaded and details from home tab (Angular JS) page is passed to XForms tab as get parameters. Refer 'request details.jpg'.request_details.jpg

4) Inside the second page(XForms page), i have a three iterative repeats. Refer firsttime.jpg.firsttime.png
User will click on a icon and insert a row into the third xf:repeat

5) When user click on this action, everything works fine.

6) Now the problem scenario, if user load the application first everything work fine. When user navigate back to first page(AngularJS) page from second page(XFORMS page). And then, come back again to XFORMS page then, all user actions triggers the insert multiple times.

refer the screen shot "secondtime.jpg"secondtime.png this happen when user comes back to second screen again (First -> Second -> First -> Second)

refer the third shot "thirdtime.jpg'thirdtime.png this happens when user comes back to second screen for third time.





My Debugging:


First time resent sent from client:

<!DOCTYPE xxf:event-request [<!ENTITY nbsp "&#160;">]>
<xxf:event-request xmlns:xxf="http://orbeon.org/oxf/xml/xforms">
    <xxf:uuid>9361b4a7b07b77488212bc040a8f8b09467d6242</xxf:uuid>
    <xxf:sequence>21</xxf:sequence>
    <xxf:action>
        <xxf:event name="xforms-focus" source-control-id="moduleArrangementsAccordion≡addSecondary⊙7-1-1"></xxf:event>
        <xxf:event name="DOMActivate" source-control-id="moduleArrangementsAccordion≡addSecondary⊙7-1-1"></xxf:event>
        <xxf:event name="xxforms-repeat-activate" source-control-id="moduleArrangementsAccordion≡primaryPortMapping⊙7-1-1"></xxf:event>
    </xxf:action>
</xxf:event-request>

second time:

<!DOCTYPE xxf:event-request [<!ENTITY nbsp "&#160;">]>
<xxf:event-request xmlns:xxf="http://orbeon.org/oxf/xml/xforms">
    <xxf:uuid>e0b1be68895d68b011652636e77b1c8c2637686a</xxf:uuid>
    <xxf:sequence>27</xxf:sequence>
    <xxf:action>
        <xxf:event name="xforms-focus" source-control-id="moduleArrangementsAccordion≡addSecondary⊙7-1-1"></xxf:event>
        <xxf:event name="DOMActivate" source-control-id="moduleArrangementsAccordion≡addSecondary⊙7-1-1"></xxf:event>
        <xxf:event name="xxforms-repeat-activate" source-control-id="moduleArrangementsAccordion≡primaryPortMapping⊙7-1-1"></xxf:event>
        <xxf:event name="DOMActivate" source-control-id="moduleArrangementsAccordion≡addSecondary⊙7-1-1"></xxf:event>
        <xxf:event name="xxforms-repeat-activate" source-control-id="moduleArrangementsAccordion≡primaryPortMapping⊙7-1-1"></xxf:event>
    </xxf:action>
</xxf:event-request>



I know, understanding this takes time, it is very difficult to create a sample reproducing this problem.

During my debugging i found, the yui_genid which is used in the XFORMS rendered html is not being reset everything.

First time:

<div class="bd" id="yui-gen8">


Second time:

<div class="bd" id="yui-gen15">

So, something related to YUI instance not being reset during page navigation?

Note: refer "request details.jpg", all js files are loaded everytime when user comes back to second screen.

Please ask more question for understanding, but creating a sample would be difficult. Thanks.

Hi Vedha,

Those <xxf:event> are created by JavaScript event listeners. I suspect that in your case, somehow, when you go from the 2nd tab to the 1st, and then back to the 2nd, those listeners are re-registered, so the listeners are called twice for every event, because they are registered twice. When you repeat the navigation between tabs, they will be registered 3 times… and so on.

Now, I remember you said something about this in the past, but can you describe how are you loading the XForms into that tab? How do you get the Orbeon Forms JavaScript to run?

Alex

We are using Seperate deployment method of Orbeon.

Tab 1 (AngularJS) page is loaded first and clickingTab 2 then XFORMS page loaded just by a get function.

This could be better understood from the request details from Browser Inspectrequest_details.jpg.

As per seperate deployment guideline,

Tab 1 is placed seperate folder

Tab 2 is placed in seperate folder, (folder which is configured in web.xml for orbeon filter).


As you remember, we have faced problem initially for showing the second Tab(XFORMS page). The problem was because of xforms-initially-hidden class added to the complete page, to resolve this, we are manually removing this class on Tab 2 load.

Below is the code,

        $("#xforms-form").removeClass("xforms-initially-hidden");
        $("#xforms-select-full-template").css("display","none");
        $("#xforms-select1-full-template").css("display","none");
        $( "#xforms-form" ).find( ".xforms-loading-loading" ).css("display","none");

Hi Vedha,

Thank you for the additional information. Just one question: what is the "get function" you're referring to? Is that an Angular feature? Or a jQuery.load()? Is this "get function" called every time users switch to the tab using Orbeon Forms? If it is, could you change something on your side so it is only called the first time they switch to that tab?

Alex

More information is given hereDetails.jpg



To answer your questions, yes we are using angular loading, yes, the GET is called everytime when user switch between tabs.

We need to perform the GET everytime when user click on TAB 2, reason is everytime it is a different loading(different configuration). Please refer attached file and ask more questions.

Thanks.. :)

Hi Vedha,

I assume that what you're doing with Angular is similar to a jQuery.load(), and I understand you're doing it multiple times because you're passing a parameter to the form (instantParameter), which comes from a value in the first tab.

Now, the thing is that Orbeon Forms doesn't support jQuery.load() or similar. You're already "lucky" that things work as well as they do when you're loading the form once ;). I think that the "real" solution would be for us to implement RFE 1577:

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

This could be done as a sponsored feature, but if you're looking for a solution in the short term, I would try to only load the form the first time the second tab is shown, and instead of passing the value as request parameter, to pass it by dispatching an event from your JavaScript to the XForms (see below). This might require you to change a little bit the XForms code, but is hopefully doable. Do you think that this is something that could work for you?

https://doc.orbeon.com/xforms/client-side-javascript-api.html#dispatching-events

Alex

Oops. Anyway thanks for understanding. I can do this change, but it is going to take little effort.

Just a thought, all the problems we are facing is because of the javascrit events being registered multiple times(as you told), is there a hack to stop the javascript event registeration? May be a small script which does this? Just trying to simplify my work because of time constraints.. :P

What you said is correct. Event Listeners are doubled on every navigation.

Refer attached Event_Listeners.jpg.

Still trying any hack to stop these duplicate event listeners. Any inputs from you would help a lot.

Hi Vedha,

It's tricky: there are listeners registered in a few places, and I think it would be better to design this properly, rather than hack around the issue. So in the short term, I'd advice against "hacking", and would prefer if you do the change to respond to an XForms event in your code. On the upside, switching between tabs will be faster, and will just require an Ajax event, rather than loading a new page ;).

Alex

Will you believe if i am able to resolve this? :D

I did resolve this, application works fine now. May be i have simple hacks to implement your RFE 1577. :P

Anyway, here is the solution to the community.

Simple Answer:

Orbeon javascripts files are made to get loaded only during first XFORMS page and not during subsequent loading.

orbeon_***************1.js
orbeon_***************2.js

 This resolved the issue.

Detailed Answer:

The main problem is because of the events being registered twice. When looking in deep inside Orbeon loading, it loads two javascript files when i load the XFORMS page everytime.

orbeon_***************1.js
orbeon_***************2.js

One of these file is having a DOMReady event, which triggers a serious of method calls which register's all events. i thought to stop these event registration second time.

When we load the XFORMS page first time, this DOMReady events are triggered and it completes its work. So, all UI components are registered with events.

When user navigate to the XFORMS page next time, again we don't have to do the same work.

So, i have edited the HTML response on page navigation to skip the orbeon*****.js files on subsequent loading.

This resolved the issue.

Having a small issue with respect to progress bar. When user navigate to FIRST tab(non XFORMS tab) before any XFORMS operation is completed, then progress bar is not correctly shown on subsequent XFORMS tab load.

Note: Till now, application works fine. Let you know if i see any blocker.

Anyway i am just saying i am able to get out the problem but not suggesting this hack.

Vedha, I'm glad you found a workaround, and thank you for sharing this with the community.

Alex