beautiful-jekyll: $.Ajax not available in staticman.js

When trying to submit comments through staticman, the form posts to the same page and results in a 405 not allowed (since github doesn’t allow posts)

The error on the console is:

staticman.js:14 Uncaught TypeError: $.ajax is not a function
    at HTMLFormElement.<anonymous> (staticman.js:14)
    at HTMLFormElement.dispatch (VM494 jquery-3.5.1.slim.min.js:2)
    at HTMLFormElement.v.handle (VM494 jquery-3.5.1.slim.min.js:2)

Maybe the slim version of jQuery doesn’t include ajax? https://github.com/daattali/beautiful-jekyll/blob/fe0a48eea01d0351c8bff7473b5d58482da47da9/_includes/staticman-comments.html#L75-L81

As a result, none of these gets called, and the defaultAction of the form is to post on the same page. Which results in a 405 error. https://github.com/daattali/beautiful-jekyll/blob/fe0a48eea01d0351c8bff7473b5d58482da47da9/assets/js/staticman.js#L13-L41

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 15 (11 by maintainers)

Commits related to this issue

IE & jQuery slim compatible Staticman JS To resolve #766 in an IE-compatible way. :warning: Either merging this PR or #781. Don't merge both. References: 1. https://attacomsian.com/blog/xhr-post-... — committed to VincentTam/beautiful-jekyll by VincentTam 3 years ago

Most upvoted comments

Hey @VincentTam thank you! I considered using fetch as well, however not all browsers support it. Especially IE.

I’m posting links to MDN docs about the browser compatibilities for quick reference.

XMLHttpRequest() constructor: 7
onreadystatechange: 5
readyState: 7
readyState.constants: 9
send: 5
setRequestHeader: 5

I’ve used XMLHttpRequest.DONE in my 2nd proposed PR, so the min version needed is IE9. I prefer readability over a marginal gain of backward compatibility. Who’s using IE8 nowadays?

https://github.com/daattali/beautiful-jekyll/blob/ceb994a4e53283baacd0eb934f0601a267040156/assets/js/staticman.js#L20-L33

VincentTam on Feb 12, 2021

Great work @VincentTam. I’ll be testing it and using this PR on my fork. @daattali please consider merging and closing this issue.

sidharthramesh on Feb 12, 2021

I respect your decision to use slim, and I like your “minimal” concept in the README. @<span>staticmanlab</span> and I would be sad if the jQuery gets fat because of us.

I’ll soon search for the functional difference between the two versions of jQuery. As @<span>onweru</span> has worked out a pure-JS implementation of Staticman integration in his Hugo theme for which I has been invited to a collaborator (c.f. the 2nd external link in my previous comment), it would be nice if I can decipher his code and find a slimmer version. Lemme try this this/next week-end.

VincentTam on Feb 4, 2021