JQuery problem after ADF partial refresh

Question

Hi,
I am using JDeveloper 10.1.3, and am trying to spice things up a little with some jQuery. However some of this code does not work as I expect after a partial refresh. In a simple page for testing purposes I have:
bq. <afh:script text=" \\     $(document).ready(function() { \\         oldBackgroundColor = $('#outputText').css( 'background-color' ); \\         $('#outputText').css( 'background-color', 'red' ); \\         newBackgroundColor = $('#outputText').css( 'background-color' ); \\         alert('background color was ' + oldBackgroundColor + ', now ' + newBackgroundColor); \\     }); \\ "/>
and
bq. <af:outputText partialTriggers="button" id="outputText" value="some text whose background color changes"/> \\ <af:commandButton partialSubmit="true" immediate="true" id="button" text="partial submit button"/>
When the page is initally loaded, the background color of the text is changed to red, and the alert is displayed saying something like 'background color was transparent, now red' (browser dependent).
When the button is pushed, the background reverts to transparent (as expected as it is being loaded again). The alert is also displayed with the same message (indicating the color has been changed), but the background on the screen does not change.
Is this what anyone would expect, and should it be possible? My javascript knowledge is pretty basic so I haven't got very far looking through the code trying to figure it out. Any ideas would be much appreciated.
I am using version 1.2.6 of jQuery from [http://docs.jquery.com/Downloading_jQuery]
The full source of the jspx is:
<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:af="http://xmlns.oracle.com/adf/faces"
xmlns:afh="http://xmlns.oracle.com/adf/faces/html">
<jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
doctype-system="http://www.w3.org/TR/html4/loose.dtd"
doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
<jsp:directive.page contentType="text/html;charset=windows-1252"/>
<f:view>
<afh:html>
<afh:head title="List">
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252"/>
<afh:script source="/javascript/jquery-1.2.6.js"/>
<afh:script text="
$(document).ready(function() {
oldBackgroundColor = $('#outputText').css( 'background-color' );
$('#outputText').css( 'background-color', 'red' );
newBackgroundColor = $('#outputText').css( 'background-color' );
alert('background color was ' + oldBackgroundColor + ', now ' + newBackgroundColor);
"/>
</afh:head>
<afh:body>
<af:form>
<af:outputText partialTriggers="button" id="outputText"
value="some text whose background color changes"/>
<af:commandButton partialSubmit="true" immediate="true" id="button"
text="partial submit button"/>
</af:form>
</afh:body>
</afh:html>
</f:view>
</jsp:root>

Answer 1

I don't have 10g release in my computer right now.
But I have tried the same in 11 + build of JDeveloper
Done little changes and it worked
below is the code
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1" title="My Test JQuery Page">
<af:resource type="javascript" source="/js/jquery-1.4.4.min.js"/>
<af:resource type="javascript">
$(document).ready(function () {
$("#outputText").css("background-color", "red");
function changeColor() {
$("#outputText").css("background-color", "yellow");
</af:resource>
<af:form id="f1">
<af:outputLabel id="outputText"
value="some text whose background color changes"/>
<af:commandButton id="button" partialSubmit="true"
clientComponent="true" text="partial submit button">
<af:clientListener method="changeColor" type="action"/>
</af:commandButton>
</af:form>
</af:document>
</f:view>
</jsp:root>