Automattic / Automattic/WP-Job-Manager
Make ACF compatible, allow for dynamic custom fields through acf_form() function.
- Dominant language
- PHP
- Stars
- 899
- Forks
- 369
- Avg merge
- 11h 37m
- Merged PRs (30d)
- 12
Description
WPJM is not yet compatible with the ACF Pro ([Advanced Custom Fields](https://www.advancedcustomfields.com/)) plugin -- the injection of dynamic custom fields through ACF's `acf_form()` function is not possible.
Job submissions hang on an admin-ajax.php response of `{"success":true,"data":{"valid":1,"errors":0}}`. Summary from the original ticket:
> ACF requires its JS libraries to load prior to the WordPress `get_header()` call on initiation. This is added with `acf_form_head()`. When a form with ACF fields embedded within it via `acf_form(...)` it hijacks the form submit to fire it's own JS validate form. This uses admin-ajax.php and returns a success. On success of this function, ACF then forces the continuation of the original form submission (`job-submit.php`). But also tied to that same form submit - WPJM adds a disabled class to the submit button which kills the submit click so that you can't click the button when in a loading state.
A temporary workaround is to override the WP Job Manager `min.js file`. Remove the `.on('click')` within `job-submission.min.js` after the disabled class is added, then the WPJM form should continue submission with the ACF JS loaded.
The user in the original correspondence would like us to look at testing and implementing their patch to `/assets/js/job-submission.min.js` in WPJM. The original code looks like this:
```
jQuery(document).ready(function(n) {
n(document.body).on("click", ".job-manager-remove-uploaded-file", function() {
return n(this).closest(".job-manager-uploaded-file").remove(), !1
}), n(document.body).on("submit", ".job-manager-form:not(.prevent-spinner-behavior)", function() {
n(this).find(".spinner").addClass("is-active"), n(this).find("input[type=submit]").addClass("disabled").on("click", function() {
return !1
})
})
});
```
**Their modified code, allowing for the job form submission, is:**
```
jQuery(document).ready(function(n) {
n(document.body).on("click", ".job-manager-remove-uploaded-file", function() {
n(this).closest(".job-manager-uploaded-file").remove();
return false;
});
n(document.body).on("submit", ".job-manager-form:not(.prevent-spinner-behavior)", function() {
n(this).find(".spinner").addClass("is-active");
n(this).find("input[type=submit]").addClass("disabled");
});
});
```
Internal reference 1794046-zen. [This post on the ACF forums](https://support.advancedcustomfields.com/forums/topic/acf-and-wp-job-manager-front-end/) from 2016 might also be a useful reference point.
Contributor guide
Research direction
Start in assets/js/job-submission.min.js, focusing on the .job-manager-form submit handler and its interaction with the disabled submit button. Test a job submission containing ACF fields through acf_form() and confirm that ACF's admin-ajax.php validation can continue to the original job-submit.php submission without the form hanging.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, php
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100