CODEWITHSUNDEEP
javascriptjqueryasp-classic
Aymeric
Aymeric

Reputation: 15

How to not reload an ASP page when posting a jQuery form?

Please bear with me, I'm a total novice.

What am I trying to do? I'm trying to filter a list of courses from an input.

What is my environment? I'm working in a CMS coded in ASP and I don't have access to the server pages. I can only insert some code in "modules" in the page and upload files on a FTP. The pages are in XHTML 1.0 Transitional and I can't do anything about it.

My problem: This code works locally and on FIDDLE but when I insert it in the sandbox all it does is to reload the page.

Here's the HTML I insert

<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>

Here's the JS I upload

$(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);
        }
    });
});

Thanks a lot for your help.

Upvotes: 1

Views: 133

Answers (1)

mituw16
mituw16

Reputation: 5250

Change the script src to the following 

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

Upvotes: 2

Related Questions