Pourquoi ma fonction Javascript fonctionne-t-elle QUELQUES fois?

Question

Mon bac à sable est ici: http://9.latest.truxmap.appspot.com/

d'abord cliquer sur un marqueur sur la carte (s'il n'y en a pas quand la page se charge, cochez la case « food trucks ouverture bientôt » dans le widget de navigation). Ensuite, allez dans l'onglet "Avis". Dans GWT, chaque fois que j'ouvre un marqueur, j'appelle la fonction javascript resizeReviewTab() qui corrige le problème de style qui survient étant donné que le contenu des onglets status et review est dynamique. Si le Javascript a fonctionné, alors vous verrez STARS plutôt que des boutons radio flottant juste au-dessus de la zone de texte dans l'onglet 'Critiques'. Sinon, vous verrez des boutons radio simples.

Je n'arrive pas à comprendre ce qui se passe quand le marqueur NE S'ouvre pas correctement. Comment pourrait-il fonctionner une fois, puis pas à nouveau, puis travailler à nouveau après quelques marqueurs différents? Heres la thats fonction appelée:

function resizeReviewTab(){ 

    $('#content').text(""); 

    $('.statusWindowB').css('height', $('.statusWindowA').css('height'));     

    $('.name-sliding').focus(function() { 

     $('.name-label-sliding').animate({ marginLeft: "133px" }, "fast"); 

      if($(this).val() == "name") 
       $(this).val() == ""; 

     }).blur(function() { 

      if($(this).val() == "") { 
       $(this).val() == "name"; 
       $('.name-label-sliding').animate({ marginLeft: "12px" }, "fast"); 
      } 
     });  

    $('.content-sliding').focus(function() { 
      $('.content-label-sliding').fadeOut("slow"); 
    }); 

    starify(); 
} 

starify() est le javascript pour les jquery.stars plugin jQuery avec quelques modifications, visibles ici: http://9.latest.truxmap.appspot.com/lib/jquery.rating.js

Je dois appeler cette fonction parce que si je simplement charge Au début du document html, aucune des fenêtres d'information créées en cliquant sur la carte ne verra ses boutons radio modifiés en étoiles.

Ceci est assez gênant, j'attends vos réponses avec impatience. Merci!

Answer 1

Les deux réponses données par @amurra et @meouw étaient valides et auraient pu causer des problèmes à l'avenir. Cependant, la réponse à la question demandée dans OP est que GWT appelle le SelectionChangedHandler DEUX FOIS, chaque fois que la cellule active est changée - une fois lorsqu'une cellule est désélectionnée, et une fois lorsqu'une autre cellule est sélectionnée de nouveau. Cela provoquait l'appel de la fonction javascript deux fois, dos à dos, ce qui conduisait à un comportement désagréable. Merci beaucoup pour l'aide dans ce fil!

Answer 2

Vous souhaiterez peut-être dissocier vos événements avant de les lier si une fonction est appelée plusieurs fois. Cela permettra d'éviter plusieurs liaisons, ce qui peut entraîner des résultats étranges et incohérents.

function resizeReviewTab(){ 

$('#content').text(""); 

$('.statusWindowB').css('height',$('.statusWindowA').css('height'));     

$('.name-sliding').unbind("focus").focus(function() { 

    $('.name-label-sliding').animate({ marginLeft: "133px" }, "fast"); 

     if($(this).val() == "name") 
      $(this).val() == ""; 

    }).unbind("blur").blur(function() { 

     if($(this).val() == "") { 
      $(this).val() == "name"; 
      $('.name-label-sliding').animate({ marginLeft: "12px" }, "fast"); 
     } 
    });  

$('.content-sliding').unbind("focus").focus(function() { 
     $('.content-label-sliding').fadeOut("slow"); 
}); 

starify(); 

}

Answer 3

Ces bits sont définitivement cassés

if($(this).val() == "name") 
    // next line is checking whether val equals "" 
    // we already know it equals "name" 
    // so it returns false(which is discarded) 
    $(this).val() == ""; "name" , 

Et

if($(this).val() == "") { 
    // next line is checking whether val equals "name" 
    // we already know it equals "" 
    // so it returns false(which is discarded) 
    $(this).val() == "name"; 
    $('.name-label-sliding').animate({ marginLeft: "12px" }, "fast"); 
} 

Je pense que vous vouliez dire

if($(this).val() == "name") 
    $(this).val(''); // sets val to nothing 

Et

if($(this).val() == "") { 
    $(this).val("name"); // sets val to "name" 
    $('.name-label-sliding').animate({ marginLeft: "12px" }, "fast"); 
}