Question

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

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

Answer 2

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.

友情链接