{"id":1152,"date":"2013-03-26T13:10:44","date_gmt":"2013-03-26T11:10:44","guid":{"rendered":"http:\/\/hasselba.ch\/blog\/?p=1152"},"modified":"2013-03-26T13:12:40","modified_gmt":"2013-03-26T11:12:40","slug":"quick-n-dirty-how-to-add-html-5-events","status":"publish","type":"post","link":"https:\/\/hasselba.ch\/blog\/?p=1152","title":{"rendered":"Quick-n-Dirty: How to add HTML 5 events"},"content":{"rendered":"

One way for adding unsupported events to an XPage or a component is the trick from Keith<\/a>. But this is limited to CSJS only. If you need to execute a server side event, you just need change the name of the event to a new HTML 5 event name which does not exist in the DDE.<\/p>\n

Here is an example for the new onSearch<\/em> event:<\/p>\n

<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<xp:view xmlns:xp=\"http:\/\/www.ibm.com\/xsp\/core\">\r\n\r\n\u00a0\u00a0 \u00a0<xp:inputText id=\"inputTextSearch\" type=\"search\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:eventHandler event=\"onsearch<\/span>\" submit=\"true\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0refreshMode=\"partial\" refreshId=\"labelSearchFor\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:this.action>\r\n               <![CDATA[#{javascript:print(\"onSearch\");}]]>\r\n            <\/xp:this.action>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:eventHandler>\r\n\u00a0\u00a0 \u00a0<\/xp:inputText>\r\n\r\n\u00a0\u00a0 \u00a0<xp:br \/>\r\n\u00a0\u00a0 \u00a0<xp:br \/>\r\n\r\n\u00a0\u00a0 \u00a0<xp:label id=\"labelSearchFor\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:this.value>\r\n           <![CDATA[#{javascript:getComponent(\"inputTextSearch\").value}]]>\r\n        <\/xp:this.value>\r\n\u00a0\u00a0 \u00a0<\/xp:label>\r\n\r\n<\/xp:view><\/code><\/pre>\n
After entering a value and hitting enter…<\/p>\n
\"\"<\/p>\n
… you can see on the server console that the event occurred:<\/p>\n
\"\"<\/p>\n
This technique allows to add new events to the whole XPage, for example the onContextMenu<\/em> event:<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<xp:view xmlns:xp=\"http:\/\/www.ibm.com\/xsp\/core\">\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:eventHandler event=\"oncontextmenu<\/span>\" submit=\"true\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0refreshMode=\"norefresh\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:this.action>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<![CDATA[#{javascript:print(\"onContextMenu\");}]]>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:this.action>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:eventHandler>\r\n\r\n<\/xp:view><\/code><\/pre>\n
Every time if the user opens the context menu in the browser, the event is triggered and executed on the server:<\/p>\n
\"\"<\/p>\n
\"\"<\/p>\n
The name of the event must be lowercased. A list of HTML 5 events can be found here: http:\/\/www.tutorialspoint.com\/html5\/html5_events.htm<\/a>. Not all browsers support every HTML 5 event in the list.<\/p>\n
P.S.\u00a0Keep in mind that this article has been posted in the \u201cQuick-n-Dirty<\/strong>\u201d category.<\/p>\n","protected":false},"excerpt":{"rendered":"
One way for adding unsupported events to an XPage or a component is the trick from Keith. But this is limited to CSJS only. If you need to execute a server side event, you just need change the name of … Weiterlesen →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,46,9,76,81,74],"tags":[33,14,7,77,96,4,25,5,32,12,3],"class_list":["post-1152","post","type-post","status-publish","format-standard","hentry","category-html","category-html5","category-javascript","category-ssjs","category-web","category-xpages","tag-8-5-3","tag-designer","tag-domino","tag-html","tag-html5","tag-js","tag-partial-refresh","tag-ssjs","tag-tipp","tag-web","tag-xpages"],"_links":{"self":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1152"}],"version-history":[{"count":9,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1152\/revisions"}],"predecessor-version":[{"id":1161,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1152\/revisions\/1161"}],"wp:attachment":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}