Adding swap argument for ajax calls (#769)

* Adding swap argument for ajax calls

* Adding documentation

* Removing ;'s

3 files changed, 25 insertions, 8 deletions

diff --git a/src/htmx.js b/src/htmx.js
index 5cf44864..390ce2fc 100644
--- a/src/htmx.js
+++ b/src/htmx.js
@@ -1958,10 +1958,11 @@ return (function () {
         /**
          *
          * @param {HTMLElement} elt
+         * @param {string} swapInfoOverride
          * @returns {import("./htmx").HtmxSwapSpecification}
          */
-        function getSwapSpecification(elt) {
-            var swapInfo = getClosestAttributeValue(elt, "hx-swap");
+        function getSwapSpecification(elt, swapInfoOverride) {
+            var swapInfo = swapInfoOverride ? swapInfoOverride : getClosestAttributeValue(elt, "hx-swap");
             var swapSpec = {
                 "swapStyle" : getInternalData(elt).boosted ? 'innerHTML' : htmx.config.defaultSwapStyle,
                 "swapDelay" : htmx.config.defaultSwapDelay,
@@ -2192,6 +2193,7 @@ return (function () {
                             headers : context.headers,
                             values : context.values,
                             targetOverride: resolveTarget(context.target),
+                            swapOverride: context.swap,
                             returnPromise: true
                         });
                 }
@@ -2435,7 +2437,7 @@ return (function () {
                 }
             }
 
-            var responseInfo = {xhr: xhr, target: target, requestConfig: requestConfig, pathInfo:{
+            var responseInfo = {xhr: xhr, target: target, requestConfig: requestConfig, etc:etc, pathInfo:{
                   path:path, finalPath:finalPathForGet, anchor:anchor
                 }
             };
@@ -2516,6 +2518,7 @@ return (function () {
         function handleAjaxResponse(elt, responseInfo) {
             var xhr = responseInfo.xhr;
             var target = responseInfo.target;
+            var etc = responseInfo.etc;
 
             if (!triggerEvent(elt, 'htmx:beforeOnLoad', responseInfo)) return;
 
@@ -2576,7 +2579,8 @@ return (function () {
                     saveHistory();
                 }
 
-                var swapSpec = getSwapSpecification(elt);
+                var swapOverride = etc.swapOverride;
+                var swapSpec = getSwapSpecification(elt, swapOverride);
 
                 target.classList.add(htmx.config.swappingClass);
                 var doSwap = function () {
diff --git a/test/core/api.js b/test/core/api.js
index 2f316b29..25bc9d22 100644
--- a/test/core/api.js
+++ b/test/core/api.js
@@ -279,6 +279,15 @@ describe("Core htmx API test", function(){
         div.innerHTML.should.equal("foo!");
     });
 
+    it('ajax api works with swapSpec', function()
+    {
+        this.server.respondWith("GET", "/test", "<p class='test'>foo!</p>");
+        var div = make("<div><div id='target'></div></div>");
+        htmx.ajax("GET", "/test", {target: "#target", swap:"outerHTML"});
+        this.server.respond();
+        div.innerHTML.should.equal('<p class="test">foo!</p>');
+    });
+
     it('ajax returns a promise', function(done)
     {
         // in IE we do not return a promise
diff --git a/www/api.md b/www/api.md
index c334e8ae..d3c4fa50 100644
--- a/www/api.md
+++ b/www/api.md
@@ -51,22 +51,26 @@ or
     * `event` - an event that "triggered" the request
     * `handler` - a callback that will handle the response HTML
     * `target` - the target to swap the response into
+    * `swap` - how the response will be swapped in relative to the target
     * `values` - values to submit with the request
     * `headers` - headers to submit with the request
 
-
 ##### Example
 
 ```js
     // issue a GET to /example and put the response HTML into #myDiv
     htmx.ajax('GET', '/example', '#myDiv')
-    
+
+    // issue a GET to /example and replace #myDiv with the repsonse
+    htmx.ajax('GET', '/example', {target:'#myDiv', swap:'outerHTML'})
+
     // execute some code after the content has been inserted into the DOM
     htmx.ajax('GET', '/example', '#myDiv').then(() => {
       // this code will be executed after the 'htmx:afterOnLoad' event,
       // and before the 'htmx:xhr:loadend' event
       console.log('Content inserted successfully!');
-    }); 
+    });
+
 ```
 
 ### <a name="closest"></a> Method -  [`htmx.closest()`](#closest)
@@ -329,7 +333,7 @@ Caution: Accepts an int followed by either `s` or `ms`. All other values use `pa
 ```js
     // returns 3000
     var milliseconds = htmx.parseInterval("3s");
-    
+
     // returns 3 - Caution
     var milliseconds = htmx.parseInterval("3m");
 ```