Блог

Главная - Вопросы по программированию - Предотвращение обновления Jquery QueryBuilder после вызова getRules

Предотвращение обновления Jquery QueryBuilder после вызова getRules

#javascript #jquery #html #jsp

#javascript #jquery #HTML #jsp

Вопрос:

Я использую Jquery Query Builder внутри HTML-формы 

 <script type="text/javascript">
    ......
    ......   
    var filter_json2 = <%=jsonArray%>;
    console.log(<%=jsonArray.toString()%>);

    $(document).ready(function(){
        $('#rule_div').queryBuilder({
            plugins:['bt-tooltip-errors'],
            filters:filter_json2
        });

        $('#btn_reset').on('click', function () {
            $('#rule_div').queryBuilder('reset');
        });

        $('#btn_set').on('click', function () {
            $('#rule_div').queryBuilder('setRules', rules_basic);
        });

        $('#btn_get').on('click', function () {
            var result = $('#rule_div').queryBuilder('getRules');
            if (!$.isEmptyObject(result)) {
                //alert(JSON.stringify(result, null, 2));
                $("#jsonRule").val(JSON.stringify(result, null, 2));
                console.log(result);
            }
        });

    });

    ......
    ......
</script>


    ......
    ......
    ......
    ......

<form action="/jspfile.do" method="post">
    ......
    ......
    other fields in form
    ......
    ......

<tr>
    <td></td>
    <td>
        <div id="rule_div">
            <button class="btn_set" id="btn_set">Set Rules</button>
            <button class="btn_get" id="btn_get">Get Rules</button>
            <button class="btn_reset" id="btn_reset">Reset</button>
        </div>
        <input type="hidden" id="jsonRule" name="jsonRule" value="">
    </td>
</tr>


</form>

когда я выбираю что-то из конструктора запросов и нажимаю кнопку «Получить правила», я получаю правила json, но страница обновляется, и все, что я выбрал, стирается..

Это не относится к демо, которое я имею в виду [https://querybuilder.js.org/demo.html ]

Может кто-нибудь, пожалуйста, подсказать мне, как я могу предотвратить удаление выбранных данных из query builder после обновления?

Комментарии:

1. используйте preventDefault

2. @Vishwa , уже пробовал это, использование preventDefault также заблокирует вызов getRules

3. как вы это пробовали?

4. $('#btn_get').on('click', function (event) { result = $('#rule_div').queryBuilder('getRules'); if (!$.isEmptyObject(result)) { $("#jsonRule").val(JSON.stringify(result, null, 2)); event.preventDefault(); } });

5. попробуйте использовать его следующим образом, $(‘#btn_get’).on(‘click’, функция (событие) { результат = $(‘#rule_div’). QueryBuilder(‘getRules’); event.preventDefault(); if (!$.isEmptyObject(результат)) { оповещение(JSON.stringify(результат, null, 2)); $(«#jsonRule»).val(); $(«#jsonRule»).val(JSON.stringify(результат, null, 2)); } });

Ответ №1:

Вы находитесь в форме, и любая нетипизированная кнопка в форме является кнопкой отправки.

если вы добавите type="button" к своим кнопкам, это должно помешать им отправлять вашу форму.

Другим решением действительно является всегда вызывать preventDefault

    $('#btn_get').on('click', function (e) {
        e.preventDefault();
        // custom action here
    });