使用多行但保留元素id时重新加载Div
我在数据库中有一组记录，并按行列出它们。每一行都必须是唯一的元素id，所以我实现了这一点，如下所示，这是在主循环中。
#right<?php echo $row['Id']; ?> {
display: inline-block;
width:250px;
float:left;
text-align: left;
height:auto;
font-family:Arial;
font-size: 12px;
text-decoration: none;
}因此，每个记录都有自己的css，如上所述。
我在每一行上都有一个submit form按钮，它也使用唯一的<?php echo $row['Id']; ?>，所以每个表单也有自己的名称。
我提交表单并使用ajax重新加载当前的div，这样它就会随着行状态的变化而改变颜色。
我的问题是，一旦我提交了这个表单一次，它将不再提交第二次，除非加载整个页面，我假设这是与元素id有关？
下面是ajax
<script>
$(document).ready(function() {
$("#submit<?php echo $row['Id']; ?>").submit(function() {
var frm = $('#submit<?php echo $row['Id']; ?>');
$.ajax({
type: frm.attr('method'),
url: 'Update.php',
data: frm.serialize(),
success: function (data) {
$('#right<?php echo $row['Id']?>').load(' #right<?php echo $row['Id']?> ',function(){
$("#image<?php echo $row['Id']; ?>").show(); }
) ;
}, error: function(jqXHR, textStatus, errorThrown){
console.log(" The following error occured: "+ textStatus, errorThrown );
} });
return false;
});
});
</script>当我第一次提交div重新加载时，这似乎是完全正常的，当你第二次点击它时，它就像预期的那样。
我做这件事的方式完全错了吗？
我知道我可以在重新加载的div之外执行提交按钮，然后它继续工作，但希望重新加载整个div，这样我就可以将按钮更改为其他选项，等等。
任何帮助都将不胜感激。
这是html/php
<div id="right<?php echo $row['Id']; ?>">
<form id="submit<?php echo $row['Id']; ?>" method="post" autocomplete="off">
<input type="hidden" value="<?php echo $row['Id']?>" name="id">
<input class="input-2" type="text" name="returnid" value="<?php echo $row['returnID']; ?>">
<input type="submit" name="submit-form" class="buttonSubmitHide" />
</form>
</div>回答 2
Stack Overflow用户
发布于 2020-05-21 02:43:56
您编写的代码不会在处理后隐藏#loading元素。
我需要看到你的html代码在第一，如果它是可能的，如果它是不可能的，所以你需要隐藏你的#loading元素，当你的过程完成后，你将能够再次显示它。
当加载没有隐藏并且只是显示的时候，你的代码是如何在第一时间工作的呢？
如果它将在加载后被删除，那么您也需要加载#loading元素。
Stack Overflow用户
发布于 2020-05-21 04:02:48
在每一行上放置一个类，并删除id。利用这种能力，可以获取与某个类匹配的所有元素，并将事件连接到与该类匹配的每个元素。然后在函数中使用$(this).parent()来获取行，并从那里导航到子对象。
这只是一种改进代码的策略，而不是一个具体的答案，但是如果你遵循这个策略，可能会更容易推断出你的错误在哪里。
$(document).ready(function() {
$(".js-action").submit(function() {
var row = $(this).parent('.row');
$.ajax({
type: $(this).attr('method'),
url: 'Update.php',
data: $(this).serialize(),
success: function (data) {
row.find('.response-image').show();
},
error: function(jqXHR, textStatus, errorThrown){
console.log("The following error occured: "+textStatus,errorThrown);
}
});
});<!-- this gets repeated a bunch of times. No need for ids -->
<div class="row">
<form class="response" method="post" autocomplete="off">
<input type="hidden" value="<?php echo $row['Id']?>" name="id">
<input class="input-2" type="text" name="returnid" value="<?php echo $row['returnID']; ?>">
<input type="submit" name="submit-form" class="buttonSubmitHide" />
</form>
</div>
https://stackoverflow.com/questions/61920394
复制相似问题
腾讯云开发者
