Skip to main content

Mark Judd: JavaScript Integration (Query Builder Example sidebar)

[Back to "Mark Judd:JavaScript integration"]

Query Builder Example (sidebar)

This example requires Internet Explorer 4.0 or higher. To use this example, click on the bottom link to create rows dynamically. Click on the "X" buttons to delete a row. You can also try building a query that includes a clause that limits the search to documents created between certain dates.



//
function fieldChange (obj) {
   var rowType = obj.value;
   var container = obj.parentElement.parentElement.all;
   container.comparison.outerHTML = 
      genSelect("comparison", rowType.indexOf("Date") == 0 ? dateOpts : textOpts, null, "comparisonChange(this)");
   container.sfield2.style.display = "none";
}
function comparisonChange (obj) {
   var container = obj.parentElement.parentElement.all;
   container.sfield2.style.display = (obj.value.indexOf("between") == -1) ? "none" : "";
}
function genSelect (selectName, opts, chosenOption, doChange) {
   var change = doChange ? (" onChange='" + doChange + "'") : "";
   var name = " NAME='" + selectName + "'";
   var s = "<SELECT" + name + change + ">";
   for (var i = 0; i < opts.length; i++) {
      var opt = opts[i];
      var value = " VALUE='" + opt + "'";
      s += "<OPTION" + value + ">" + opt + "<\/option>";
   }
   s += "<\/SELECT>";
   return s;
}

var dateOpts  = new Array ("is on", "is after", "is before", "is between", "is not between", "is not on");
var textOpts  = new Array ("contains", "does not contain");
var conjOpts  = new Array ("and", "or", "not");
var fieldOpts = new Array ("Author", "Date Created", "Date Modified", "Text", "Title");

function deleteRow (obj) { 
   document.all.searchTable.deleteRow(obj.rowIndex);
   document.all.searchTable.rows[0].all.conjunction.style.visibility = "hidden";
}
function addRow () {
   var newRow = document.all.searchTable.insertRow(document.all.searchTable.rows.length-1);
   (newRow.insertCell()).innerHTML = 
      "<INPUT TYPE=BUTTON value='X' id='deleteMe' onClick='deleteRow(this.parentElement.parentElement)'>";
   (newRow.insertCell()).innerHTML = genSelect("conjunction", conjOpts);
   (newRow.insertCell()).innerHTML = genSelect("field", fieldOpts, null, "fieldChange(this)");
   (newRow.insertCell()).innerHTML = genSelect("comparison", textOpts, null, "comparisonChange(this)");
   (newRow.insertCell()).innerHTML = 
      "<INPUT TYPE=TEXT id=field1><SPAN id=sfield2 style='display:none'> and <INPUT TYPE=TEXT id=field2><\/SPAN>";
   document.all.searchTable.rows[0].all.conjunction.style.visibility = "hidden";
   document.all.searchTable.rows[0].all.deleteMe.style.visibility = "hidden";
}
//

Set onClick = addRow() to add a new search clause

//
document.body.onload=addRow;
//