Automattic / Automattic/WP-Job-Manager

Make ACF compatible, allow for dynamic custom fields through acf_form() function.

Open
#1,685 5 comments 1 reaction 0 assignees View on GitHub
Third-party Conflict
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.