Использование JQuery для предотвращения обновления страницы, когда пользователь нажимает кнопку отправить запрос или фильтр в окне поиска - PullRequest
Новая
       16

Использование JQuery для предотвращения обновления страницы, когда пользователь нажимает кнопку отправить запрос или фильтр в окне поиска

0 голосов
/ 27 марта 2012

Я немного в затруднении.

Еще один отдел. на работе попросил меня просмотреть следующий 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();
});

}

1 Ответ

3 голосов
/ 27 марта 2012

использовать 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;
        }

также, если вы собираетесь использовать return false, поместите его вне блока else .. например ::

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