JQuery Mit Aktualisierung der Seite zu verhindern, wenn Benutzer klickt auf ein Suchfeld Anfrage einreichen oder Filter

Question

ich in ein bisschen einer Bindung bin.

Eine andere Abteilung. bei der Arbeit hat mich gebeten, über den folgenden HTML-Code zu schauen. Sie bitten mich herauszufinden, warum, wenn jemand Daten in das Suchfeld eingibt und Klicks die Seite aktualisiert. Sie möchten nicht, dass die Seite aktualisiert wird, wenn Sie entweder auf die Schaltfläche zum Senden klicken oder einen der Filter auswählen.

Ich habe den Code suchen über jetzt für ein paar Stunden und ich bin nicht gut genug, um mit JQuery versiert zu wissen, wo die ‚Seite aktualisieren‘ -Funktionalität zu suchen.

Hier sind die js/jquery Schnipsel:

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

Verwendung 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; 
     } 

auch, wenn Sie falsch verwenden werden zurückkehren, legen Sie sie außerhalb des else-Block .. z.B .:

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