When using the WP Job Manager Search and Filtering plugin, there may be a situation where you want to auto populate a field using JavaScript, or perform some other kind of custom handling on your site, based on when a specific field loads, or before/after initialization. As of version 1.5.1 or newer, there are now events you can use specifically for this!
Trigger Search
If you want to trigger a search (without using normal .change() calls on the actual inputs, you can easily do so with an event. This event is tied to the div element that has wpjmsf-section-1234-inner ID on it (where 1234 is the section ID) and will trigger a search update (or form submission if set to “Is Form”). If multiple sections are output on the same page for the same type (job or resume), you can trigger on either of them.
Event: wpjmsf:search
Example:
jQuery('#wpjmsf-section-345-inner').trigger('wpjmsf:search');
Field Initialization
There’s two events you can use to know when a field has been initialized, one specific to the field type, and one for any field type. The event will be triggered on document and you can easily hook into it using the examples below:
Below where you see TYPE_SLUG this is just a placeholder, and should be replaced with job or resume (see examples)
Any Field
This event will be triggered for every field when it is initially mounted/initialized.
Event: wpjmsf:TYPE_SLUG:field:loaded
Code that triggers the event:
jQuery( document ).trigger( `wpjmsf:${this.typeSlug}:field:loaded`, {
fieldType : this.field.type,
fieldSource: this.field.fieldSource,
field : this.field,
sectionId : this.sectionId,
searchValue: this.searchValue,
searchValue2: this.searchValue2
} );
Example Usage:
jQuery( document ).on( 'wpjmsf:job:field:loaded', function ( event, data ) {
console.log( 'Field loaded:', data.fieldType );
} );
Specific Field Type
This event will be triggered only for a specific field type
Event: wpjmsf:TYPE_SLUG:field:FIELD_TYPE:loaded
Code that triggers the event:
jQuery( document ).trigger( `wpjmsf:${this.typeSlug}:field:${this.field.type}:loaded`, {
fieldSource: this.field.fieldSource,
field : this.field,
sectionId : this.sectionId,
searchValue : this.searchValue,
searchValue2: this.searchValue2
} );
Example Usage:
jQuery( document ).on( 'wpjmsf:resume:field:text:loaded', function ( event, data ) {
console.log( 'Text field loaded:', data );
} );
General Events
There are also two other generic events, one when the initialization starts (before loading any cache, before performing first initial query), and one after the main init is completed.
Below where you see TYPE_SLUG this is just a placeholder, and should be replaced with job or resume (see examples)
Targets
For these events, they are not tied to the the document like fields are above, they are specifically tied to the listings element. The examples below show for job and resume, they work for either.
Job Element: div.job_listings
Resume Element: div.resumes
Event: init_TYPE_SLUG_listings
Code that triggers the event:
$target.triggerHandler( 'init_TYPE_SLUG_listings', [values, config, page, append] );
Example Usage:
jQuery( 'div.job_listings' ).on( 'init_job_listings', function ( event, data ) {
console.log( 'Init Job Listings', data );
} );
Event: init_TYPE_SLUG_listings_completed
Code that triggers the event:
$target.triggerHandler( 'init_TYPE_SLUG_listings_completed', [values, config, page, append] );
Example Usage:
jQuery( 'div.resumes' ).on( 'init_resume_listings_completed', function ( event, data ) {
console.log( 'Init Resume Listings Completed', data );
} );
Search and Filtering for WP Job Manager
WP Job Manager Field Editor