The Community forums are being phased out in favor of a new Slack group.
Add your email address below to get an invitation to join the community slack group

Slack Signup
Newsletter Optin
Help Desk

Using Axios.js to replace jQuery ajax call

Labels

This Discussion is public

Notifications

I am using Vue and WordPress Rest API to create a website, I am also using Formidable Form as my form plugin.

In order to render the form by using JavaScript, I read this documentation , which is using jQuery. I copied the code and it worked fine with ajax submission.

But since I already used another JavaScript library called Axios to perform async request in this website, I want to replace the jQuery code in that document with vanilla JavaScript and Axios, then the ajax submission didn't work anymore,  all the submission redirected me to "http://mywebsite/wp-admin/admin-ajax.php?action=frm_forms_preview&form=contact-form" this address. Form submission still work, they are just not ajax submission though.

Just wondering if I want to submit the form with ajax, do I have to use jQuery?

Also, if I use formidable form API to include forms, each form will include jQuery for itself, which means if you have multiple forms in one page, you will include many jQuery js files in that page, which is very bad practise, any suggestions about how to get rid of those duplicated jQuery files and only includes it once?

Cheers

jQuery is simply a wrapper library for vanilla Javascript that makes things easier to code. Ajax can be invoked from vanilla Javascript, but it's a lot more complicated. Vanilla JavaScript requires you to use XMLHttpRequest() because there is no Ajax function. Maybe this will help you: https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery

Thanks Victor, just found the problem by myself, in the document , it's using jQuery html() function to render out the content, the magic of this function is that it also executes the script inside the content. But when I tried to rewrite the code using vanilla JavaScript, the innerHTML to render the content, innerHTML won't execute the script inside the content. The problem here is not the AJAX.

Cheers

Discussion closed.