Переключатель не отмечен после нажатия в AJAX-подобном сценарии - PullRequest
Новая
       55

Переключатель не отмечен после нажатия в AJAX-подобном сценарии

1 голос
/ 01 января 2011

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

Хотя проверка в конечной системе будет выполняться на стороне сервера с использованием AJAX, следующий код демонстрирует, что AJAX не имеет ничего общего с проблемой.

Большое спасибо, если вы можете сказать мне, что яздесь отсутствует: 

<html>
<head>                                                                  
<STYLE type="text/css">
    .highlighted { color: red; }
</STYLE>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>          
</head>                                                                 
<body>                                                                  

<span id="errors">
</span>

<label for="mytextfield">First, type something in this textfield</>
<input type="text" id="mytextfield" name="mytextfield"/>

<p>Second, click on one of these radio buttons</>

<INPUT TYPE="radio" NAME="binaryquestion" VALUE="Y" >Yes</>
<INPUT TYPE="radio" NAME="binaryquestion" VALUE="N" >No</>

<script type="text/javascript">
    $(document).ready(function() {
        //$("#mytextfield").change(validateTextField);
        $("#mytextfield").change(spliceInTheValidationResultMessage);
    });

    function validateTextField() {
            $.ajax({
                url: 'http://www.google.com',
                success: function(data) {
                    spliceInTheValidationResultMessage();
                }
            });
    }

    function spliceInTheValidationResultMessage() {
        $("#errors").append("<p>Thank you for your input!</p>").addClass("highlighted");
        alert("I expect the radio button that you clicked to become checked. However, close this dialog and you'll see that it will have gained the focus but is NOT checked!");
    };

</script>
</body> 
</html>

1 Ответ

0 голосов
/ 01 января 2011

Извините, у меня возникли проблемы с тем, что вы пытаетесь сделать, но вы пытаетесь сделать что-то подобное? 

<input id="radio1" type="radio" name="binaryquestion" value="Y">Yes</>
<input id="radio2" type="radio" name="binaryquestion" value="N">No</>
<script type="text/javascript">$(document).ready(function () {
    //$("#mytextfield").change(validateTextField);
    //$("#mytextfield").change(spliceInTheValidationResultMessage);
    $("#radio1").bind("click", spliceInTheValidationResultMessage, false);
    $("#radio2").bind("click", spliceInTheValidationResultMessage, false);
});

Я просто добавил атрибуты id к вашим входам переключателей и использовал для них метод jQuery bind (). Возможно, вы захотите изменить функцию validateTextField (), чтобы она захватывала текст в текстовом поле.

...