我创建了一个脚本,它根据过滤器(用户在表单中选择的内容)动态更新查询,并使用更新的数据加载外部php文件,但是我希望在加载页面时加载更改函数。 / p>
当用户更改任何输入并加载外部结果时,查询会成功更新。但是,我希望在加载页面时加载结果,而不是等待用户输入。
我设法通过存储Cookie来使表单更新用户选择的内容,但仍然不确定如何在访问页面时加载它。我试图在$(“。QueryElement”)的末尾添加.trigger('change')。更改(function()但是我得到的结果不一致,它不起作用。
这是我的代码:
<script type="text/javascript">
$(function() {
/*
* Retrieve cookies in form
*/
$("#showposts").val($.cookie('deluxe-' + 'numposts'));
$(".tags, .categories, #show-all-tags, #show-all-cats").each(function() {
if ($.cookie('deluxe-' + $(this).attr('id')) == 'checked') {
$(this).attr('checked', true);
}
if ($.cookie('deluxe-' + $(this).attr('id')) == 'unchecked') {
$(this).attr('checked', false);
}
});
/*
* This function is to add filters
*/
$(".QueryElement").change(function() {
var query = '';
$.cookie('deluxe-form-state', 'activated', { path: '/', expires: 100 });
query += "showposts=" + $("#showposts").val();
$.cookie('deluxe-' + 'numposts', $("#showposts").val(), { path: '/', expires: 100 });
function add_filters(showall, maincls, type) {
if ($(showall).is(":checked") == false) {
$.cookie('deluxe-' + $(showall).attr('id'), 'unchecked', { path: '/', expires: 100 });
var val = [];
$(maincls + ':checked').each(function(i){
val[i] = $(this).attr('id');
$.cookie('deluxe-' + $(this).attr('id'), 'checked', { path: '/', expires: 100 });
});
$(maincls + ':not(:checked)').each(function(i){
$.cookie('deluxe-' + $(this).attr('id'), 'unchecked', { path: '/', expires: 100 });
});
query += "&" + type + "=" + val;
} else {
$.cookie('deluxe-' + $(showall).attr('id'), 'checked', { path: '/', expires: 100 });
$(maincls + ':checked').each(function(i){
$.cookie('deluxe-' + $(this).attr('id'), 'checked', { path: '/', expires: 100 });
});
$(maincls + ':not(:checked)').each(function(i){
$.cookie('deluxe-' + $(this).attr('id'), 'unchecked', { path: '/', expires: 100 });
});
query += "&" + type + "=";
}
}
add_filters('.show-all-cats', '.categories', 'cat');
add_filters('.show-all-tags', '.tags', 'tag');
$("#result").load('<?php bloginfo('template_directory'); ?>/GetResults.php?' + query);
});
});
</script>
如果您需要,这是我的查询表。
<?php
########################################
# showposts=
########################################
echo '<select id="showposts" class="QueryElement">';
for ($i = 5; $i <= 50; $i += 5) {
echo '<option value="'.$i.'">'.$i.'</option>';
}
echo '</select>';
########################################
# cat=
########################################
$categories = get_categories();
foreach($categories as $cat) {
echo '<input type="checkbox" name="'.$cat->cat_ID.'" id="'.$cat->cat_ID.'" class="categories QueryElement" /> '.$cat->cat_name;
}
echo '<input type="checkbox" name="show-all-cats" id="show-all-cats" class="QueryElement show-all-cats" checked="checked"> Include all categories';
########################################
# tag=
########################################
$tags = get_tags();
foreach($tags as $tag) {
echo '<input type="checkbox" name="'.$tag->slug.'" id="'.$tag->slug.'" class="tags QueryElement" /> '.$tag->name;
}
echo '<input type="checkbox" name="show-all-tags" id="show-all-tags" class="QueryElement show-all-tags" checked="checked"> Include all tags';
?>
编辑:函数结束时触发器工作,但是对于第一次加载,当用户在加载页面时更新表单时,我会得到不一致的更改。该表单应该充当内容过滤器,并且外部文件被假定为充当由表单过滤的内容结果。
答案 0 :(得分:2)
抽象改变函数应该可以解决问题。
getData();
$('el').change(getData);
function getData(){
//.change function here
}
event trigger应该有用。
$('el').trigger('change');
.trigger()
上的jquery文档描述:执行附加到给定事件类型的匹配元素的所有处理程序和行为。