How to dynamically change the style in Xpage??? Actually I want to blink a label with different color?
-
26-10-2019 - |
Question
Tween is not working in Xpages ,I have used the setTimeOut
function for delay.
But which is not working as of my concern. alert
is working and getting delayed while using setTimeOut
function. But changing of style is not working... Actually Last instance of the action is only working
Code that I have used is.
var t = 1;
var flag;
function doMove() {
alert("Hi");
t = t + 1;
if ((t % 2) == 0) {
document.getElementById("#{id:label1}").style.color = "blue";
flag = test()
}
else {
document.getElementById("#{id:label1}").style.color = "red";
flag = test()
}
}
function test() {
var startTime = new Date().getTime();
while (new Date().getTime() < startTime + 1000);
return true;
}
for (var l = 0; l <= 2; l++) {
doMove();
}
XSP :
Please see the following
<xp:label value="Testing" id="label1" style="font-weight:bold;font- size:14pt;color:rgb(255,0,0)">
</xp:label>
<xp:button value="Dojo" id="button3">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[
var t = 1;
var flag;
function doMove() {
alert("Hi");
t = t + 1;
if ((t % 2) == 0) {
document.getElementById("#{id:label1}").style.color = "blue";
flag = test()
}
else {
document.getElementById("#{id:label1}").style.color = "red";
flag = test()
}
}
function test() {
var startTime = new Date().getTime();
while (new Date().getTime() < startTime + 1000);
return true;
}
for (var l = 0; l <= 2; l++) {
doMove();
}
]]></xp:this.script>
</xp:eventHandler>
</xp:button>
Solution
Ok, I understand the problem better now (sorry), but it is because of the for loop. The browser updates the interface after all loops are done. I have spend some time on this and came up with this code. With the max variable you will set the number of times it will blink the text. I hope this will solve the problem.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" createForm="false">
<xp:label value="Label" id="label1"></xp:label>
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[var t = 1;
var flag;
var max = 5;
function doMove() {
t = t + 1;
if (t > max){
return;
}
if ((t % 2) == 0) {
document.getElementById("#{id:label1}").style.color = "blue";
flag = setTimeout(doMove, 1000);
}
else {
document.getElementById("#{id:label1}").style.color = "red";
flag = setTimeout(doMove, 1000);
}
}
doMove();
]]></xp:this.script>
</xp:eventHandler>
</xp:view>
OTHER TIPS
Maybe instead try using Dojo:
dojo.style("#{id:label1}", "color", "blue");
and
dojo.style("#{id:label1}", "color", "red");
Your code is working fine, so it must be some other code that breaks your script. I have added this to a new Xpage and it is blinking red and blue!
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:label value="Label" id="label1"></xp:label>
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[var t = 1;
var flag;
function doMove() {
alert("Hi");
t = t + 1;
if ((t % 2) == 0) {
document.getElementById("#{id:label1}").style.color = "blue";
flag = test()
}
else {
document.getElementById("#{id:label1}").style.color = "red";
flag = test()
}
}
function test() {
var startTime = new Date().getTime();
while (new Date().getTime() < startTime + 1000);
return true;
}
for (var l = 0; l <= 2; l++) {
doMove();
}]]></xp:this.script>
</xp:eventHandler></xp:view>
This is working without alert. The reason why your script is not working because the will loop is blocking the user interface until it's done. It looks like it did nothing, but it did. You can test it yourself by adding new elements to your html page. After the script you will see multiple elements added when the user interface is being refreshed.
You should really use the settimeout function for this to work:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" createForm="false">
<xp:label value="Label" id="label1"></xp:label>
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[var t = 1;
var flag;
function doMove() {
t = t + 1;
if ((t % 2) == 0) {
document.getElementById("#{id:label1}").style.color = "blue";
flag = setTimeout(doMove, 1000);
}
else {
document.getElementById("#{id:label1}").style.color = "red";
flag = setTimeout(doMove, 1000);
}
}
for (var l = 0; l <= 2; l++) {
doMove();
}
]]></xp:this.script>
</xp:eventHandler>
</xp:view>