DYNATREE - Search

HTML

<script src="http://dynatree.googlecode.com/svn/trunk/src/jquery.dynatree.js"></script>
<link rel="stylesheet" href="http://wwwendt.de/tech/dynatree/src/skin-vista/ui.dynatree.css">
<body>
<h2 class="center">IDT HL7 Search</h2>
<div id="search">
    <form name="siteSearchForm" id="siteSearchForm" method="get">
        <fieldset class="search-fields">
            <legend>Site Search</legend>
            <input type="text" name="searchFor" id="searchFor" />
            <select name="searchType" id="searchType" >
              <option value="csid">CSID</option>
              <option value="rcr">RCR</option>
              <option value="accountName">Account Name</option>
              <option value="accountNumber">Account Number</option>
            </select>
            <input type="button" id="findSites" value="Find Sites" />
        </fieldset>
    </form>
    <form name="fileSearchForm" id="fileSearchForm" method="get">
        <fieldset class="search-fields">
            <legend>File Search</legend>
            <select name="siteName" id="siteName">
            </select>
            <input type="button" id="findFiles" value="Find Files" />
        </fieldset>
    </form>
</div>
<div id="search">
    <fieldset class="search-fields">
           <legend>Currently viewing</legend>
        Site: <input type="text" name="currentSite" id="currentSite" disabled="disabled" />
        CSID: <input type="text" name="currentCsid" id="currentCsid" disabled="disabled" />
        RCR:  <input type="text" name="currentRcr"  id="currentRcr"  disabled="disabled" />
    </fieldset>
</div>
<br/>
<div>
    <form>
        <input type="checkbox" name="filterBy" id="filterBy" value="Filter by:" /> Filter results by:
        <input type="text" name="filterValue" id="filterValue" />
    </form>
</div>
<br/>
<div id="sub-title">
   <div id="sub-left">
    <fieldset class="search-fields">
           <legend>Files Found</legend>
        <!-- Add a <div> element where the tree should appear:...

CSS

@CHARSET "ISO-8859-1";
body {
    font: 80% arial, helvetica, sans-serif;
    margin: 0;
}

div { position: relative; }

textarea
{
    width:99%;
}

/* a {                            make link look like button */
/*   border: 4px outset; */
/*   padding: 2px; */
/*   text-decoration: none; */
/* } */

h1, h2 {
    margin: 5;
}

#header {
    background: #ccc;
}

#search {
    background: #FFFF99;    /* pale yellow */
/*     position: absolute; */
/*     left: 0; */
/*     top: 0px; */
    width: 100%;
    margin: 5;
}

#content {
/*     margin-top: 160px; */
}

#sub-left {
/*    background: #99FF99;    pale green */
/*    border:1px dashed; */
   float: left;
   width: 22%;
}
#sub-right {
/*    background: #FFCC99;    pale orange */
/*    border:1px dashed; */
   float: right;
   width: 73%;
}
#sub-title { 
    overflow:hidden; 
}
.clear-both {
   clear: both;
}

#tree {
  vertical-align: top;
  width: 100%;
}
iframe {
  border: 1px dotted gray;
}

.center {
   margin-left: 5px;;
   width:100%;
   background-color:#b0e0e6;
}

.search-fields label, .search-fields input {
  display:inline-block;
}

.search-fields label {
  width:200px; /* or whatever size you want them */
}

JavaScript

$(document).ready(function() {                                              
    $.ajaxSetup ({
        cache: false
    });
    $('#filterValue').keyup(function() {
        document.getElementById("filterBy").checked=false;  
        document.getElementById("filterBy").disabled=false;          
    });
    $('#findSites').click(function() {                                // Locate HTML DOM element with ID "somebutton" and assign the following function to its "click" event...
        searchVal = document.getElementById("searchFor").value;
        searchTyp = document.getElementById("searchType").value;
        $.get('SiteSearchServlet', {searchFor: searchVal, searchType: searchTyp}, function(responseJson) {           // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response JSON...
            var $select = $('#siteName');                             // Locate HTML DOM element with ID "someselect".
            $select.find('option').remove();                          // Find all child elements with tag name "option" and remove them (just to prevent duplicate options when button is pressed again).
            $.each(responseJson, function(key, value) {               // Iterate over the JSON object.
                $('<option>').val(key).text(value).appendTo($select); // Create HTML <option> element, set its value with currently iterated key and its text content with currently iterated item and finally append it to the <select>.
            });
        });
    });
    $('#findFiles').click(function() {    // Locate HTML DOM element with ID "findFiless" and assign the following function to its "click" event...
        chosenSite = document.getElementById("siteName").value;
        searchVal = document.getElementById("searchFor").value;
        searchTyp = document.getElementById("searchType").value;
        $.get('FileSearchServlet', {siteName: chosenSite, searchFor: searchVal, searchType: searchTyp},...