Правила инициализации jquery-queryBuilder с последним отправленным поиском - PullRequest
Новая
       15

Правила инициализации jquery-queryBuilder с последним отправленным поиском

1 голос
/ 30 сентября 2019

У меня есть форма со встроенным плагином querybuilder.js.org

Мой js:

ОТ: scripts.js

$(document).ready(function(e) {

 // INIT PLUGIN

 $('#queryBuilder').queryBuilder({
   plugins: ['bt-tooltip-errors'],
   filters: [{
     id: 'description',
     label: 'Description',
     type: 'string'
   }]
 });

 // RESTORE RULES FROM LAST SEARCH

 $('#queryBuilder').queryBuilder('setRules', decodeURIComponent($("#rules").val()) );

 // ON SUBMIT, EDIT THE FORM AND APPEND SQL, PARAMS to USE IN SEARCH FROM DATABASE, AND APPEND RULES TO RESTORE IT TO NEXT LOAD OF THE PAGE

 $("#btn-submit").on("click", function(e) {

    e.preventDefault(); 
    var form = $("#form");  
    var rules = $('#queryBuilder').queryBuilder('getRules');
    var query = $('#queryBuilder').queryBuilder('getSQL', 'question_mark');

    // FOR RESTORE INITIAL VALUES ON RELOAD PAGE            
    form.append('<input type="hidden" name="rules" value="' + encodeURIComponent(JSON.stringify(rules, null, 2)) + '">');

    form.append('<input type="hidden" name="sql" value="' + query.sql + '">');

    form.append('<input type="hidden" name="params" value="' + encodeURIComponent(JSON.stringify(query.params, null, 2)) + '">');

    form.submit();

 });

});

Мой код в index.php: 

<?php

  if ( isset($_POST) ) {

  $rules = isset($_POST['rules']) ? $_POST['rules'] : "";

  }

  ?>

  <form name="form" id="form" role="form" method="post" action="">
    <div id="queryBuilder"></div>

    <!--used only to restore rules in jquery-querybuilder-->
    <input type="hidden" id="rules" value="<?php echo $rules; ?>">


    <button type="button" id="btn-submit" class="btn btn-success">Search</button>
  </form>

Проблема в том, что правила не восстанавливаются должным образом.

ЕслиЯ вставляю предупреждение в готовый документ , например : 

alert(decodeURIComponent($("#rules").val()));

Я получаю правильных правил : 

{
  "condition": "AND",
  "rules": [
    {
      "id": "description",
      "field": "description",
      "type": "string",
      "input": "text",
      "operator": "equal",
      "value": "test value"
    }
  ],
  "valid": true
}

Кажется, это $('#queryBuilder').queryBuilder('setRules', decodeURIComponent($("#rules").val()) );неверный способ инициализации плагина.

Если я попытаюсь hard-code , то правила будут такими: 

var rules_basic = {
  "condition": "AND",
  "rules": [
    {
      "id": "description",
      "field": "description",
      "type": "string",
      "input": "text",
      "operator": "equal",
      "value": "test value"
    }
  ],
  "valid": true
};

$('#queryBuilder').queryBuilder({
   plugins: ['bt-tooltip-errors'],
   filters: [{
     id: 'description',
     label: 'Description',
     type: 'string'
   }],
   rules: rules_basic 
 });

Тогда все будет работать правильно!

Как заставить получить правила инициализации из динамического скрытого поля ввода? Мой script.js отделен от HTML, поэтому я не могу (и не хочу) заставлять писать начальные правила, используя PHP, например:

index.php: 

.... HTML PART

..... JS PART

$('#queryBuilder').queryBuilder({
   plugins: ['bt-tooltip-errors'],
   filters: [{
     id: 'description',
     label: 'Description',
     type: 'string'
   }],
   rules: <?php echo $rules; ?>    // <---------------- HERE
 });

1 Ответ

1 голос
/ 30 сентября 2019

Возможная причина в том, что вы получили строковое значение с функцией ".val", но плагину нужен объект JSON для установки правил, пожалуйста попробуйте использовать этот код в script.js: 

var customRules = decodeURIComponent($("#rules").val());
$('#queryBuilder').queryBuilder('setRules', JSON.parse(customRules) );

Вместоэтого: 

$('#queryBuilder').queryBuilder('setRules', decodeURIComponent($("#rules").val()) );
...