Jquery in XPages not working properly

Question

I have an xpage and i have added jquery as script resource in it. Then i added some controls (edit,computed,output script with jquery function) and i am trying something dummy. Look at my xpage below:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:this.resources>
        <xp:script src="http://code.jquery.com/jquery-1.10.2.js"
            clientSide="true">
        </xp:script>
        <xp:script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet
            href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
        </xp:styleSheet>
    </xp:this.resources>

    <xp:scriptBlock id="scriptBlock1">
        <xp:this.value><![CDATA[$(document).ready(function() {
  $("#{id:button1}").mouseover(function() {
      alert('sdfsdfsdf');
  });
});]]></xp:this.value>
    </xp:scriptBlock>
    <xp:br></xp:br>
    <xp:br></xp:br>    
    <xp:button value="Label" id="button1"></xp:button>
    <xp:br></xp:br>
    <xp:br></xp:br>
    <xp:text escape="false" id="ttt">
        <xp:this.value><![CDATA[#{javascript:"<p id='test'>sdfsdfsdf</p>"}]]></xp:this.value>
    </xp:text>
</xp:view>

When i hover the button nothing happens. If i set the id of the mouseover to the #test then it works.

What is the problem of using jquery in XPages?

Telegraphy

Also consider using class selectors instead of id selectors. – Unweave

I always use class selectors in order to avoid the weird ids generated. – Tinsley

Answer 1

Use the x$ jQuery selector for XPages snippet from openntf or use

$("[id$='#{id:button1}']").mouseover(function() {...

Inessa