fixes #693

README.md

@@ -96,8 +96,9 @@ operationsSorter | Apply a sort to the operation list of each API. It can be 'al
 onComplete | This is a callback function parameter which can be passed to be notified of when SwaggerUI has completed rendering successfully.
 onFailure | This is a callback function parameter which can be passed to be notified of when SwaggerUI encountered a failure was unable to render.
 highlightSizeThreshold | Any size response below this threshold will be highlighted syntactically, attempting to highlight large responses can lead to browser hangs, not including a threshold will default to highlight all returned responses.
-supportedSubmitMethods | An array of of the HTTP operations that will have the 'Try it out!` option. An empty array disables all operations. This does not filter the operations from the display.
+supportedSubmitMethods | An array of of the HTTP operations that will have the 'Try it out!' option. An empty array disables all operations. This does not filter the operations from the display.
 oauth2RedirectUrl | OAuth redirect URL
+showRequestHeaders | Whether or not to show the headers that were sent when making a request via the 'Try it out!' option. Defaults to `false`.
 
 * All other parameters are explained in greater detail below
 

dist/index.html

@@ -52,7 +52,8 @@
           log("Unable to Load SwaggerUI");
         },
         docExpansion: "none",
-        apisSorter: "alpha"
+        apisSorter: "alpha",
+        showRequestHeaders: false
       });
 
       function addApiKeyAuthorization(){

src/main/html/index.html

@@ -52,7 +52,8 @@
           log("Unable to Load SwaggerUI");
         },
         docExpansion: "none",
-        apisSorter: "alpha"
+        apisSorter: "alpha",
+        showRequestHeaders: false
       });
 
       function addApiKeyAuthorization(){

src/main/javascript/view/OperationView.js

@@ -160,6 +160,10 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
         signature: this.model.responseClassSignature
       };
     }
+    var opts = this.options.swaggerOptions;
+    if (opts.showRequestHeaders) {
+      this.model.showRequestHeaders = true;
+    }
     $(this.el).html(Handlebars.templates.operation(this.model));
     if (signatureModel) {
       responseSignatureView = new SwaggerUi.Views.SignatureView({
@@ -241,7 +245,7 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
   // Note: copied from CoffeeScript compiled file
   // TODO: redactor
   submitOperation: function(e) {
-    var error_free, form, isFileUpload, l, len, len1, len2, m, map, n, o, opts, ref1, ref2, ref3, val;
+    var error_free, form, isFileUpload, map, opts;
     if (e !== null) {
       e.preventDefault();
     }
@@ -290,43 +294,16 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
       }
     });
     if (error_free) {
-      map = {};
+      map = this.getInputMap(form);
+      isFileUpload = this.isFileUpload(form);
       opts = {
         parent: this
       };
-      if(this.options.swaggerOptions) {
+      if (this.options.swaggerOptions) {
         for(var key in this.options.swaggerOptions) {
           opts[key] = this.options.swaggerOptions[key];
         }
       }
-      isFileUpload = false;
-      ref1 = form.find('input');
-      for (l = 0, len = ref1.length; l < len; l++) {
-        o = ref1[l];
-        if ((o.value !== null) && jQuery.trim(o.value).length > 0) {
-          map[o.name] = o.value;
-        }
-        if (o.type === 'file') {
-          map[o.name] = o.files[0];
-          isFileUpload = true;
-        }
-      }
-      ref2 = form.find('textarea');
-      for (m = 0, len1 = ref2.length; m < len1; m++) {
-        o = ref2[m];
-        val = this.getTextAreaValue(o);
-        if ((val !== null) && jQuery.trim(val).length > 0) {
-          map[o.name] = val;
-        }
-      }
-      ref3 = form.find('select');
-      for (n = 0, len2 = ref3.length; n < len2; n++) {
-        o = ref3[n];
-        val = this.getSelectedValue(o);
-        if ((val !== null) && jQuery.trim(val).length > 0) {
-          map[o.name] = val;
-        }
-      }
       opts.responseContentType = $('div select[name=responseContentType]', $(this.el)).val();
       opts.requestContentType = $('div select[name=parameterContentType]', $(this.el)).val();
       $('.response_throbber', $(this.el)).show();
@@ -338,6 +315,51 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
     }
   },
 
+  getInputMap: function (form) {
+    var map, ref1, l, len, o, ref2, m, len1, val, ref3, n, len2;
+    map = {};
+    ref1 = form.find('input');
+    for (l = 0, len = ref1.length; l < len; l++) {
+      o = ref1[l];
+      if ((o.value !== null) && jQuery.trim(o.value).length > 0) {
+        map[o.name] = o.value;
+      }
+      if (o.type === 'file') {
+        map[o.name] = o.files[0];
+      }
+    }
+    ref2 = form.find('textarea');
+    for (m = 0, len1 = ref2.length; m < len1; m++) {
+      o = ref2[m];
+      val = this.getTextAreaValue(o);
+      if ((val !== null) && jQuery.trim(val).length > 0) {
+        map[o.name] = val;
+      }
+    }
+    ref3 = form.find('select');
+    for (n = 0, len2 = ref3.length; n < len2; n++) {
+      o = ref3[n];
+      val = this.getSelectedValue(o);
+      if ((val !== null) && jQuery.trim(val).length > 0) {
+        map[o.name] = val;
+      }
+    }
+    return map;
+  },
+
+  isFileUpload: function (form) {
+    var ref1, l, len, o;
+    var isFileUpload = false;
+    ref1 = form.find('input');
+    for (l = 0, len = ref1.length; l < len; l++) {
+      o = ref1[l];
+      if (o.type === 'file') {
+        isFileUpload = true;
+      }
+    }
+    return isFileUpload;
+  },
+
   success: function(response, parent) {
     parent.showCompleteStatus(response);
   },
@@ -345,7 +367,7 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
   // Note: This is compiled code
   // TODO: Refactor
   handleFileUpload: function(map, form) {
-    var bodyParam, el, headerParams, l, len, len1, len2, len3, m, n, o, p, param, params, ref1, ref2, ref3, ref4;
+    var bodyParam, el, headerParams, l, len, len1, len3, m, o, p, param, params, ref1, ref2, ref4;
     ref1 = form.serializeArray();
     for (l = 0, len = ref1.length; l < len; l++) {
       o = ref1[l];
@@ -364,14 +386,6 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
         }
       }
     }
-    headerParams = {};
-    ref3 = this.model.parameters;
-    for (n = 0, len2 = ref3.length; n < len2; n++) {
-      param = ref3[n];
-      if (param.paramType === 'header') {
-        headerParams[param.name] = map[param.name];
-      }
-    }
     ref4 = form.find('input[type~="file"]');
     for (p = 0, len3 = ref4.length; p < len3; p++) {
       el = ref4[p];
@@ -669,11 +683,20 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
     $('.response', $(this.el)).slideDown();
     $('.response_hider', $(this.el)).show();
     $('.response_throbber', $(this.el)).hide();
-    var response_body_el = $('.response_body', $(this.el))[0];
 
-    // only highlight the response if response is less than threshold, default state is highlight response
     var opts = this.options.swaggerOptions;
-    if (opts.highlightSizeThreshold && response.data.length > opts.highlightSizeThreshold) {
+
+    if (opts.showRequestHeaders) {
+      var form = $('.sandbox', $(this.el)),
+        map = this.getInputMap(form),
+        requestHeaders = this.model.getHeaderParams(map);
+      delete requestHeaders['Content-Type'];
+      $('.request_headers', $(this.el)).html('<pre>' + _.escape(JSON.stringify(requestHeaders, null, '  ')).replace(/\n/g, '<br>') + '</pre>');
+    }
+
+    var response_body_el = $('.response_body', $(this.el))[0];
+    // only highlight the response if response is less than threshold, default state is highlight response
+    if (opts.highlightSizeThreshold && typeof response.data !== 'undefined' && response.data.length > opts.highlightSizeThreshold) {
       return response_body_el;
     } else {
       return hljs.highlightBlock(response_body_el);

src/main/template/operation.handlebars

@@ -94,6 +94,10 @@
         <div class='response' style='display:none'>
           <h4>Request URL</h4>
           <div class='block request_url'></div>
+          {{#if showRequestHeaders}}
+          <h4>Request Headers</h4>
+          <div class='block request_headers'></div>
+          {{/if}}
           <h4>Response Body</h4>
           <div class='block response_body'></div>
           <h4>Response Code</h4>