Повторное связывание кнопок диалога jQuery - PullRequest
Новая
       52

Повторное связывание кнопок диалога jQuery

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

У меня есть простое диалоговое окно jQuery, в котором есть ввод html. В диалоговом окне есть две кнопки Сохранить / Отменить. Когда пользователь нажимает кнопку Сохранить, я проверяю, предоставил ли он какие-либо данные в поле ввода. Если нет, я сообщаю об ошибке в новой строке в диалоговом окне и жду, пока он предоставит ввод. Но когда он снова нажимает Сохранить, ничего не происходит. Как я могу повторно привязать кнопку Сохранить, как только она была использована? Спасибо! 

    var message = "Please provide Phone number."
    var phoneNum = "<input type='text' id='phoneNum' name='phoneNum'/> ";
    var dialogHtml = "<div id='confirmPhoneNumber'>"  + message + phoneNum + "<div id='dialogError' style='display:none'>Phone number field cannot be empty</div>" + "</div>";
    $(this).append(dialogHtml);
    $("#confirmPhoneNumber").css("font-size", "70%");
    $("#confirmPhoneNumber").dialog({
        resizable : false,
        modal : true,
        title : 'Save Phone',
        buttons : {
            'Save' : function () {
                // Phone number must be provided
                if ($("#phoneNum").val().trim().length == 0) {
                    $("#dialogError").show();
                } else {
                // Make AJAX call
                }
            },
            'Cancel' : function () {
                $(this).dialog('close');
            }
        }
    });

Ответы [ 5 ]

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

на самом деле код работает. Единственное, что вы не можете понять, это из-за неправильно настроенного сценария тестирования (по крайней мере, я так думаю, LoL) 

var message = "Please provide Phone number."
var phoneNum = "<input type='text' id='phoneNum' name='phoneNum'/> ";
var dialogHtml = "<div id='confirmPhoneNumber'>"  + message + phoneNum + "<div id='dialogError' style='display:none'></div>" + "</div>";
$('body').append(dialogHtml);
$("#confirmPhoneNumber").css("font-size", "70%");
$("#confirmPhoneNumber").dialog({
    resizable : false,
    modal : true,
    title : 'Save Phone',
    buttons : {
        'Save' : function () {
            // Phone number must be provided
            if ($.trim($("#phoneNum").val()).length == 0){
                $("#dialogError").html("error occured, fill the textfield please");
                $("#dialogError").show();
            } else {
                $("#dialogError").html("now it is working " + $("#phoneNum").val());
                $("#dialogError").show();
            // Make AJAX call
            }
        },
        'Cancel' : function () {
            $(this).dialog('close');
        }
    }
});

если вы проверите это, вы увидите, что нет вообще никакой привязки.

EDİT : перенастроена кнопка подтверждения в кнопке сохранения. надеюсь, что это сработает.

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

Вы тестируете с IE? Вы получаете какие-либо ошибки на странице?

Если вы посмотрите (я тестирую с хромом) здесь это работает, это позволит вам нажать на кнопку, оно покажет ошибка, введите что-то, нажмите еще раз, и он предупреждает Так что кнопка все еще работает.

Однако IE не работает - он показывает ошибку ..... .trim() не поддерживается IE . Таким образом, вы можете использовать .trim () * jQuery вместо: 

$("#confirmPhoneNumber").dialog({
    autoOpen: true,
    resizable: false,
    modal: true,
    title: 'Save Phone',
    buttons: {
        'Save': function() {
            // Phone number must be provided
            if ( $.trim($("#phoneNum").val()).length == 0) {
                 $("#dialogError").show();
            } else {
                alert('Got a number');
            }
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    }
});

Попробуйте еще раз здесь это работает с IE.

Взгляните на Обрезка в JavaScript не работает в IE .

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

Вы можете использовать «живой» метод для привязки к элементу управления.но это обычно используется, если новые элементы управления создаются динамически.

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

jQuery UI не отменяет привязку обработчика щелчка к диалоговой кнопке после ее нажатия.

См. Демонстрацию на http://jsfiddle.net/MwNJd/2/

У вас должно быть что-то ещепродолжается.

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

Вы можете обрабатывать процесс проверки, как этот 

           'Save' : function () {
                var valid = true;

                // Phone number must be provided
                if ($("#phoneNum").val().trim().length == 0) {
                    $("#dialogError").show();
                    valid = false;
                }
                //any other validations


                if (valid === true) {
                // Make AJAX call
                }
            },

, чтобы валидация могла быть вызвана более одного раза, и если все валидно - форма будет обработана

...