После отправки форм я делаю запрос AJAX, после успеха он "обновляет" <div>
с помощью функции .load()
. Проблема в том, что этот элемент также содержит формы, которые должны выполнять то же действие AJAX. Я мог привязать событие 'submit'
ко всем формам (в том числе и к загруженным). Но проблема в том, что с привязанным событием, после обновления элемента и отправки формы, ничего не происходит. Не обновленные формы работают нормально
JQuery:
function formHandler(form) { //Function, that is getting executed on form submit
var req_url = form.attr('action') ? form.attr('action') : window.location.href;
var req_method = form.attr('method') ? form.attr('method').toUpperCase() : 'GET';
var req_data = new FormData(form[0]);
req_data.append('token', getCookie('token'));
$.ajax({ //Doing AJAX request onto PHP script
type: req_method,
url: req_url,
data: req_data,
contentType: false,
processData: false,
cache: false,
success: function(msg) { //On success, getting response and parsing it
var parsed = JSON.parse(msg);
switch (parsed.error) {
case 0:
var element = ''; //Element that should be updated with .load()
if (req_data.get('coupon') != null ||
req_data.get('delcoup') != null ||
req_data.get('coupval') != null) {
element = '#changecpn';
} else if (req_data.get('sellfile') != null || req_data.get('newcname') != null ||
req_data.get('delitem') != null) {
element = '#changeitem';
} else if (req_data.get('news') != null ||
req_data.get('delnews') != null ||
req_data.get('newsval') != null) {
element = '#changenews';
} else {
element = '';
}
form[0].reset(); //Reset form fields
$(element).load(window.location.href + ' ' + element, function() { //Load the same element from the same page, but with up[dated content
$(this).children().unwrap(); //Remove duplicate ID
});
break;
case 1:
break;
}
}
});
}
$(document).ready(function() { //On page load
$(document).on('submit', 'form', function(e) { //Bind 'submit' event to all forms
e.preventDefault();
formHandler($(this)); //Execute form handler
});
});
Пример HTML Элемент:
<fieldset id="coupons">
<legend>Coupons</legend>
<br>
<h4 class="zusatz">Add</h4>
<form action="panelfuncs.php" method="post"> <!-- First form, that won't be updated -->
<table style="width: 100%;">
<tbody>
<tr>
<td style="text-align: center;"><label for="coupon">Coupon</label></td>
<td style="width: 40px;"><input type="text" name="coupon" id="coupon" placeholder="Coupon" maxlength="12" required=""></td>
<td><input type="button" name="gen" id="gen" value="Generate" onclick="randomStr(12)"></td>
</tr>
<tr>
<td style="text-align: center;"><label for="drop">Decrease %</label></td>
<td><input type="number" name="drop" id="drop" placeholder="Value" min="1" max="50" required=""></td>
</tr>
</tbody>
</table>
<br>
<table>
<tbody>
<tr>
<td><input type="submit" value="Add"></td>
<td><input type="reset" value="Reset"></td>
</tr>
</tbody>
</table>
</form>
После отправки этой формы, добавляется купон, и он должен быть показан в следующей таблице
<br>
<div id="changecpn"> <!-- DIV with tables, that gets updated by .load() -->
<h4 class="zusatz">Delete</h4>
<div class="table-wrapper">
<table style="width: 100%;" class="fl-table">
<thead>
<tr>
<th>Value</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr style="text-align: center;">
<td class="items">Coupon1</td>
<form action="panelfuncs.php" method="post"> <!-- Form, that has to work before and after refresh -->
<input type="hidden" name="delcoup" value="Coupon1">
<td><input type="submit" value="Delete"></td>
</form>
</tr>
</tbody>
</table>
</div>
</div>
</fieldset>
Я не знаю, в чем проблема, отладка с console.log () показала, что функция formHandler не вызывается после refre sh и отправка, хотя до refre sh работает нормально