使用JQuery阻止用戶在搜索框查詢或過濾器上進行提交時頁面刷新

Question

我在一點點的綁定。

另一個部門。在工作中要求我查看以下HTML代碼。他們要求我弄清楚爲什麼有人在搜索框中輸入數據並點擊提交頁面刷新。當點擊提交按鈕或選擇任何「過濾器」時，他們不希望頁面刷新。

我一直在查看代碼現在幾個小時，而我對JQuery知之甚少，不知道在哪裏尋找'頁面刷新'功能。

這裏是JS/jquery的片段：

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

使用e.preventDefault;所以：

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

另外，如果你打算使用返回false，將其放置在其他塊外..例如： -

$('#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;** 
} 

當然