Ajax не отображает вложенный в div table
Есть простая форма для поиска наименования в БД. Нажимаю кнопку - и если все гут - то должна отображаться таблица. И это все на одной странице. Для этого использую ajax. Проблема в том что successAlert - отображается, а вложенный table - нет
$(document).ready(function() {
$('form').on('submit', function(event) {
$.ajax({
data : {
name : $('#nameInput').val()
},
type : 'POST',
url : '/process'
})
.done(function(data) {
if (data.error) {
$('#errorAlert').text(data.error).show();
$('#successAlert').hide();
}
else {
$('#successAlert').show();
$('#axixa').show();
$('#errorAlert').hide();
}
});
event.preventDefault();
});
});
form.html
<div class="container">
<br><br><br><br>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="nameInput">Name</label>
<input type="text" class="form-control" id="nameInput" placeholder="Маркировка">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<br>
<div id="successAlert" class="alert alert-success" role="alert" style="display:none;">
<table class="table table-responsive" id="axixa">
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>option</th>
<tr>
</thead>
<tbody>
<!-- {% for da in data %}
<tr>
<td>{{ da[0] }}</td>
<td>{{ da[1] }}</td>
<td>{{ da[2] }}</td>
</tr>
{% endfor %} -->
</tbody>
</table>
</div>
<div id="errorAlert" class="alert alert-danger" role="alert" style="display:none;"></div>
</div>
А вот и код
@app.route('/process', methods=['POST'])
def process():
name = request.form['name']
if name:
newName = name[::-1]
return jsonify({'name' : newName})
return jsonify({'error' : 'Missing data!'})