如何在加载时运行此表单.change()?

时间:2010-11-30 05:47:17

标签: javascript jquery

我创建了一个脚本,它根据过滤器(用户在表单中选择的内容)动态更新查询,并使用更新的数据加载外部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';

?>

编辑:函数结束时触发器工作,但是对于第一次加载,当用户在加载页面时更新表单时,我会得到不一致的更改。该表单应该充当内容过滤器,并且外部文件被假定为充当由表单过滤的内容结果。

1 个答案:

答案 0 :(得分:2)

抽象改变函数应该可以解决问题。

getData();
$('el').change(getData);

function getData(){ 
  //.change function here 
}

event trigger应该有用。

$('el').trigger('change');

.trigger()

上的jquery文档
  

描述:执行附加到给定事件类型的匹配元素的所有处理程序和行为。