JQuery Close Event remove class from table row

Question

Hi all,

I currently have a table with rows that contain a clickable link. When a user clicks a link from any table row JQUery's UI Modal DIalog popups up and i add a class to the clicked links parent tr called 'highlight'. What i'd like to be able to do is remove this class from the row when the JQuerys UI Dialog is closed. Does any one know how i can achieve this?

Here's what my load event looks like

$(document).ready(function() {
        $("#dialog").dialog({
            autoOpen: false,
            height: 170,
            width: 350,
            center: false
        });

        $('.getData').click(function(e) {
            getResults($(this).attr('id'));
            $(this).parent().parent().addClass("highlight");
            $("div#dialog").dialog('open').dialog('option', 'position', [e.clientX, e.clientY]);
            return false;
        });
    });

Thanks

Answer 1

maybe something like this is what you're looking for:

$(document).ready(function() {
    $("#dialog").dialog({
        autoOpen: false,
        height: 170,
        width: 350,
        center: false,
        close: function(event, ui) { 
            $("table tr").removeClass("highlight");
        }
    });

    $('.getData').click(function(e) {
        getResults($(this).attr('id'));
        $(this).parent().parent().addClass("highlight");
        $("div#dialog").dialog('open').dialog('option', 'position', [e.clientX, e.clientY]);
        return false;
    });
});

if you have more than the one row with the class highlight then I recommend setting a global variable in the $('.getData').click... method so you can reference it from the close method.

Answer 2

If you only have one row with the class hightlight at all time you could use this:

$("#dialog").dialog({
    autoOpen: false,
    height: 170,
    width: 350,
    center: false,
    close: function(event, ui) {
        $('table .highlight:first').removeClass('highlight'); 
        // A bit faster in theory
    }
});