发布jQuery表单时如何不重新加载ASP页面?

时间:2014-01-10 17:47:32

标签: javascript jquery asp-classic

请耐心等待,我是新手。

我想做什么? 我正在尝试从输入中过滤一系列课程。

我的环境是什么? 我在使用ASP编码的CMS中工作,但我无法访问服务器页面。 我只能在页面的“模块”中插入一些代码,并在FTP上传文件。 这些页面是XHTML 1.0 Transitional,我对此无能为力。

我的问题: 此代码在本地和FIDDLE上运行,但是当我将其插入沙箱时,它只是重新加载页面。

这是我插入的HTML

<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/searchCatalog.js"></script>
<link rel="stylesheet" type="text/css" href="css/searchCatalog.css">
<form id="live-search" action="" class="styled" method="post">
<input type="text" class="search-field" id="filter" placeholder="What course are you looking for?" value="" />
<span id="filter-count"></span>
</form>
<ul class="courselist">
<li><a href="http://stackoverflow.com" target="_blank">English course 1</a></li>
<li><a href="http://stackoverflow.com" target="_blank">English course 2</a></li>
<li><a href="http://stackoverflow.com" target="_blank">Spanish course 1</a></li>
<li><a href="http://stackoverflow.com" target="_blank">Spanish course 2</a></li>
</ul>

这是我上传的JS

$(document).ready(function () {
    $('#filter').keypress(function (e) {
        if (e.which == 13) {
            // Hide the number of courses when nothing is entered in the search field
            if ($(this).val() == '') {
                $('#filter-count').hide();
            } else {
                $('#filter-count').show();
            }
            // Retrieve the input field text and reset the count to zero
            var filter = $(this).val(), count = 0;

            // Loop through the course list
            $(".courselist li").each(function () {

                // If the list item does not contain the text phrase fade it out
                if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                    $(this).fadeOut();

                    // Show the list item if the phrase matches and increase the count by 1
                } else {
                    $(this).show();
                    count++;
                }
            });
            e.preventDefault();
            // Update the count
            var numberItems = count;
            $("#filter-count").text("Number of courses related to your search : " + count);
        }
    });
});

非常感谢你的帮助。

1 个答案:

答案 0 :(得分:2)

将脚本src更改为以下

<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//malsup.github.io/jquery.blockUI.js"></script>