Click here to Skip to main content
15,880,469 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Edit fiddle - JSFiddle[^]

This is working fine in JSFiddle. But this is not working for me. Please suggest.

HTML Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Conditions Demo</title>
      <!--http://jsfiddle.net/oz6t0boo/1/-->
      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
      <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
      <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" />
      <link rel="stylesheet" type="text/css" href="css/query-builder.css" />
      <script src="js/query-builder.js"></script>
      <script src="js/query-builder-new.js"></script>
  </head>
  <body>
      <div id="container" class="container search-template">
          <div id="content">
              
              <div id="builder"></div>
              <form role="form" method="post" id="query-builder-form">
                <div class="btn-group">
                    <input type="button" class="btn btn-warning reset" value="Reset" />
                    <input type="button" class="btn btn-primary parse-sql" value="Run" />
                </div>
                <hr />
                <textarea class="form-control json-parsed" rows="10" id="json-parsed" name="json-parsed" readonly></textarea>
                <hr />
                <textarea class="form-control sql-parsed" rows="10" id="sql-parsed" name="sql-parsed" readonly></textarea>
              </form>
          </div>
      </div>
  </body>
</html>



JavaScript :

// JavaScript Document
// + - + - + - + - + - + - + - + - + - + - + - + - + - + - 
// + - + - + - + - + - + - + - + - + - + - + - + - + - + - 

$('#builder').queryBuilder({

  sortable: true,

  filters: [{
    id: 'core_ID',
    type: 'integer',
    operators: ['equal', 'not_equal', 'in', 'not_in']
  }, {
    id: 'store_id',
    label: 'Store ID',
    type: 'string',
    operators: ['equal', 'not_equal', 'in', 'not_in']
  }]

});


// set rules
$('#builder').queryBuilder('setRules', {
  "condition": "AND",
  "rules": [{
    "id": "core_ID",
    "field": "core_ID",
    "type": "integer",
    "input": "text",
    "operator": "in",
    "value": "1240"
  }]
});


// reset builder
$('.reset').on('click', function() {

  $('#builder').queryBuilder('reset');

  $(".json-parsed").empty();

  $(".sql-parsed").empty();

});

// get rules & SQL
$('.parse-sql').on('click', function() {

  // JSON

  var resJson = $('#builder').queryBuilder('getRules');

  $(".json-parsed").html(JSON.stringify(resJson, null, 2));

  // SQL

  var resSql = $('#builder').queryBuilder('getSQL', false);

  $(".sql-parsed").html(resSql.sql);

});

// result

$(document).ready(function() {

  $(".parse-sql").trigger("click");

});


Also included -


[^]


[^]


[^]

and Jquery

What I have tried:

This is working fine in JSFiddle. But this is not working for me. Please suggest.
Posted
Updated 1-Jul-16 23:08pm
v2
Comments
JayantaChatterjee 2-Jul-16 4:09am    
please post your code. link is not working....
Prasun Kumar Chatterjee 2-Jul-16 5:08am    
Thank you. I have updated the question with code.
JayantaChatterjee 2-Jul-16 5:47am    
I think you missing some external file links...
Beginner Luck 4-Jul-16 1:31am    
or the location of the external file is wrong
try codepen as it has downloading function that can download full working copy
Prateek Dalbehera 5-Jul-16 6:26am    
Please ensure the external files(css,js...) you are referring are present in the given locations.
Also, you can do a F12 after loading the web page to get the real cause of exception.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900