Question

我使用下拉菜单，用户可以在其中选择特定主题。如果通过下拉列表选择主题，则会通过ajax弹出一个文本框，用户可以输入内容。

问题是如果表单已经提交并且表单中的内容丢失或者用户只是刷新页面，则ajax内容（文本框）会消失，并且只有在选择了另一个主题时才会再次显示。

这可能源于我的ajax脚本，该脚本使用change，因此只在再次更改下拉列表时将ajax-input放入div：

$(function() {
$('#subjectapp1').change(function()
{
var self = $(this);

$.post("/blabla/potatoe/subjectpartial1.php",
{
subject1: self.val()
},
function(data)
{
    $('#subjectqualidiv1').html(data);
});

});
});

我的下拉菜单：

<select name="subject1" id="subjectapp1">
<option value="">Please choose</option>
<?php foreach ($subjects as $subject){ ?>
  <option <?php if ($_POST['subject1'] == $fach['subject_id']) {echo 'selected';} ?> value="<?php echo $subject['subject_id']; ?>"><?php echo $subject['subject']; ?></option>

加载的div：

<div id="subjectqualidiv1"></div>

ajax内容（subjectpartial1.php）只包含一个文本框，用户可以在其中输入他的资格。

当页面刷新时，是否有可能会自动将ajax内容加载到div中，而无需再次更改主题？

编辑（工作）：根据我尝试以下注释，产生了预期的结果：

$(document).ready(function () {
// For loading the ajax content on refresh/form submit
    var subject1 = $('#subjectapp1');

$.post("/blabla/potatoe/subjectpartial1.php",
{
subject1: subject1.val()
},
function(data)
{
    $('#subjectqualidiv1').html(data);
}); 

$('#subjectapp1').change(function()
{
var self = $(this);

$.post("/blabla/potatoe/subjectpartial1.php",
{
subject1: self.val()
},
function(data)
{
    $('#subjectqualidiv1').html(data);
});

});
});

谢谢！

Answer 1

您可以将调用AJAX的函数添加到在页面加载时执行的$(document).ready()函数。在执行函数之前，请务必检查有效数据，因为可能存在页面加载且选择器为空的情况。对于缺少的信息，您可能希望查看HTML中的required属性，如果该元素不存在数据，则会阻止表单提交。这将阻止刷新数据不足。

Answer 2

您可以使用当前代码执行此操作：

$(document).ready(function () {
 $("#subjectapp1").trigger('change');
}

在页面刷新后从on.Change函数重新加载Ajax内容

2 个答案: