Html формы, отправленной через ajax, jquery автоматически добавляет для нее endtag, поэтому теперь форма не работает
Я просматриваю базу данных и отправляю некоторую информацию о продуктах на страницу. поскольку в данных так много деталей, я написал html на стороне сервера и отправил его обратно с помощью вызова ajax. проблема только в том, что внутри таблицы есть форма. сервер отправляет его правильно, если я скажу $(#resultshere).text(data.htmlres) он не имеет права после моей формы, но в тот момент, когда я его изменяю $(#resultshere).html(data.htmlres), он добавляет сразу после моего открывающего тега формы. так что теперь ни один из входов не находится в форме, поэтому он не работает должным образом.
Я читал, что jquery.html сам проверяет и добавляет узлы, поэтому, если есть форма, мы должны вместо этого написать $(#resultshere)[0].innerHTML = data.htmlres. это не работает, оно все равно немедленно завершает форму. также кто-то сказал добавить pre до и после этой формы, но все равно не работает.
код, который я отправляю с php laravel
$htmlres .='
<thead>
<tr>
<th>row 1</th>
<th>row 2</th>
<th>row 3</th>
<th>row 4</th>
</tr>
</thead>
<tbody>';
//$htmlres .='</pre>';
$htmlres .='<form action = "'.route('details').'" method = "post" >';
$htmlres .= csrf_field();
//some other inputs and rows are here. but even when i delete them and it's as this simple it doesn't work
$htmlres .='</form>';
//$htmlres .='</pre>';
///HTML-СТРАНИЦА выглядит так
<div id = "resultshere">
<div id = "loading-img">
<img src = "spinner.gif">
</div>
</div>
////AJAX такой
$.ajax({
type: "GET",
url: '/getdetails/' + id
success: function (data) {
//$("#resultshere")[0].innerHTML = data.htmlres;
$("#resultshere").html(data.htmlres);
}
///HTML, который я получаю, пока jquery .html не будет
<form action = "http://127.0.0.1:8000/gotodetails" method = "post" ><input type = "hidden" name = "_token" value = "bvk28w2xooYNuZg2dTBTk1QYipbjGOjW9vviOigR"></form>
///НО КОГДА я вызываю .html, я получаю
<form action = "http://127.0.0.1:8000/gotodetails" method = "post"></form>
<input type = "hidden" name = "_token" value = "bvk28w2xooYNuZg2dTBTk1QYipbjGOjW9vviOigR">
так из-за этого ничего не работает. Я ожидаю, что тег формы будет в том месте, которое я поместил, а не просто автоматически завершится
Я думаю, что это просто наполняет вопрос ненужными вещами. потому что, как я уже сказал, даже когда я удаляю все, что между ними, и я просто хочу, чтобы эти 2 тега формы были в нужном месте, они не будут
Вы поняли, что помещаете форму непосредственно в <tbody>? Это может не иметь никакого отношения к вашей проблеме, но это, безусловно, недопустимый HTML.
Кроме того, вы сами завершаете форму в последней строке вашего php-файла.
@DovRine Да, я знал о том, что это было в tbody, но я не знал, что это недопустимый HTML. Спасибо. так что вы думаете, если я начну тег формы перед таблицей и закончу после него, это сработает?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вот надуманный рабочий пример, основанный на том, что вы предоставили. Я протестировал его с помощью сервера php dev.
index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title>Document</title>
<script src = "https://code.jquery.com/jquery-3.4.1.min.js"
integrity = "sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo = "
crossorigin = "anonymous"></script>
<script>
$(function(){
$.ajax({
type: "GET",
url: 'getdetails.php',
success: function (data) {
$("#resultshere").html(data);
}
})
});
</script>
</head>
<body>
<div id = "resultshere">
<div id = "loading-img">
<img src = "spinner.gif" alt = "Loading...">
</div>
</div>
</body>
</html>
getdetails.php
<?php
// mock testing functions
function route($route_name){
return 'http://127.0.0.1:8000/gotodetails';
}
function csrf_field(){
return '<input type = "hidden" name = "_token" value = "bvk28w2xooYNuZg2dTBTk1QYipbjGOjW9vviOigR">';
}
// end mock testing functions
$action = route('details');
$csrf = csrf_field();
$htmlres = <<<HTML
<table>
<thead>
<tr>
<th>row 1</th>
<th>row 2</th>
<th>row 3</th>
<th>row 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<form action = "{$action}" method = "post" >
{$csrf}
</form>
</td>
</tr>
</tbody>
</table>
HTML;
echo $htmlres;
Это генерирует следующий окончательный документ после загрузки:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title>Document</title>
<script src = "https://code.jquery.com/jquery-3.4.1.min.js"
integrity = "sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo = "
crossorigin = "anonymous"></script>
<script>
$(function(){
$.ajax({
type: "GET",
url: 'getdetails.php',
success: function (data) {
console.info(data);
$("#resultshere").html(data);
}
})
});
</script>
</head>
<body>
<div id = "resultshere">
<table>
<thead>
<tr>
<th>row 1</th>
<th>row 2</th>
<th>row 3</th>
<th>row 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<form action = "http://127.0.0.1:8000/gotodetails" method = "post">
<input type = "hidden" name = "_token" value = "bvk28w2xooYNuZg2dTBTk1QYipbjGOjW9vviOigR">
</form>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Пожалуйста. Кстати, поскольку вы используете laravel, вы должны возвращать только данные и использовать свой язык шаблонов (blaze?) для создания таблицы.
Я хотел это сделать, но таблица настолько сложна и имеет так много строк, что только я мог бы знать (даже я не знаю полностью), что произошло, и если позже какой-то другой разработчик захочет обновить этот код, это будет для них адом. :)
Возможно, было бы полезно показать код в вашем комментарии "//здесь есть некоторые другие входные данные и строки. но даже когда я их удаляю, и это так просто, это не работает". Вероятно, проблема именно в этом.