Динамически дублированные формы исчезают при перезагрузке CodeIgniter

У меня есть следующий код, который нужно продублировать:

<form method="post">
<div id="field-row-container">
    <div id="field-row-1" class="field-row">
        <div class="field-element">
            <label for="Name[1]">Name</label>
            <input type="text" id="Name[1]" name="Name[]" />
        </div>
        <div class="field-element">
            <label for="Email[1]">Email</label>
            <input type="text" id="Email[1]" name="Email[]" />
        </div>
        <hr/>
    </div>
</div>
<div class="form-element">
    <input type="button" class="confirm add-field-row" value="Add" />
    <input type="button" class="danger delete-field-row" value="Delete" />
    <input type="submit" />
</div>

The duplicated / dynamically added elements will have the same names of Name[] and Email[] but their ID's will be incremented.

Приведенный ниже код JavaScript основан на скрипте дублирования формы Джозайи Рудделла.

var template = $('#field-row-container #field-row-1').clone();
window.addForm = function () {
        var parent = $(this).closest('.dynamic-rows').attr('id');
    var fieldRowCount = countRows(parent) + 1;
    var newFieldRow = template.clone().find(':input').each(function () {
        var newId = this.id.substring(0, this.id.length - 3) + "[" + fieldRowCount + "]";

        $(this).prev().attr('for', newId); // update label for
        this.id = newId; // update id and name (assume the same)
        $(this).closest('.field-row').addClass('new-row');
    }).end()
        .attr('id', 'field-row-' + fieldRowCount)
        .appendTo('#field-row-container');
}
$('.add-field-row').click(addForm);

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

Как обойти эту проблему? Я в недоумении, как это решить...

Другие заметки, которые могут помочь:

  1. Это компонентная форма, состоящая из нескольких частей, с одним контроллером формы.
  2. У меня есть несколько экземпляров этого - адреса, степени образования и тому подобное.
  3. Я использую библиотеку CodeIgniter form_validation для проверки на стороне сервера каждого массива сообщений.

javascript jquery codeigniter dynamicform
person Community    schedule 10.02.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Я бы выполнил запрос POST, который отправляет форму через ajax, чтобы вы могли обрабатывать ответ, не покидая страницу. Что-то вроде этого:

$.post('/locationOfController.php', $('#yourForm').serialize(), function(response){
  if(response.valid){
    window.location.href = '/somewhereAfterFormPosted.php';
  } else {
    $('#yourForm').append("<p>"+response.error+"</p>");
  }
}, 'json');

и измените контроллер, чтобы он возвращал объект JSON в зависимости от того, прошла ли проверка или нет. Чтобы соответствовать моему примеру выше, вы должны вернуть что-то вроде ниже, когда возникает ошибка:

{valid: false, error: 'Please fill out the whole form'}

Попробуйте что-то подобное в качестве основного примера. Вы можете сделать гораздо больше, например, вернуть несколько ошибок, если несколько полей недействительны.

person james246    schedule 10.02.2013
comment
Спасибо за поучительный ответ. сейчас попробую! - person ; 10.02.2013
comment
Знаете ли вы солидную статью, посвященную этой теме? - person ; 11.02.2013
comment
Я не использую CodeIgniter, поэтому могу предложить только то, что выдает поиск в Google, но это может быть полезно: darrenonthe.net/2011/05/10/ -- похоже, он показывает вам, как возвращать ошибки формы в виде массива, который вы можете вернуть как JSON. В вашей функции успеха ajax вы можете затем прокручивать массив и добавлять каждую ошибку после соответствующего поля ввода, если вы установили соглашение об именах, чтобы позволить вам сопоставлять каждую ошибку с ее полем. - person james246; 11.02.2013
comment
Спасибо большое за наводку. Я работаю над этим сейчас. - person ; 12.02.2013