fix htmx.ajax defaulting to swap body when target not found (#2878)

* ajax helper handle no target

* allow source only targeting

* Add tests

* Handle source set but invalid target set

* Improve source logic

* missed #

* improve readiblity and add inline comment

Author: MichaelWest22

src/htmx.js

@@ -3901,16 +3901,22 @@ var htmx = (function() {
     if (context) {
       if (context instanceof Element || typeof context === 'string') {
         return issueAjaxRequest(verb, path, null, null, {
-          targetOverride: resolveTarget(context),
+          targetOverride: resolveTarget(context) || DUMMY_ELT,
           returnPromise: true
         })
       } else {
+        let resolvedTarget = resolveTarget(context.target)
+        // If target is supplied but can't resolve OR both target and source can't be resolved
+        // then use DUMMY_ELT to abort the request with htmx:targetError to avoid it replacing body by mistake
+        if ((context.target && !resolvedTarget) || (!resolvedTarget && !resolveTarget(context.source))) {
+          resolvedTarget = DUMMY_ELT
+        }
         return issueAjaxRequest(verb, path, resolveTarget(context.source), context.event,
           {
             handler: context.handler,
             headers: context.headers,
             values: context.values,
-            targetOverride: resolveTarget(context.target),
+            targetOverride: resolvedTarget,
             swapOverride: context.swap,
             select: context.select,
             returnPromise: true

test/core/api.js

@@ -213,6 +213,71 @@ describe('Core htmx API test', function() {
     div.innerHTML.should.equal('foo!')
   })
 
+  it('ajax api does not fall back to body when target invalid', function() {
+    this.server.respondWith('GET', '/test', 'foo!')
+    var div = make("<div id='d1'></div>")
+    htmx.ajax('GET', '/test', '#d2')
+    this.server.respond()
+    document.body.innerHTML.should.not.equal('foo!')
+  })
+
+  it('ajax api fails when target invalid', function(done) {
+    this.server.respondWith('GET', '/test', 'foo!')
+    var div = make("<div id='d1'></div>")
+    htmx.ajax('GET', '/test', '#d2').then(
+      (value) => {
+      },
+      (reason) => {
+        done()
+      }
+    )
+    this.server.respond()
+    div.innerHTML.should.equal('')
+  })
+
+  it('ajax api fails when target invalid even if source set', function(done) {
+    this.server.respondWith('GET', '/test', 'foo!')
+    var div = make("<div id='d1'></div>")
+    htmx.ajax('GET', '/test', {
+      source: div,
+      target: '#d2'
+    }).then(
+      (value) => {
+      },
+      (reason) => {
+        done()
+      }
+    )
+    this.server.respond()
+    div.innerHTML.should.equal('')
+  })
+
+  it('ajax api fails when source invalid and no target set', function(done) {
+    this.server.respondWith('GET', '/test', 'foo!')
+    var div = make("<div id='d1'></div>")
+    htmx.ajax('GET', '/test', {
+      source: '#d2'
+    }).then(
+      (value) => {
+      },
+      (reason) => {
+        done()
+      }
+    )
+    this.server.respond()
+    div.innerHTML.should.equal('')
+  })
+
+  it('ajax api falls back to targeting source if target not set', function() {
+    this.server.respondWith('GET', '/test', 'foo!')
+    var div = make("<div id='d1'></div>")
+    htmx.ajax('GET', '/test', {
+      source: div
+    })
+    this.server.respond()
+    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>")