Allow selectors to return no matches.
Opened this issue · 1 comments
I have a selector on an hx-include
that looks like this: input[name=pk]
where the inputs are 0 to N checkboxes. When there are 0 checkboxes I would like the behavior to be the same as if you had N checkboxes where none were selected. The request succeeds but i get this error in the console: The selector "image[name=pk]" on hx-include returned no matches! It would be nice to have a way to disable this error. Would it be possible to get a <selector> optional:true
tag so that these errors don't pollute the console?
One quick solution to your issue may be to put a hidden checkbox somewhere on the page that matches so there is always at least one thing to match to suppress the warning message. kind of annoying but at least it is simple. There is also hx-disable-elt and hx-indicator which have the same code logic that also error with this warning in the console when the CSS selector is not valid or finds nothing.
function findAttributeTargets(elt, attrName) {
let attrTarget = getClosestAttributeValue(elt, attrName)
if (attrTarget) {
if (attrTarget === 'this') {
return [findThisElement(elt, attrName)]
} else {
const optional = attrTarget.slice(-1) === '?'
if (optional) {
attrTarget = attrTarget.slice(0,-1)
}
const result = querySelectorAllExt(elt, attrTarget)
if (result.length === 0) {
if (!optional) {
logError('The selector "' + attrTarget + '" on ' + attrName + ' returned no matches!')
}
return [DUMMY_ELT]
} else {
return result
}
}
}
}
Here is an example of how it could maybe be addressed maybe where <selector>?
is treated as optional with no log error.