jquery модальное диалоговое окно .load удаляет таблицу css из родительского - PullRequest
Новая
       32

jquery модальное диалоговое окно .load удаляет таблицу css из родительского

1 голос
/ 03 марта 2011

У меня здесь что-то странное.Я запускаю диалоги из таблицы данных (для редактирования записей).Но когда я запускаю модал, мое чередование строк (примененное через js) к таблице исчезает, и дополнительные щелчки при редактировании в IE создают модал с неверной высотой.

Теперь, это работало нормально, но, поскольку я настраивал свои функции, чтобы сделать то, что мне нужно, что-то сломалось.У меня также есть ссылка «добавить» на той же странице, которая не убивает таблицу CSS.Ниже у меня есть логика чередования и соответствующий код диалога.Если вам нужно увидеть больше, дайте мне знать.Чего мне не хватает? 

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

});

Буду признателен за любую помощь.

ОБНОВЛЕНИЕ : обновленный код опубликован.Похоже, это связано с .load.Когда я закомментирую .load, всплывает диалоговое окно, и CSS остается в таблице.Все еще пытаюсь исправить это, хотя ...

Ответы [ 2 ]

0 голосов
/ 08 марта 2011

Не уверен в протоколе здесь: я не смог решить эту проблему, но обошел ее, используя json для заполнения моей формы редактирования вместо загрузки ее из внешнего файла.

@ сынок, спасибо тебе за помощь.

0 голосов
/ 07 марта 2011

Похоже, load() заменяет элемент и очищает обработчики событий, которые добавляют классы. Из справочника jQuery API :

.load() устанавливает HTML-содержимое сопоставленного элемента для возвращаемых данных.

Вам необходимо повторно привязать события к этому элементу.

...