Comment changer dynamiquement le style dans XPage ??? En fait, je veux clignoter une étiquette avec une couleur différente?

Question

Tween ne fonctionne pas dans Xpages, je l'ai utilisé la fonction setTimeOut de retard.
Mais ce qui ne fonctionne pas comme ma préoccupation. alert travaille et se retardé tout en utilisant la fonction setTimeOut. Mais le changement du style ne fonctionne pas ... En fait, en dernière instance de l'action ne fonctionne que

code que je l'ai utilisé est.

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>  

Answer 1

Ok, je comprends mieux le problème maintenant (désolé), mais il est à cause de la boucle. Le navigateur met à jour l'interface après toutes les boucles sont faites. J'ai passé un peu de temps à ce sujet et est venu avec ce code. Avec la variable max vous définissez le nombre de fois qu'il clignote le texte. J'espère que cela va résoudre le problème.

<?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>

Answer 2

Peut-être essayer au lieu d'utiliser Dojo:

dojo.style("#{id:label1}", "color", "blue"); 

et

dojo.style("#{id:label1}", "color", "red"); 

Answer 3

Votre code fonctionne bien, il doit donc être un autre code qui brise votre script. Je l'ai ajouté à un nouveau XPage et clignote! Rouge et bleu

  <?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>

Answer 4

Cela fonctionne sans alerte. La raison pour laquelle votre script ne fonctionne pas parce que la boucle de volonté bloque l'interface utilisateur jusqu'à ce qu'il soit fait. On dirait qu'il n'a rien fait, mais il l'a fait. Vous pouvez tester vous-même en ajoutant de nouveaux éléments à votre page html. Une fois le script, vous verrez plusieurs éléments ajoutés lorsque l'interface utilisateur est rafraîchi.

Vous devriez vraiment utiliser la fonction settimeout pour que cela fonctionne:

    <?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>