JQuery Script works with new document, but not with saved ones

Question

Here is what I have :

Lotus database (8.5.3) with jQuery and jQueryUI included
form1 is a form with just one field. It is set to
- "On open - Automatically enable Edit mode"
- "On Open - Display XPage instead : xpage1"
- "On Web Access - Display XPage instead : xpage1"
xpage1 is an xpage. It contains :
- An inputBox linked to the field in form1
- A button that calls a small script, just alert("some text")
- A jQuery script is included on the page. It's a draggable Panel. It's all there is to it. Just a panel that you can drag on the page.
view1 is a view displaying documents based on form1

Now my problem :

If launch the Xpage in my browser (Chrome or IE), it behaves normaly : I can see my alert when I click on the button, I can drag my panel on the page, I can fill my field, I can save the document.
When I open it later, however, the Xpage opens and display the field data, but my scripts don't work : impossible to save the document, move the panel, display the alert.
If I launch the Xpage in my Lotus client, it works !
If I remove my jQuery reference and my movable panel, the other scripts work.

Did I forget something ? Is it some kind of known problem?

Here is my Xpage source, for reference :

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<!-- THIS WHERE I MAKE JQUERY AVAILABLE -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>

<!-- THIS IS MY DATA BINDING -->
<xp:this.data>      
    <xp:dominoDocument var="ds1" formName="form1"></xp:dominoDocument>
    </xp:this.data>

<!-- THIS IS MY FIELD -->
<xp:br></xp:br>
Field1 : <xp:inputText id="field1" value="#{ds1.field1}"></xp:inputText>
<xp:br></xp:br><xp:br></xp:br>

<!-- THIS IS MY PROMPT BUTTON -->
<xp:button value="Alert" id="button2">
    <xp:eventHandler event="onclick" submit="false">
        <xp:this.script><![CDATA[alert("Waring!")]]></xp:this.script>
    </xp:eventHandler>
</xp:button>
<xp:br></xp:br><xp:br></xp:br>

<!-- THIS IS MY MOVABLE PANEL -->
<xp:panel id="myPan01"
    style="height:120px;width:120px;background-color:rgb(0,64,128)">
    <xp:this.attrs>
        <xp:attr name="class" value="dragItem"></xp:attr>
    </xp:this.attrs>
    <xp:div style="text-align:center">
        <xp:span style="font-weight:bold;color:rgb(255,255,255)">
        </xp:span>
    </xp:div>
    <xp:div style="text-align:center">
        <xp:span style="font-weight:bold;color:rgb(255,255,255)">
            Move Me!
        </xp:span>
    </xp:div>
</xp:panel>
<script>
    XSP.addOnLoad(function(){ $(".dragItem").draggable({ grid: [
    40,40 ]}); })
</script>
<xp:br></xp:br> 

<!-- THIS IS MY SAVE BUTTON -->
<xp:button value="Save" id="button1">
    <xp:eventHandler event="onclick" submit="true"
        refreshMode="complete" immediate="false" save="true">
    </xp:eventHandler>

<!-- THIS IS THE END... -->
</xp:button>
</xp:view>

Just a wild guess, but is something tied to the session and the session expired? Try using the "Keep Session Alive" control in the Ext Lib and see if that helps. From the code you showed, my idea seems highly unlikely but is worth a try. I have had things not work because serverside code is 'forgotten' but jQuery is clientside. I have never seen a browser forget that code is loaded with the page. Actually, have you checked with firebug that the jQuery is there the second time when it doesn't work? — Steve Zavocki
Use Chrome's developer tools (STRG+I) and have a look at the console. I bet there is some error message that helps to track down the problem. — Julian Buss

Julian Buss Julian Buss · Accepted Answer · 2013-11-30T10:30:31

You're including jquery via a standard HTML <script> tag, this may lead to problems since this will be placed in the HTML body instead of the header. Use the XPage's resource's property. Add some client side JavaScript library with in the XPage ressources properties, then go to the source of the XPage, locate the xp tag that includes the JavaScript library and change it's URL so that your jquery resource is included.

I'm not 100% sure that this solves your problem, but since your code looks good otherwise it's worth a try.

JQuery Script works with new document, but not with saved ones

1 Answers