Question

I have what seems like an odd situation here. I’m launching dialogs from a table of data (for editing records). But when I launch the modal, my row striping (applied via js) on the table disappears and additional clicks on edit in IE produce a modal with an incorrect height.

Now, this was working fine, but as I’ve been tweaking my functions to do what I need, something broke it. I also have an “add” link on the same page that does not kill the table css. Below I have my striping logic and relevant dialog code. If you need to see more, let me know. What am I missing?

<link type="text/css" href="js/css/start/jquery-ui-1.8.9.custom.css" rel="stylesheet" />    
<script type="text/javascript" src="js/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".striped tr").mouseover(function() {
        $(this).addClass("highlight");
    });
    $(".striped tr").mouseout(function() {
        $(this).removeClass("highlight");
    });
    $(".striped tr").click(function() {
        $(this).toggleClass("selected");
    });
    $(".striped tr:nth-child(odd)").addClass("odd");
});

$(function() {
    // Dialog   
    //alert($(this).form.val());
    var rep_id = $("#rep_id"),
        name = $("#name"),
        num_name = $("#num_name"),
        external = $("#external"),
        allFields = $([]).add(rep_id).add(name).add(external).add(num_name),
        tips = $(".validateTips");

    function checkLengthEdit(o, n, min, max, msg) {
        //alert(o.length);
        if (o.length > max || o.length < min) {
            o.addClass("ui-state-error");
            updateTips(msg);
            alert("failed validation");
            return false;
        } else {
            alert("passed validation");
            return true;
        }
    }

    function checkLength(o, n, min, max, msg) {
        if (o.length > max || o.length < min) {
            o.addClass("ui-state-error");
            updateTips(msg);
            alert("failed validation");
            return false;
        } else {
            alert("passed validation");
            return true;
        }

    }

    function updateTips(t) {
        tips.text(t).addClass("ui-state-error");
    }

    function removeTips(t) {
        tips.text(t).removeClass("ui-state-error");
    }
    $('#edit_number').dialog({
        autoOpen: false,
        width: 400,
        modal: true,
        buttons: {
            "Update Number": function() {
                var bValid = true;
                allFields.removeClass('ui-state-error');
                if (bValid) {
                    alert("valid");
                    //document.edit_number_form.submit();
                }
            },
            "Cancel": function() {
                allFields.removeClass('ui-state-error');
                removeTips('');
                $(this).dialog("close");
            }
        }
    });
    $('.edit_number_link').bind('click', function() {
        var edit_path = $(this).attr("href");
        $("#edit_number").load(edit_path).dialog('open');
        return false;
    });

});

Any help would be appreciated.

UPDATE: Updated code posted. It looks like it’s related to .load. When I comment out the .load, the dialog pops and css remains in the table. Still looking to get it fixed though…

Answer 1

Looks like load() is replacing the element and clearing the event handlers that add the classes. From the jQuery API reference:

.load() sets the HTML contents of the matched element to the returned data.

You’ll need to re-bind the events to that element.