3

我遇到了一个问题，我有一个 ajax 驱动的页面，当用户从一个简单的下拉列表中选择某些内容时会绘制该页面：

<select id = "selectdepartment">
    <option id = "default">Select an option...</option>
    ....
</select>

页面的其余部分是使用 jquery 绘制的.change()：

$('#selectdepartment').change(function(){

});

然后运行一些 ajax 到 php 脚本。一切正常，问题是当我提交一个用 ajax（使用$_SERVER['PHP_SELF'];）绘制的表单时，数据被提交，页面重新加载，页面被清除但选择框仍然留在原处。用户必须移动到不同的选项，然后回到最初选择的选项以重新触发.change(). 太糟糕了。

我可以通过在我的所有表单中传递一个 php 变量来解决这个问题，然后检查在每个页面加载时设置的变量以及是否绘制页面部分，但这会导致代码非常混乱，而且不太理想。

必须有一种方法可以使用 jquery 库来做到这一点，尽管我对 javascript 语言的一般知识并不是我想要的。如果有人有任何有用的提示，请分享，但不要为我做，我不会那样学习:)

编辑：带有 .trigger 的代码

$('#selectdepartment').change(function(){
var department = $('#selectdepartment').val();
var day = $('#data').data('day');
var month = $('#data').data('month');
var year = $('#data').data('year');
//alert (department);

if(department === "Select an option..."){
    $('.hiddenuntildepartmentisselected').css({"display":"none"});
}
else{
$('.hiddenuntildepartmentisselected').css({"display":"block"});
}

showpoints(department);
drawpointstable(department, day, month, year);
displaytheuseresforselecteddepartment(department, '');

$('#sendthedepartment').val(''+department+'');
$('#hiddendepartmentidforaddinganewpoint').val(''+department+'');

}).trigger('change');//end run functions
4

2 回答 2

7

您可以使用该.trigger()函数在页面加载后立即触发change事件处理程序：

$('#selectdepartment').change(function() {
    // code here
}).trigger('change');

或者，如果您需要通过 JavaScript/jQuery 在其他地方调用它：

$('#selectdepartment').trigger('change'); // or just .change() as a shorthand
于 2013-04-10T15:45:07.543 回答
2

更新

您的表单按钮可以使用该onClick属性，该属性将调用一种方法来解析表单字段并将数据通过.ajax().

然后在success事件方法中检查您需要的任何标志，并在需要时根据需要修改元素。

基本示例：

内部.ajax()：

...

url: 'xxx.xxx.xxx',
async: true,
type: 'POST',
dataType: 'html',
data: JSON.stringify( form_fields ),
beforeSend: function()
{
     // Pre send stuff, like starting a loading gif
},
success: function( data, textStatus, xhr )
{
    // Be sure you load the page with the content first
    $( '#containing-div' ).html( data );

    // Do  your check here, and modify your element if needed here
    if( flagtocheck === 'xxx' )
    {
        // Modify the element in question...
    }

    // I call a custom method termed `.ctrls()` here that makes any 
    // adjustments to the DOM once its loaded/updated.
},
error: function( xhr, textStatus, errorThrown )
{
}

当然，您需要根据flagtocheck自己的情况进行适当的设置。

希望有帮助！

关于编辑的注意事项 这篇文章被编辑得更具描述性和更容易理解。由于提出问题的人已经在使用该.ajax()方法，因此success事件方法是执行提出问题的人所要求的理想场所。与使用它来调用.trigger()或直接修改元素相比，直接修改元素的方法调用少 1.change()次。

于 2013-04-10T15:51:32.740 回答