Блог

Главная - Вопросы по программированию - проверка начальной загрузки в загруженном содержимом ajax

проверка начальной загрузки в загруженном содержимом ajax

#ajax #twitter-bootstrap #jqbootstrapvalidation

#ajax #twitter-bootstrap #проверка jqbootstrapvalidation

Вопрос:

Я буду использовать bootstrapvalidator, поскольку я использую bootstrap. Это работает нормально, но у меня есть некоторое содержимое, которое я загружу через ajax. Когда это содержимое содержит формы, bootstrapvalidator не будет работать. Я создаю небольшой пример для демонстрации.

Он основан на formWithoutLabels.html пример загрузки bootstrapvalidator.

Я копирую formWithoutLabels2.html для formWithoutLabels2.html и замените содержимое формы на

 <div id="result">
</div>

В корзину javascript я добавляю запрос ajax

 $( "#result" ).load( "content.html" );

formWithoutLabels2.html:

 <!DOCTYPE html>
<html>
<head>
<title>BootstrapValidator demo</title>

<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>

<script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
</head>
<body>
<div id="result">
</div>

<script type="text/javascript">
$( "#result" ).load( "content.html" );


$(document).ready(function() {
$('#defaultForm').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        username: {
            message: 'The username is not valid',
            validators: {
                notEmpty: {
                    message: 'The username is required and can't be empty'
                },
                stringLength: {
                    min: 6,
                    max: 30,
                    message: 'The username must be more than 6 and less than 30 characters long'
                },
                regexp: {
                    regexp: /^[a-zA-Z0-9_.] $/,
                    message: 'The username can only consist of alphabetical, number, dot and underscore'
                }
            }
        },
        email: {
            validators: {
                notEmpty: {
                    message: 'The email address is required and can't be empty'
                },
                emailAddress: {
                    message: 'The input is not a valid email address'
                }
            }
        },
        password: {
            validators: {
                notEmpty: {
                    message: 'The password is required and can't be empty'
                },
                identical: {
                    field: 'confirmPassword',
                    message: 'The password and its confirm are not the same'
                }
            }
        },
        confirmPassword: {
            validators: {
                notEmpty: {
                    message: 'The confirm password is required and can't be empty'
                },
                identical: {
                    field: 'password',
                    message: 'The password and its confirm are not the same'
                }
            }
        }
    }
});
});
</script>
</body>
</html>
</pre>

content.html:

 <div class="container" style="margin-top: 50px;">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Sign up</h3>
                </div>

                <div class="panel-body">
                    <form id="defaultForm" method="post">
                        <div class="form-group">
                            <input type="text" class="form-control" name="username" placeholder="Username" />
                        </div>

                        <div class="form-group">
                            <input type="text" class="form-control" name="email" placeholder="Email" />
                        </div>

                        <div class="form-group">
                            <input type="password" class="form-control" name="password" placeholder="Password" />
                        </div>

                        <div class="form-group">
                            <input type="password" class="form-control" name="confirmPassword" placeholder="Retype password" />
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">Sign up</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

В этом примере bootstrapvalidator не работает. Что мне нужно сделать, чтобы это сработало в рамках ajax-запроса?

Есть идеи?

Ответ №1:

Когда вы загружаете содержимое с помощью запроса AJAX, существует промежуток времени, который вам нужно подождать, прежде чем это содержимое появится в DOM. Вы можете зафиксировать событие, когда это содержимое полностью загружено, назначив функцию обратного вызова:

 $("#result").load("content.html", function() {
    // attach validation to the form here
    $("#defaultForm").bootstrapValidator({
         // ...
    });
});

Таким образом, функция bootstrapValidator будет назначена после загрузки содержимого, а не до.

Смотрите документацию для загрузки здесь: http://api.jquery.com/load