Hi,

 

I am new to using jQuery and was trying to implement the keyup event of a <xp:inputText> using jQuery. The xPage loads without any  errors but the jQuery does not seem to work for the <xp:inputText>. I created a simple HTML text box <input type="text"> on the same xPage and the jQuery works for that HTML input box. Can anyone please give me some guidance for using the jQuery for <xp:inputText>?

 

The source of of my xpage is as below along with the source code of the custom control. the jQuery.js file is same under Resources-Files in the domino database. 

 

=================== 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">

<xc:ccJQueryInvoker></xc:ccJQueryInvoker>

<xp:br></xp:br>

<xp:br></xp:br>

<xp:span

style="color:rgb(0,64,128);font-weight:bold;font-size:18pt;text-decoration:underline">

Welcome to world of JQuery in XPages

</xp:span>

<xp:br></xp:br>

<xp:br></xp:br>

<xp:br></xp:br>

<p>If you click on me, I will disappear.</p>

<p>Click me away!</p>

<p>Click me too!</p>

<xp:br></xp:br>

<xp:br></xp:br><xp:inputText id="txtSearch"></xp:inputText>

<input id="textbox" type="text" size="50" /> 

<div>

<label>1. keyup() Message :</label> <span id="msg-keyup"></span>

</div> 

<div>

<label>2. keydown() Message :</label><span id="msg-keydown"></span>

</div> 

<div>

<label>3. keypress() Message :</label><span id="msg-keypress"></span>

</div>

<xp:eventHandler event="onClientLoad" submit="false">

<xp:this.script><![CDATA[

$(document).ready(function(){

  $("p").click(function(){

    $(this).hide();

  });

  $("#txtSearch").keyup(function(event){

$("#msg-keyup").html("keyup() is triggered!, keyCode = " + event.keyCode + " which = " + event.which)

});  

  $("#textbox").keyup(function(event){

$("#msg-keyup").html("keyup() is triggered!, keyCode = " + event.keyCode + " which = " + event.which)

if(event.which == 13) {

alert("Enter Pressed");

}

else {

alert("Other");

}

});

});]]></xp:this.script>

</xp:eventHandler>

</xp:view>

 

================ Custom Control Source Code ============= 

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:this.beforePageLoad><![CDATA[#{javascript:var currLocation=context.getUrl();

var webDBPath=@LeftBack(currLocation,"/");

sessionScope.jqueryLibFile=webDBPath+"/jQuery.js"}]]></xp:this.beforePageLoad>

<xp:this.resources>

<xp:script src="#{javascript:sessionScope.jqueryLibFile}"

clientSide="true">

</xp:script>

</xp:this.resources>

</xp:view>

 

 

THANKING YOU IN ADVANCE. 

 

Regards, 

Yusuf