submit button working

src/main/html/index.html

@@ -74,7 +74,7 @@
                     Operations</a></li>
                 <li><a href="#" onclick="Docs.expandOperationsForResource('${name}'); return false;">Expand
                     Operations</a></li>
-                <li><a href="${baseUrl}${path_json}.json">Raw</a>
+                <li><a href="${baseUrl}${path_json}">Raw</a>
                 </li>
             </ul>
         </div>
@@ -105,7 +105,7 @@
             </ul>
         </div>
         <div class='content' id='${apiName}_${nickname}_${id}_content' style='display:none'>
-            <form accept-charset="UTF-8" action="#" class="sandbox" method="post">
+            <form id="${apiName}_${nickname}_${id}_form" accept-charset="UTF-8" action="#" class="sandbox" method="post">
                 <div style="margin:0;padding:0;display:inline"></div>
                 <h4>Parameters</h4>
                 <table class='fullwidth'>
@@ -123,7 +123,7 @@
 
                 <div class='sandbox_header' id='${apiName}_${nickname}_${id}_content_sandbox_response_header'>
                     <input class="submit" id="${apiName}_${nickname}_${id}_content_sandbox_response_button" name="commit"
-                           type="submit" value="Try it out!"/>
+                           type="button" value="Try it out!"/>
                     <a href="#" id="${apiName}_${nickname}_${id}_content_sandbox_response_hider"
                        onclick="$('#${apiName}_${nickname}_${id}_content_sandbox_response').slideUp();$(this).fadeOut(); return false;"
                        style="display:none">Hide Response</a>
@@ -157,7 +157,7 @@
 <script id="paramTemplateRequired" type="text/x-jquery-tmpl">
     <tr>
         <td class='code required'>${name}</td>
-        <td><input class="required" minlength="1" placeholder="(required)" type="text" value=""/></td>
+        <td><input name="${name}" class="required" minlength="1" placeholder="(required)" type="text" value=""/></td>
         <td width='500'><strong>${description}</strong>
         </td>
     </tr>
@@ -166,7 +166,7 @@
 <script id="paramTemplate" type="text/x-jquery-tmpl">
     <tr>
         <td class='code'>${name}</td>
-        <td><input class="" minlength="0" placeholder="" type="text" value=""/></td>
+        <td><input name="${name}" class="" minlength="0" placeholder="" type="text" value=""/></td>
         <td width='500'>${description}</td>
     </tr>
 </script>

src/main/html/javascript/swagger-ui.js

@@ -22,7 +22,7 @@ jQuery(function($) {
 
             // Create convenience references to Spine models
             this.ApiResource = swaggerService.ApiResource();
-            
+
             this.ApiResource.bind("refresh", this.addAll);
         },
 
@@ -95,14 +95,21 @@ jQuery(function($) {
     });
 
     var OperationController = Spine.Controller.create({
+        proxied: ["submitOperation"],
+
         operation: null,
         templateName: "#operationTemplate",
+        elementScope: "#operationTemplate",
 
         init: function() {
             this.render();
 
             this.operation = this.item;
+            this.isGetOperation = (this.operation.httpMethodLowercase == "get");
+            this.elementScope = "#" + this.operation.apiName + "_" + this.operation.nickname + "_" + this.operation.id;
+
             this.renderParams();
+
         },
 
         render: function() {
@@ -111,9 +118,7 @@ jQuery(function($) {
 
         renderParams: function() {
             if (this.operation.parameters && this.operation.parameters.count() > 0) {
-                var isGetOpetation = (this.operation.httpMethodLowercase == "get");
+                var operationParamsContainer = this.elementScope + "_params";
-
-                var operationParamsContainer = "#" + this.operation.apiName + "_" + this.operation.nickname + "_" + this.operation.id + "_params";
                 log("operationParamsContainer = " + operationParamsContainer);
                 for (var p = 0; p < this.operation.parameters.count(); p++) {
                     var param = this.operation.parameters.all()[p];
@@ -122,25 +127,32 @@ jQuery(function($) {
                     if (param.required)
                         templateName += "Required";
 
-                    if (!isGetOpetation)
+                    if (!this.isGetOperation)
                         templateName += "ReadOnly";
 
                     $(templateName).tmpl(param).appendTo(operationParamsContainer);
-                    log("adding " + $(templateName).tmpl(param) + " TO " + operationParamsContainer);
+//                    log("adding " + $(templateName).tmpl(param) + " TO " + operationParamsContainer);
-
-                    if (!isGetOpetation) {
-                        var submitButtonId = "#" + this.operation.apiName + "_" + this.operation.nickname + "_" + this.operation.id + "_content_sandbox_response_button";
-                        $(submitButtonId).hide();
-
-                        var valueHeader = "#" + this.operation.apiName + "_" + this.operation.nickname + "_" + this.operation.id + "_value_header";
-                        $(valueHeader).html("Default Value");
-
-                    }
-
-
                 }
             }
+
+            var submitButtonId = this.elementScope + "_content_sandbox_response_button";
+            if (this.isGetOperation) {
+                $(submitButtonId).click(this.submitOperation);
+            } else {
+                $(submitButtonId).hide();
+
+                var valueHeader = this.elementScope + "_value_header";
+                $(valueHeader).html("Default Value");
+            }
+
+        },
+
+        submitOperation: function() {
+            var form = $(this.elementScope + "_form");
+            log(this.elementScope + "_form:: " + form);
+            log("submitOperation : '" + form.serialize() + "'");
         }
+
     });
 
     var resourceListController = ResourceListController.init();