Я использую следующий код для создания динамической формы внутри таблицы (Требуется использовать таблицы начальной загрузки для согласованного макета всего сайта).
$(document).ready(function() {
$('select.changeLanguage').change(function(){
$("#ValuesFromDB").empty();
$.ajax({
type: 'POST',
url: '/includes/admin/return.php',
data: {LanguageSelectedDropdown: $('select.changeLanguage').val()},
dataType: 'json',
success: function (data) {
$('#divid').show(); //Show the hidden div
$.each(data, function (index, item) {
var eachrow = ""
+ '<tr><td><label for=' + item[0] + '>' + item[0] + '</label></td>'
+ '<td id="autosubmit"><input type="text" class="form-control" id="' + item[1] + '" placeholder="' + item[1] + '" onkeyup="submit()"></td></tr>'
+ ''; // placeholder (item 88)
$('#ValuesFromDB').append(eachrow)
}); // END EACH ROW FUNCTION
} // END SUCCESS
}); // END AJAX
}); // END CHANGE FUNCTION
}); // END DOCUMENT READY
Основная концепция заключается в том, что у меня естьвыпадающий список для выбора языка.После выбора база данных запрашивается, и форма вместе с таблицей генерируется в ранее скрытый div (#divid).
Все это работает, и страница выглядит так, как будто она сгенерирована правильно.
Макет / table / form выглядит следующим образом:
<div class="container">
<div class="row">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Original</th>
<th>Translation</th>
</tr>
</thead>
<form id="languageset">
<tbody id="ValuesFromDB">
</tbody>
</form>
</table>
<button type="submit" id="submit" class="btn btn-default"><?php echo lang('Save Changes'); ?></button>
</div>
</div>
</div>
Однако я не вижу проблем с тем, как это настроено, когда я пытаюсь отправить форму с помощью;
$(function () {
$('#languageset').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '/includes/admin/return2.php',
data: $('#languageset').serialize(),
success: function () {
alert('form was submitted');
}
});
});
});
Ничего не происходит, кроме предупреждения.
Немного углубившись в это, сгенерированный исходный код показывает;
<div class="container">
<div class="row">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Original</th>
<th>Translation</th>
</tr>
</thead>
<form id="languageset"></form>
<tbody id="ValuesFromDB"><tr><td><label for="field1">Value1</label></td><td id="autosubmit"><input class="form-control" id="field1" placeholder="field1" onkeyup="submit()" data-cip-id="cIPJQ342845640" type="text"></td></tr>
<tr><td><label for="field2">Value2</label></td><td id="autosubmit"><input class="form-control" id="field2" placeholder="field2" onkeyup="submit()" data-cip-id="cIPJQ342845641" type="text"></td></tr></tbody>
</table>
<button type="submit" id="submit" class="btn btn-default">Save Changes</button>
</div>
</div>
</div>
Итак,вопрос ... Форма в сгенерированном исходном коде, кажется, открывается, а затем закрывается без каких-либо данных, которые я добавляю в успех AJAX. Почему?