XPages: image onCclick needs 2 clicks to do what is expected

Question

I have a custom control that contains 2 images: add and remove from favorites.

There is some code on the onCLick event of the image, and both images use a SSJS function to see if the current document is already in the favorites or not, in the visible property of each image.

All works well, execpt that I need to click twice on the image in order to see the changes in the UI. Both onClick events are set to FullUpdate (also tried partial update with the panel that contains the images).

I could move all the favorites logic into session scope variables, but I think this should work as is. I just don't understand why I need to click twice, as if the partial refresh doesn't do anything (though it is, as I see the reload Arrow in the browser!).

Can it be that the code takes too long to execute and the refresh doesn'T get the updated info???

Here's the custom control code:

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

    <xp:this.resources>
        <xp:script src="/AppUtils.jss" clientSide="false"></xp:script>
    </xp:this.resources>
    <xp:image url="/favorites-add.png" id="image1"
        alt="Add to Favorites" title="Add to Favorites">
        <xp:this.rendered><![CDATA[#{javascript:!isInFavorites(document1.getDocument().getUniversalID(), userBean.canonicalName);
}]]></xp:this.rendered>
        <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
            <xp:this.action><![CDATA[#{javascript:addToFavorites(document1.getDocument().getUniversalID(),userBean.canonicalName);}]]></xp:this.action>
        </xp:eventHandler>
    </xp:image>
    <xp:image url="/favorites-remove.png" id="image2"
        alt="Remove from Favorites" title="Remove from Favorites">
        <xp:this.rendered><![CDATA[#{javascript:isInFavorites(document1.getDocument().getUniversalID(),userBean.canonicalName);
}]]></xp:this.rendered>
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="complete">
            <xp:this.action><![CDATA[#{javascript:removeFromFavorites(document1.getDocument().getUniversalID(),userBean.canonicalName);}]]></xp:this.action>
        </xp:eventHandler>
    </xp:image>
</xp:view>

And here's the SSJS:

function addToFavorites(unid, userName) {
    var newDoc:NotesDocument = database.createDocument();
    newDoc.appendItemValue("Form","Favorite");
    newDoc.appendItemValue("UserName", userName);
    newDoc.appendItemValue("DocUNID", unid);
    newDoc.save();
    return;
}

function removeFromFavorites(unid, userName) {
    var notesView:NotesView = database.getView("(lkpFavorites)");
    var keys = new java.util.Vector();
    keys.addElement(userName);
    keys.addElement(unid);
    var coll:NotesDocumentCollection = notesView.getAllDocumentsByKey(keys, true);
    if(coll.getCount()==1) {
        coll.getFirstDocument().remove(true);
    }
    return;
}

function isInFavorites(unid, userName) {
    var notesView:NotesView = database.getView("(lkpFavorites)");
    var keys = new java.util.Vector();
    keys.addElement(userName);
    keys.addElement(unid);
    var coll:NotesDocumentCollection = notesView.getAllDocumentsByKey(keys, true);
    if(coll.getCount()>0) {
        return true;
    } else {
        return false;
    }
}

Where is the cursor before the click? Is it in an editable field with an onblur or onchange event? That could be an understandable cause for needing a double click. — Paul Stephen Withers
Does it work if you add notesView.refresh(); after remove() and save()? — Knut Herrmann
your rendered property gets document in wrong state. use scoped variable or return value of your function to set visibility of actions. — Frantisek Kossuth
Frantisek, I am not sure I follow you: I do use the function's return value to set the rendered property on the images. The problem I see is that nothing gets updated: not the image (adding/removing from favorites) nor the view that is located on the left side of my page, that shows the list of current favorites. I was expecting a full refresh to reload the page getting the proper rendered value from my function and also that the displayed favorites view would be updated, but none of that is happening. I don't think it's just a rendered property issue on the images. — Ben Dubuc

Oliver Busse Oliver Busse · Accepted Answer · 2014-12-24T18:03:35

I'd suggest you to put an xp:link around your image to cast the event code instead of using the evennts of the image directly.

XPages: image onCclick needs 2 clicks to do what is expected

2 Answers