handles basic anchor properly16ms ‣
this.server.respondWith('GET', '/test', 'Boosted')
var div = make('<div hx-target="this" hx-boost="true"><a id="a1" href="/test">Foo</a></div>')
var a = byId('a1')
a.click()
this.server.respond()
div.innerHTML.should.equal('Boosted')
handles basic form post properly10ms ‣
this.server.respondWith('POST', '/test', 'Boosted')
var div = make('<div hx-target="this" hx-boost="true"><form id="f1" action="/test" method="post"><button id="b1">Submit</button></form></div>')
var btn = byId('b1')
btn.click()
this.server.respond()
div.innerHTML.should.equal('Boosted')
handles basic form post with button formaction properly3ms ‣
this.server.respondWith('POST', '/test', 'Boosted')
var div = make('<div hx-target="this" hx-boost="true"><form id="f1" method="post"><button id="b1" formaction="/test">Submit</button></form></div>')
var btn = byId('b1')
btn.click()
this.server.respond()
div.innerHTML.should.equal('Boosted')
handles basic form post with button formmethod properly3ms ‣
this.server.respondWith('POST', '/test', 'Boosted')
var div = make('<div hx-target="this" hx-boost="true"><form id="f1" action="/test"><button id="b1" formmethod="post">Submit</button></form></div>')
var btn = byId('b1')
btn.click()
this.server.respond()
div.innerHTML.should.equal('Boosted')
handles basic form post properly w/ explicit action4ms ‣
this.server.respondWith('POST', '/test', 'Boosted')
var div = make('<div hx-target="this"><form id="f1" action="/test" method="post" hx-trigger="click" hx-boost="true"></form></div>')
var form = byId('f1')
form.click()
this.server.respond()
div.innerHTML.should.equal('Boosted')
handles basic form get properly3ms ‣
this.server.respondWith('GET', '/test', 'Boosted')
var div = make('<div hx-target="this" hx-boost="true"><form id="f1" action="/test" method="get"><button id="b1">Submit</button></form></div>')
var btn = byId('b1')
btn.click()
this.server.respond()
div.innerHTML.should.equal('Boosted')
handles basic form with no explicit method property3ms ‣
this.server.respondWith('GET', '/test', 'Boosted')
var div = make('<div hx-target="this" hx-boost="true"><form id="f1" action="/test"><button id="b1">Submit</button></form></div>')
var btn = byId('b1')
btn.click()
this.server.respond()
div.innerHTML.should.equal('Boosted')
does not boost forms with method="dialog"1ms ‣
make('<div hx-boost="true"><form id="f1" action="/test" method="dialog"><button id="b1">close</button></form></div>')
var form = byId('f1')
var internalData = htmx._('getInternalData')(form)
should.equal(undefined, internalData.boosted)
handles basic anchor properly w/ data-* prefix2ms ‣
this.server.respondWith('GET', '/test', 'Boosted')
var div = make('<div data-hx-target="this" data-hx-boost="true"><a id="a1" href="/test">Foo</a></div>')
var a = byId('a1')
a.click()
this.server.respond()
div.innerHTML.should.equal('Boosted')
overriding default swap style does not effect boosting4ms ‣
htmx.config.defaultSwapStyle = 'afterend'
try {
this.server.respondWith('GET', '/test', 'Boosted')
var a = make('<a hx-target="this" hx-boost="true" id="a1" href="/test">Foo</a>')
a.click()
this.server.respond()
a.innerHTML.should.equal('Boosted')
} finally {
htmx.config.defaultSwapStyle = 'innerHTML'
}
anchors w/ explicit targets are not boosted0ms ‣
var a = make('<a hx-target="this" hx-boost="true" id="a1" href="/test" target="_blank">Foo</a>')
var internalData = htmx._('getInternalData')(a)
should.equal(undefined, internalData.boosted)
includes an HX-Boosted Header3ms ‣
this.server.respondWith('GET', '/test', function(xhr) {
should.equal(xhr.requestHeaders['HX-Boosted'], 'true')
xhr.respond(200, {}, 'Boosted!')
})
var btn = make('<a hx-boost="true" hx-target="this" href="/test">Click Me!</a>')
btn.click()
this.server.respond()
btn.innerHTML.should.equal('Boosted!')
form get w/ search params in action property excludes search params3ms ‣
this.server.respondWith('GET', /\/test.*/, function(xhr) {
should.equal(undefined, getParameters(xhr).foo)
xhr.respond(200, {}, 'Boosted!')
})
var div = make('<div hx-target="this" hx-boost="true"><form id="f1" action="/test?foo=bar" method="get"><button id="b1">Submit</button></form></div>')
var btn = byId('b1')
btn.click()
this.server.respond()
div.innerHTML.should.equal('Boosted!')
form post w/ query params in action property uses full url2ms ‣
this.server.respondWith('POST', /\/test.*/, function(xhr) {
should.equal(undefined, getParameters(xhr).foo)
xhr.respond(200, {}, 'Boosted!')
})
var div = make('<div hx-target="this" hx-boost="true"><form id="f1" action="/test?foo=bar" method="post"><button id="b1">Submit</button></form></div>')
var btn = byId('b1')
btn.click()
this.server.respond()
div.innerHTML.should.equal('Boosted!')
form get with an unset action properly submits2ms ‣
this.server.respondWith('GET', /\/*/, function(xhr) {
xhr.respond(200, {}, 'Boosted!')
})
var div = make('<div hx-target="this" hx-boost="true"><form id="f1" method="get"><button id="b1">Submit</button></form></div>')
var btn = byId('b1')
btn.click()
this.server.respond()
div.innerHTML.should.equal('Boosted!')
form get with no action properly clears existing parameters on submit2ms ‣
var path = location.href
if (!path.includes('foo=bar')) {
if (!path.includes('?')) {
path += '?foo=bar'
} else {
path += '&foo=bar'
}
}
history.replaceState({ htmx: true }, '', path)
this.server.respondWith('GET', /\/*/, function(xhr) {
should.equal(undefined, getParameters(xhr).foo)
xhr.respond(200, {}, 'Boosted!')
})
var div = make('<div hx-target="this" hx-boost="true"><form id="f1" method="get"><button id="b1">Submit</button></form></div>')
var btn = byId('b1')
btn.click()
this.server.respond()
div.innerHTML.should.equal('Boosted!')
form get with an empty action properly clears existing parameters on submit2ms ‣
var path = location.href
if (!path.includes('foo=bar')) {
if (!path.includes('?')) {
path += '?foo=bar'
} else {
path += '&foo=bar'
}
}
history.replaceState({ htmx: true }, '', path)
this.server.respondWith('GET', /\/*/, function(xhr) {
should.equal(undefined, getParameters(xhr).foo)
xhr.respond(200, {}, 'Boosted!')
})
var div = make('<div hx-target="this" hx-boost="true"><form id="f1" action="" method="get"><button id="b1">Submit</button></form></div>')
var btn = byId('b1')
btn.click()
this.server.respond()
div.innerHTML.should.equal('Boosted!')