$.Ajax not available in staticman.js #766

sidharthramesh · 2021-01-19T09:00:08Z

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?

beautiful-jekyll/_includes/staticman-comments.html

Lines 75 to 81 in fe0a48e

    
           <!-- doing something a bit funky here because I want to be careful not to include JQuery twice! --> 
        
           <script> 
        
             if (typeof jQuery == 'undefined') { 
        
               document.write('<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></scr' + 'ipt>'); 
        
             } 
        
           </script> 
        
           <script src="{{ "/assets/js/staticman.js" | relative_url }}"></script>

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.

beautiful-jekyll/assets/js/staticman.js

Lines 13 to 41 in fe0a48e

    
           {% assign sm = site.staticman -%} 
        
           var endpoint = '{{ sm.endpoint | default: "https://staticman3.herokuapp.com/v3/entry/github/" }}'; 
        
           var repository = '{{ sm.repository }}'; 
        
           var branch = '{{ sm.branch }}'; 
        
           $.ajax({ 
        
             type: $(this).attr('method'), 
        
             url: endpoint + repository + '/' + branch + '/comments', 
        
             data: $(this).serialize(), 
        
             contentType: 'application/x-www-form-urlencoded', 
        
             success: function (data) { 
        
               $('#comment-form-submit').addClass('d-none'); 
        
               $('#comment-form-submitted').removeClass('d-none'); 
        
               $('.page__comments-form .js-notice').removeClass('alert-danger'); 
        
               $('.page__comments-form .js-notice').addClass('alert-success'); 
        
               showAlert('success'); 
        
             }, 
        
             error: function (err) { 
        
               console.log(err); 
        
               $('#comment-form-submitted').addClass('d-none'); 
        
               $('#comment-form-submit').removeClass('d-none'); 
        
               $('.page__comments-form .js-notice').removeClass('alert-success'); 
        
               $('.page__comments-form .js-notice').addClass('alert-danger'); 
        
               showAlert('failure'); 
        
               $(form).removeClass('disabled'); 
        
             } 
        
           }); 
        
           return false;

The text was updated successfully, but these errors were encountered:

daattali · 2021-01-19T15:48:20Z

You're right, slim doesn't support Ajax. This is a bug, you can submit a PR

…

On Tue., Jan. 19, 2021, 04:00 Sidharth Ramesh, ***@***.***> wrote: 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 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#766>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHIQFD5KGUALAMIA7X4233S2VC2ZANCNFSM4WIOJNQQ> .

sidharthramesh · 2021-01-19T16:27:00Z

I saw your comment regarding including jQuery twice. How does this happen? I don't want to include it twice and make the page slower.

daattali · 2021-01-19T16:30:41Z

Generally staticman is included on the page when jQuery is already loaded by beautifuljekyll. But in case you for some reason are using it on a page that didn't load jQuery, we need to load jQuery for staticman

…

On Tue., Jan. 19, 2021, 11:27 Sidharth Ramesh, ***@***.***> wrote: I saw your comment regarding including jQuery twice. How does this happen? I don't want to include it twice and make the page slower. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#766 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHIQFABKRR3ZVICCDVPXKLS2WXGTANCNFSM4WIOJNQQ> .

sidharthramesh · 2021-01-19T16:33:37Z

I like the fact that the pages load fast. However, I'm working on optimising it even more.

Is $.ajax really required here? How about using fetch or axios here instead of the full version of jQuery? Including a very common version of jQuery from a CDN will be another alternative since it is almost a given that the browser will have a copy of it in its cache.

daattali · 2021-01-19T17:12:57Z

I'm not an expert in staticman. You can look at the staticman javascript file to see where/why it's needed

https://code.jquery.com/jquery-3.5.1.slim.min.js is the version that's being loaded and it's the officially recommended CDN by jQuery, are you saying that's not a good CDN?

daattali · 2021-02-04T07:08:25Z

Perhaps @VincentTam has something useful to say here

VincentTam · 2021-02-04T09:11:04Z

When I ported @mmistakes's code, I was using the min version. Tracing back the changes, I see that it has been replaced to a slim version at commit 5991966#diff-e9c677c6d71b6acd8eb0963e0e2a9bd997a86240a3711c2d391c42d18eb12c32.

I'm learning JavaScript, and I'll know $.ajax in a month or so.

Is $.ajax really required here? How about using fetch or axios here instead of the full version of jQuery?

@sidharthramesh AFAIK, it's possible to use Staticman without jQuery. However, @onweru nice work that takes time to digest. Lemme come back to this when I finished rewriting his theme's Wiki page about Staticman.

daattali · 2021-02-04T14:43:50Z

You're right looks like I'm at fault for slim-mifying jquery. When I refactored I noticed that slim version is fine for all the parts of the site that I built, I didn't think to consider staticman. Let us know when you find out

VincentTam · 2021-02-04T16:12:40Z

I respect your decision to use slim, and I like your "minimal" concept in the README. @staticmanlab 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 @onweru 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 · 2021-02-12T14:20:02Z

@sidharthramesh @daattali I fixed the code a few days ago by replacing $.ajax method with fetch() in standard JS. Please verify and merge, so that the reported problem would be fixed.

P.S. Staticman officially updated its website to include setup guide for v3 yesterday. https://staticman.net

sidharthramesh · 2021-02-12T14:29:52Z

Hey @VincentTam thank you! I considered using fetch as well, however not all browsers support it. Especially IE. So perhaps a solution using XHR will be better for comparability? Axios can be another alternative. What do you think @daattali ?

To resolve daattali#766 in an IE-compatible way. :warning: Either merging this PR or daattali#781. Don't merge both. References: 1. https://attacomsian.com/blog/xhr-post-request 2. https://stackoverflow.com/a/10876284/3184351 3. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange

VincentTam · 2021-02-12T17:39:48Z

@sidharthramesh Thanks for suggestion. I prefer your way. I've worked it out. Please verify.

sidharthramesh · 2021-02-12T17:46:30Z

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

VincentTam · 2021-02-12T21:23:13Z

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?

beautiful-jekyll/assets/js/staticman.js

Lines 20 to 33 in ceb994a

    
           var xhr = new XMLHttpRequest(); 
        
           xhr.open("POST", url); 
        
           xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
        
           xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 
        
           xhr.onreadystatechange = function () { 
        
             if(xhr.readyState === XMLHttpRequest.DONE) { 
        
               var status = xhr.status; 
        
               if (status >= 200 && status < 400) { 
        
                 formSubmitted(); 
        
               } else { 
        
                 formError(); 
        
               } 
        
             } 
        
           };

daattali · 2021-05-30T00:33:12Z

I think IE11+/edge is reasonable, anyone using IE10 or below is probably having problems with half the internet, so I wouldn't worry about that. Too bad that IE never implemented fetch support. I'm sorry for the long delay, will look at the PR now

VincentTam mentioned this issue Feb 9, 2021

replaced ajax for compatibility with jQuery slim #781

Closed

VincentTam mentioned this issue Feb 12, 2021

IE & jQuery slim compatible Staticman JS #782

Merged

daattali closed this as completed in #782 Oct 10, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

$.Ajax not available in staticman.js #766

$.Ajax not available in staticman.js #766

sidharthramesh commented Jan 19, 2021

daattali commented Jan 19, 2021 via email

sidharthramesh commented Jan 19, 2021

daattali commented Jan 19, 2021 via email

sidharthramesh commented Jan 19, 2021

daattali commented Jan 19, 2021

daattali commented Feb 4, 2021

VincentTam commented Feb 4, 2021 •

edited

Loading

daattali commented Feb 4, 2021

VincentTam commented Feb 4, 2021 •

edited

Loading

VincentTam commented Feb 12, 2021 •

edited

Loading

sidharthramesh commented Feb 12, 2021

VincentTam commented Feb 12, 2021

sidharthramesh commented Feb 12, 2021

VincentTam commented Feb 12, 2021

daattali commented May 30, 2021

$.Ajax not available in staticman.js #766

$.Ajax not available in staticman.js #766

Comments

sidharthramesh commented Jan 19, 2021

daattali commented Jan 19, 2021 via email

sidharthramesh commented Jan 19, 2021

daattali commented Jan 19, 2021 via email

sidharthramesh commented Jan 19, 2021

daattali commented Jan 19, 2021

daattali commented Feb 4, 2021

VincentTam commented Feb 4, 2021 • edited Loading

daattali commented Feb 4, 2021

VincentTam commented Feb 4, 2021 • edited Loading

VincentTam commented Feb 12, 2021 • edited Loading

sidharthramesh commented Feb 12, 2021

VincentTam commented Feb 12, 2021

sidharthramesh commented Feb 12, 2021

VincentTam commented Feb 12, 2021

daattali commented May 30, 2021

VincentTam commented Feb 4, 2021 •

edited

Loading

VincentTam commented Feb 4, 2021 •

edited

Loading

VincentTam commented Feb 12, 2021 •

edited

Loading