May 25, 2010

Trouble Saving a Notes Document from Web

I'm currently working on re-implementing the customer's intranet site. As part of this work, I'm at the moment developing a page that let the users publish news to the site.

Reading different blogs around the web, the way to do is is fairly straight forward:
  • Add a data source to your xpage, select a form, and set it to create a document when the page is loaded
  • Add some fields and bind them to fields in your form.
  • Add a button at the bottom of your page, and add a Simple Action event ("Save Document") to it.

This work was completed in a few minutes and I successfully tested the page in Firefox.  I was about to run around the office in celebration, when I reminded myself to verify that it works in Internet Explorer 7 (the browser of choice at the customer's office) as well... That's when the trouble started!

Clicking the save button in IE7, the only thing happening is that an error message is displayed:
'document.forms[...].$$xspsubmitid' is null or not an object'
Inspecting the source code of the Xpage, there are a few interesting parts. When creating an Xpage with a submit/save button, the following HTML is automagically created and included in your page:
(The id of my save button is "view:_id1:button1")

As I click the save button in Firefox, I can see through Firebug that the DOM is actually changed as the onClick event of the button is fired. The code snippet now looks like this:

As far as I can see (through Firebug Lite), the same changes are not made in Internet Explorer 7. I have just started experimenting with this part of XPages (submitting/editing documents from Web), but I am assuming that this is what causes the trouble, as the Xpage does not know what part of the page to submit to the server side.

Are there anyone else out there experiencing the same problems?
I have made attempts to dive into the XPages event handling, but I have yet to get to grips with it.

Unfortunately, I have not been able to test this page in other browsers yet. Due to security issues, I am developing the XPages application on a computer provided by the customer, with insufficient rights to install additional software.


UPDATE:
The source code that creates the problem:
XPAGE SOURCE CODE

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
    <xp:this.resources>
        // Removed included js and css files
    </xp:this.resources>
    <xp:this.data>
        <xp:dominoDocument var="newsDoc" formName="NEWS">
        </xp:dominoDocument>
    </xp:this.data>

    <xc:global_linkjs />
    <div class="main xpNyhet">
        <div class="mainInner">
            <div class="content">
                <div class="page">
                    <div class="pageCenter">
                        <div class="pageContent">
                            // Removed code to generate entry fields and bind them to fields in the document (by drag-and-drop from Data palette)
                            <xp:button value="Lagre dokument"
                                id="button1" save="true" execMode="complete">
                                <xp:eventHandler event="onclick"
                                    save="true" submit="true" immediate="false" refreshMode="complete">
                                    <xp:this.action>
                                        <xp:actionGroup>
                                            <xp:saveDocument></xp:saveDocument>
                                            <xp:openPage>
                                                <xp:this.name><![CDATA[#{javascript:var mid = new CGIVariables().getURLParam("mid");

                                                    if (mid) {
                                                        return "/forsideSpin.xsp?mid=" + mid + "&login";
                                                    } else {
                                                        return "/forsideSpin.xsp?login";
                                                }}]]>
                                                </xp:this.name>
                                            </xp:openPage>

                                        </xp:actionGroup>
                                    </xp:this.action>
                                </xp:eventHandler>
                            </xp:button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</xp:view>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

HTML SOURCE CODE (from IE7)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="no">
<head>
    // Removed content here
</head>
    <body class="xspView tundra">
        <form id="view:_id1" method="post" action="/weblink/FELLES/spinlokalnyheter.nsf/lagNyhet.xsp?mid=spin&amp;login" class="xspForm" enctype="multipart/form-data">
            <div class="content">
                <div class="page">
                    <div class="pageCenter">
                        <div class="pageContent">
                            // Removed content here. Entry fields bound to fields in the doucment form.
                            <button id="view:_id1:button1" class="xspButtonSubmit" type="button" name="view:_id1:button1">Save document</button>
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!cjwesc81oc!">
            <input type="hidden" name="$$xspsubmitid">
            <input type="hidden" name="$$xspexecid">
            <input type="hidden" name="$$xspsubmitvalue">
            <input type="hidden" name="$$xspsubmitscroll">
            <input type="hidden" name="view:_id1" value="view:_id1">
            <script type="text/javascript">
                function clearFormHiddenParams_view__id1(curFormName) {
                    var curForm = document.forms[curFormName];
                }
            </script>
        </form>
        <script type="text/javascript">
            XSP.addOnLoad(function() {
                XSP.attachEvent("view:_id1:_id90", "view:_id1:button1", "onclick", null, true, false);
            }); 
        </script>
    </body>
</html>

7 comments:

  1. As far as I can see from your screenshots, a <form> element isn't created, hence the error message. Is that the entire source code of the page?

    If possible, could you create a txt file of the html source code generated for IE/the source code for the XPage?

    ReplyDelete
  2. All right, I updated the blog entry with the source code. Hope this gives you the desired information!

    My guess is that, for some reason, some events in IE7 are not fired...

    ReplyDelete
  3. Update:
    The problem occurs in IE6 and IE8 as well, it is not an IE7-exclusive problem.

    IE8 provides some more info:
    Message: 'document.forms[...].$$xspsubmitid' is null or not an object
    Line: 14
    Char: 13674
    Code: 0
    URI: http://<my.domain.com>/domjs/dojo-1.3.2/ibm/xsp/widget/layout/xspClientDojo.js

    ReplyDelete
  4. I tested your XPage. The slimmed down version works with IE7/8 on my computer.

    Try creating a "clean" XPage without any client side script libraries.

    If you have IE8 installed, press F12 to open Developer Tools, and enable script debugging. This may also help you tracking down the bug.

    An off-topic tip. There's a global hashmap that contains all the parameters for the page, param. Unless I'm misreading your code, you could use param.mid instead of new CGIVariables().getURLParam("mid")

    ReplyDelete
  5. Thanks alot for putting me on the right track!

    The problem seems to be that one of the included client-side javascript libraries created a form in the page. This was not visible in the HTML source code, but what was even more strange was that it was nowhere to be seen in Firebug either...

    I'm guessing maybe Firefox won't let you put a form inside a form, while IE lets you do it and then shows the error message afterwards instead...

    Oh well, problem solved!

    ReplyDelete
  6. Hi.

    I have 3 file upload control and one file download control in a xpage and bind it to a richtext field in a form , added a button with the simple action "Save Document" in xpage.

    first I have uploaded 3 files and click the save button.

    then I have deleted all the attachments using the delete option in file download control.and I clicked the same save button again.

    then i am again uploading all the attachments and click the save button.

    I am getting the error "Error while saving the document".......

    can u help me with this.

    ReplyDelete
  7. @Surendar: I have not worked much with the file upload/download controls, but maybe I could help if you provide a bit more details about your problem!

    ReplyDelete