Changeset 570

Timestamp:

Jun 16, 2010, 3:09:42 PM (12 years ago)

Author:

vinlud

Message:

Dynamic forms controls

Location:

trunk

Files:

• grails-app/views/simpleQuery/common/_query.gsp (modified) (3 diffs)
• web-app/js/simpleQuery.js (modified) (1 diff)

trunk/grails-app/views/simpleQuery/common/_query.gsp

@@ -26 +26 @@
     </div>
     <g:submitButton name="search" value="Search" /> <g:if test="${term}"><g:submitButton name="reset" value="Clear" /></g:if>
-    </g:form>
 
     <br><br>
@@ -33 +32 @@
       <h3><a href="#">Simple Assays</a></h3>
       <div class="element">
-        <g:form action="pages" name="addCompound" id="addCompound">
-        <div class="description">Compound (e.g. 'glucose')</div>
-        <div class="input"><g:textField name="compound" value="" /></div>
-        <div class="description">Value</div>
-        <div class="input"><g:textField name="compound_value" value="" /></div>
-        <g:submitButton id="addCompound" name="addCompound" value="Add compound" />
-        </g:form>
+        <div id="compoundGroup">
+          <div id="compoundRow1">
+            <div class="description">Compound (e.g. 'glucose')</div>
+            <div class="input"><g:textField name="compound" value="" id="compound1" /></div>
+            <div class="description">Value</div>
+            <div class="input"><g:textField name="compound_value" value="" id="compoundValue1" /></div>
+          </div>
+        </div>
+        <div id="addCompound">Add compound</div>
       </div>
 
@@ -45 +46 @@
 
       <div class="element">
-        <g:form action="pages" name="addTransciptome" id="addTransciptome">
-        <div class="description">List of Gene IDs or pathway IDs</div>
-        <div class="input"><g:textField name="genepath" value="" /></div>
-        <div class="description">Type of regulations</div>
-        <div class="input"><g:select name="regulation" from="" value="${regulation}" noSelection="['':'--- select regulation ---']"/></div>
-        <g:submitButton id="addTransciptome" name="addTransciptome" value="Add transciptome" />
-        </g:form>
+        <div id="transcriptomeGroup">
+          <div id="transcriptomeRow1">
+            <div class="description">List of Gene IDs or pathway IDs</div>
+            <div class="input"><g:textField name="genepath" value="" /></div>
+            <div class="description">Type of regulations</div>
+            <div class="input"><g:select name="regulation" from="" value="${regulation}" noSelection="['':'--- select regulation ---']"/></div>
+          </div>
+        </div>
+        <div id="addTranscriptome">Add transciptome</div>
       </div>
     </div>
+    </g:form>
 
     <br><br>

trunk/web-app/js/simpleQuery.js

@@ -13 +13 @@
 
   $(document).ready(function() {
+
+    var compoundCounter = 2;
+    var transcriptomeCounter = 2;
+
     $("#accordion").accordion({collapsible: true,
         autoHeight: false,
         active: false});
 
-    $('#addCompound').submit(function() {
-        alert('Handler for adding compound called');
+    $('#addCompound').click(function() {
+        var compoundGroup = document.getElementById('compoundGroup');
+
+        var newCompoundDiv = document.createElement('div');
+        newCompoundDiv.setAttribute('id', 'compoundRow' + compoundCounter);
+
+        newCompoundDiv.innerHTML = '<div class="description">Compound</div> <div class="input"><input type="text" name="compound" value=""></div> <div class="description">Value</div> <div class="input"><input id="compoundValue' + compoundCounter + '" type="text"></div>';
+
+        compoundGroup.appendChild(newCompoundDiv);
+
+        compoundCounter++;
+        // alert('Handler for adding compound called: ' + compoundCounter);
         return true;
     });
 
-    $('#addTransciptome').submit(function() {
-        alert('Handler for adding transcriptome called');
-        return true;
-    });
+      $('#addTranscriptome').click(function() {
+          var transcriptomeGroup = document.getElementById('transcriptomeGroup');
+          var newTranscriptomeDiv = document.createElement('div');
+
+          newTranscriptomeDiv.setAttribute('id', 'transcriptomeRow' + transcriptomeCounter);
+
+          var newTranscriptomeRowDiv1 = document.createElement('div');
+          newTranscriptomeRowDiv1.setAttribute('class', 'description');
+          newTranscriptomeRowDiv1.innerHTML = "Gene/pathway";
+          newTranscriptomeDiv.appendChild(newTranscriptomeRowDiv1);
+
+          var newTranscriptomeRowDiv2 = document.createElement('div');
+          newTranscriptomeRowDiv2.setAttribute('class', 'input');
+          newTranscriptomeRowDiv2.innerHTML = '<input type="text" name="genepath" value="">';
+          newTranscriptomeDiv.appendChild(newTranscriptomeRowDiv2);
+
+          var newTranscriptomeRowDiv3 = document.createElement('div');
+          newTranscriptomeRowDiv3.setAttribute('class', 'description');
+          newTranscriptomeRowDiv3.innerHTML = "Type of regulations";
+          newTranscriptomeDiv.appendChild(newTranscriptomeRowDiv3);
+
+          var newTranscriptomeRowDiv4 = document.createElement('div');
+          newTranscriptomeRowDiv4.setAttribute('class', 'input');
+          var newSelectBox = document.getElementById('regulation');
+          newTranscriptomeRowDiv4 = newSelectBox.cloneNode(true);
+          newTranscriptomeRowDiv4.setAttribute('id', 'regulation' + transcriptomeCounter);
+          newTranscriptomeDiv.appendChild(newTranscriptomeRowDiv4);
+
+          transcriptomeGroup.appendChild(newTranscriptomeDiv);
+
+          transcriptomeCounter++;
+          // alert('Handler for adding transcriptome called: ' + transcriptomeCounter);
+          return true;
+      });
+
   });
+