Question

I am in a little bit of a bind.

Another dept. at work asked me to look over the following HTML code. They are asking me to figure out why when someone enters data in the search box form and clicks submit the page refreshes. They do NOT want the page to refresh when either clicking the submit button or when selecting any of the ‘filters’.

I have been looking over the code now for a few hours and I am not well versed enough with JQuery to know where to look for the ‘Page Refresh’ functionality.

Here are the js/jquery snippets:

$(document).ready(function() {
    $('#searchform').submit(function() {
        var valid = $('#searchbox').val();
        if(valid != '' && valid != 'Enter your keywords here'){
            $(':input[value=""]').attr('disabled', true);
        }else{
            alert('You must enter at least one keyword.');
            return false;
        }

    });   

$( '#app-prefilter input[type=radio]').each(function() {   
     if ( $(this).val() == $("#prefilter" ).val() ) {
        $(this).attr("checked", true);
     }
});               

// If user clicks on an option, set prefilter field, and submit form
$("#app-prefilter").click(function() {
    var allVals = [];
    $( '#app-prefilter :checked').each(function() {
       allVals.push($(this).val());
    });
    $( '#prefilter').val(allVals);   
    $( "#" + 'searchform').submit();        
});     


function checkFilterBoxes() {
$("#searchform input").each(function() {    
    $(this).each( function() {
        filters = $(this).val().split(',');
        name = $(this).attr('name');
        $.each( filters, function(index, value) {
            $('#all-' + name  + ' ' + 'input[type=checkbox]').each(function(){  
                //alert($(this).val() + ":" + value + ":" + $(this).attr('checked'));
                if ( $(this).val() == value && $(this).attr('checked') != 'checked') {
                    //alert("set " + $(this).val() + " to checked");
                    $(this).attr("checked", true);
                    $(this).parent().css('display', 'block');
                    $(this).closest("div").css('display', 'block');
                    $(this).parents(".group").find('a').removeClass("open");
                }else if($(this).attr('checked') == 'checked'){

                }else{
                    //alert("hide " + $(this).val());
                    $(this).parent().css('display', 'none');
                }
            });               
        });
    });
});

}

function buildFilter(){

var url = window.location.protocol + "//" + window.location.hostname + ":8080";
$.getJSON(url + "/alfresco/s/slingshot/category/assetCategories?callback=?&format=json", function(data){
    var filterHtml = "";
    $.each(data.categories, function(i, category){
        filterHtml += '<div id="div-check-' + category.title + '">';
        filterHtml += '<li class="group">';
        filterHtml += '<input id="' + category.title + '" name="' + category.title + '" type="checkbox" value="' + category.title + '" onclick="jqCheckAll(this.id, ' + "'all-"  + category.title + "'" + '); refineSearch();"/>';
        filterHtml += '<label id="' + category.title + '-label" for="' + category.title + '" class="filter-label">';
        filterHtml += '<span id="selectall-all-' + category.title + '">(select all)</span>';
        filterHtml += '<span id="clearall-all-' + category.title + '">(clear all)</span>';
        filterHtml += '</label>';
        filterHtml += '<h3 class="expand">' + category.label + '</h3>';
        filterHtml += '<div class="collapse">';
        filterHtml += '<ul id="all-' + category.title + '">';

        $.each(category.subcategory, function(j, sbcat){
            filterHtml += '<li>';
            filterHtml += '<input id="'  + sbcat.title + '" name="' + sbcat.title + '" type="checkbox" value="' + sbcat.title + '" onclick="jqCheckCheck(this.id, ' + "'" + category.title + "'" + ', ' + "'" + 'all-' + category.title + "'" + '); refineSearch();"/>';
            filterHtml += '<label for="' + sbcat.title + '">' + sbcat.label + '</label>';
            filterHtml += '</li>';
        });
        filterHtml += '</ul>';
        filterHtml += '</li></div>';
    });
    $("#refine-types > ul").append(filterHtml);
    $("h3.expand").toggler({speed: "fast"});
    checkFilterBoxes();
});

}

Answer 1

use e.preventDefault; so:

 $('#searchform').submit(function(**e**) {
        **e.preventDefault;**
        var valid = $('#searchbox').val();
        if(valid != '' && valid != 'Enter your keywords here'){
            $(':input[value=""]').attr('disabled', true);
        }else{
            alert('You must enter at least one keyword.');
            return false;
        }

also, if you are going to use return false, place it outside the else block.. e.g.:

$('#searchform').submit(function(**e**) {
        **e.preventDefault;**
        var valid = $('#searchbox').val();
        if(valid != '' && valid != 'Enter your keywords here'){
            $(':input[value=""]').attr('disabled', true);
        }else{
            alert('You must enter at least one keyword.');
             **// instead of here**
        }
            **return false;**
}