XPAGE loaded through Ajax in a dijit.Dialog popup - Loading OK, saving fails

HCL Domino Domino Forum
1

Heya all,I m looking for information about the following problem :

in the application i m developping, i have a dijit dialog box (dijit. Dialog). I am opening in this dialog box an xpage (via dijit.Dialog.setHref, so asynchronously)

The xpage loads ok (and either opens an existing document, or creates a new one depending on a url parameter).

However, i dont manage to have it save in the dialog.

It saves ok if i open it directly, but the OK button does nothing (no request in firebug) in the popup.

it looks like the xpage OK button launches no client/server request in this context.

Does this mean XPAGES only work when called directly and cannot be loaded via Ajax request?

I got real complex stuff to put in this XPAGE, and i really would like not to have to code it in the calling xpage.

Any suggestion?

Thanks a lot.

my code hereafter (again, loading works fine so i dont include loading functions. the categoryAdminDocument document data source is OK)

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp=“http://www.ibm.com/xsp/core”>

<xp:this.data>

	<xp:dominoDocument var="categoryAdminDocument" scope="request"

		computeWithForm="onsave" formName="CategoryAdmin">

		<xp:this.action>

			<![CDATA[#{javascript:

				return getCategoryAdminMode(context.getUrlParameter('category'));

			}]]>

		</xp:this.action>

		<xp:this.documentId>

			<![CDATA[#{javascript:

			return getCategoryAdminID(context.getUrlParameter('category'));

			}]]>

		</xp:this.documentId>

	</xp:dominoDocument>

</xp:this.data>

<xp:this.resources>

	<xp:script src="/CategoryAdminDialog.jss" clientSide="false"></xp:script>

</xp:this.resources>

<xp:table>

	<xp:tr>

		<xp:td>

			<xp:label value="Catégorie" id="label1"></xp:label>

		</xp:td>

		<xp:td>

			<xp:inputText 

					id="inputText1"

					value="#{categoryAdminDocument.Category}"

					disabled="true">

				<xp:this.defaultValue>

					<![CDATA[#{javascript:

						return context.getUrlParameter('category');

					}]]>

				</xp:this.defaultValue>

			</xp:inputText>

		</xp:td>

	</xp:tr>

	<xp:tr>

		<xp:td>

			<xp:label value="Description" id="label2"></xp:label>

		</xp:td>

		<xp:td>

			<xp:inputTextarea id="inputTextarea1" value="#{categoryAdminDocument.Summary}"></xp:inputTextarea>

		</xp:td>

	</xp:tr>

</xp:table>

<xp:button value="OK" id="buttonOK">

	<xp:eventHandler event="onclick" submit="true"

		refreshMode="complete" immediate="false" save="true">

		<xp:this.action>

			<![CDATA[#{javascript:

				// Sauve

				print('avant');

				categoryAdminDocument.save();

				print('apres');

			}]]>

		</xp:this.action>

	</xp:eventHandler>

</xp:button>

</xp:view>

2

Subject: This is a known problem

In order to work properly, an XPage control needs to be within a form, so the data can be POST’d to the server. For this, the xp:view tag automatically generates an HTML in the target page. Works perfectly.

Now, the Dojo dialog requires the dojo content to be placed as a child of the tag. Well, this is not true but this is what the Dojo team choose to do. So the dijit.Dialog is moving its content to the body tag on postCreate, putting it then outside of form, thus breaking the post.

Multiple solutions:

1- Display your dialog content in an

3

Subject: we added some support in 8.5.1

what does exactly means “we added some support in 8.5.1”??

I’m installing domino 8.5.1 right now.

Which kind of approach should i use ?

Thanks

Marco

4

Subject: Open xpages in dijit.Dialog

I am trying to open an xpages, as you did, via dialog.attr(“href”, url). The dialog diplay the selected document from viewpanel successfully but all buttons are idle/no action. I even extendrf the dijit.Dialog class by following this サッカー ユニフォーム 安い – xpagesblog.com | 安いジャージを買う。 21.99 という安いジャージ。 ファンに最高のコレクションを提供します。 安心してお買い物をしてください。 but no luck.

By the way, may I have your sample code if you did it successfully. Thanks in advance

5

Subject: Ooooohhhh yeah…

See this?

We are currently communicating with the Dojo team to get a fix for this.

That right there gets me drooling. I absolutely love the IBM<>Dojo strategy that’s been put in-place with xPages. Contributions from the Open Source community PLUS directional input from IBM (and more specifically, the Lotus team) – it’s a Good Thing ™.

6

Subject: In the meanwhile… a workaround

Here is the workaround we are using to get round this problem :

/**

  • Creates a dijit dialog box based on a div content

  • @param id div identifier

*/

function dialog_create(id) {

var dialogWidget = dijit.byId(id);

if( dialogWidget )

	dialogWidget.destroyRecursive(true);

dialogWidget = new dijit.Dialog(

	{ },

	dojo.byId(id));



var dialog = dojo.byId(id);

dialog.parentNode.removeChild(dialog);

var form = document.forms[0];

form.appendChild(dialog);



dialogWidget.startup();

}

this function creates the dialog box and moves its content inside the form tag. Hope it will help.

7

Subject: Workaround

I have tried your workaround.

Error message :

ParentNode is null or is not an object

What’s my mistake ?

8

Subject: workaround function usage example

the id parameter of the workaround fonction is both the id of a div that will define the combobox layout (put in that div any field and buttons and so on that you whant in yout dialog box).

That id will also be the widget id (accessible through dijit.byId()) of the Dialog Box.

An example of how we use it : (xc:dialog_security_edit/ is a control containing anything inside dialog)

<xp:panel id=“SecurityDialogPanel”>

xc:dialog_securityedit/

</xp:panel>

				dojo.addOnLoad(function() {

dialog_create(“SecurityDialog”);

});

now when we need to display the dialog :

dijit.byId(“SecurityDialog”).show()

The fonction works even if you use partial refresh cause it makes sure to garbage collect dialog if it previously exists.

Dont forget to set dojoParseOnload and dojoTheme to true, and to dojo.require every dojo stuff you use in Dialog + Dialog like :

<xp:view xmlns:xp=“http://www.ibm.com/xsp/core” xmlns:xc=“http://www.ibm.com/xsp/custom” dojoParseOnLoad=“true” dojoTheme=“true”>

xp:this.resources

<xp:dojoModule name=“dijit.Dialog”/>

</xp:this.resources>

Hope it helps.

9

Subject: It’s OK !!

wonderful, fantastic !!!

Thanks a lot !!