Why does my Javascript function only work SOME times?

Question

My sandbox is here: http://9.latest.truxmap.appspot.com/

First click a marker on the map (if there are none when the page loads, check the 'food trucks opening soon' box in the navigation widget). Next go to the 'Reviews' tab.

In GWT, everytime I open a marker I'm calling the javascript function resizeReviewTab() which corrects styling issue that arise given the fact that the content in the status and review tabs are dynamic. If the Javascript worked, then you will see STARS rather than radio buttons floating right above the text area in the 'Reviews' tab. Otherwise, you'll see plain radio buttons.

I cant figure out what happens when the marker DOESNT open up properly. How could it work once, then not again, then work again after a few different markers? Heres the function thats called:

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() is the javascript for the jQuery plugin jquery.stars with a few modifications, visible here: http://9.latest.truxmap.appspot.com/lib/jquery.rating.js

I need to call this function because if I merely load it at the beginning of the html document, none of the info windows created by clicking the map will ever have their radio buttons changed into stars.

This is quite bothersome, I'm looking forward to your replies. Thanks!

Answer 1

You might want to unbind your events before binding if a function gets called multiple times. This will help prevent multiple binds, which can cause weird and inconsistent results.

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 2

These bits are definitely broken

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

And

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");
}

I think you meant

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

And

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

Answer 3

The two answers given by @amurra and @meouw were valid and could have caused issues in the future. However, the answer to the question asked the in OP is that GWT calls the SelectionChangedHandler TWICE, every time the active cell is changed -- once when a cell is de-selected, and once when another cell is re-selected. This was causing the javascript function to be called twice, back-to-back, which was leading to nasty behavior. Thanks a lot for the help in this thread!