Using Job Manager plugin within pjax environment

This plugin loads content via ajax on page load. If you’re loading the actual page via ajax too, I don’t think this javascript code will run. I cannot really offer any guidance as I’ve not used pjax before, but you should probably check to see if the scripts are included and loaded on the page, and then have your own javascript to trigger the initial load.

Thanks, could you point me to which scripts I should be looking for?

The main one in my plugin is https://github.com/mikejolley/WP-Job-Manager/blob/master/assets/js/ajax-filters.js

I created a js function to load all of your wp-job-manager scripts after a pjax load, like this:

function jobs() {
$.when(
$.getScript( “/wp-content/plugins/wp-job-manager-applications/assets/css/frontend.css” ),
$.getScript( “/wp-content/plugins/wp-job-manager-career-builder-integration/assets/css/frontend.css” ),
$.getScript( “/wp-content/plugins/wp-job-manager/assets/js/jquery-chosen/chosen.jquery.min.js” ),
$.getScript( “/wp-content/plugins/wp-job-manager-indeed-integration/assets/css/frontend.css” ),
$.getScript( “/wp-content/plugins/wp-job-manager-resumes/assets/css/frontend.css” ),
$.getScript( “/wp-content/plugins/wp-job-manager/assets/js/ajax-filters.min.js” ),
$.getScript( “/wp-content/plugins/wp-job-manager/assets/css/frontend.css” ),
$.getScript( “/wp-content/plugins/wp-job-manager/assets/css/chosen.css” ),
$.getScript( “/wp-content/plugins/wp-job-manager/assets/images/ajax-loader.gif” ),
$.getScript( “/wp-content/plugins/wp-job-manager-indeed-integration/assets/images/jobsearch.gif” ),
$.getScript( “/wp-content/plugins/wp-job-manager/assets/images/company.png” ),
$.Deferred(function( deferred ){
$( deferred.resolve );
})
).done(function(){});
}

The only thing that seems to show up now is the ajax loader gif I believe. Is there anything else that you think I could try?

Any errors in console? You may need to trigger this manually from ajax-filters https://dl.dropboxusercontent.com/s/dwhneucbfacxauw/2015-03-05%20at%2020.30%202x.png?dl=0

No errors, I added what was in the screenshot, my code looks like this now:

function jobs() {
$.when(
$.getScript( “/wp-content/plugins/wp-job-manager-applications/assets/css/frontend.css” ),
$.getScript( “/wp-content/plugins/wp-job-manager-career-builder-integration/assets/css/frontend.css” ),
$.getScript( “/wp-content/plugins/wp-job-manager/assets/js/jquery-chosen/chosen.jquery.min.js” ),
$.getScript( “/wp-content/plugins/wp-job-manager-indeed-integration/assets/css/frontend.css” ),
$.getScript( “/wp-content/plugins/wp-job-manager-resumes/assets/css/frontend.css” ),
$.getScript( “/wp-content/plugins/wp-job-manager/assets/js/ajax-filters.min.js” ),
$.getScript( “/wp-content/plugins/wp-job-manager/assets/css/frontend.css” ),
$.getScript( “/wp-content/plugins/wp-job-manager/assets/css/chosen.css” ),
$.getScript( “/wp-content/plugins/wp-job-manager/assets/images/ajax-loader.gif” ),
$.getScript( “/wp-content/plugins/wp-job-manager-indeed-integration/assets/images/jobsearch.gif” ),
$.getScript( “/wp-content/plugins/wp-job-manager/assets/images/company.png” ),
$.Deferred(function( deferred ){
$( deferred.resolve );
})
).done(function(){
$(window).on( “load”, function( event ) {
$( ‘.job_filters’ ).each( function() {
var target = $( this ).closest( ‘div.job_listings’ );
var form = target.find( ‘.job_filters’ );
var initial_page = 1;
var index = $( ‘div.job_listings’ ).index( target );

if ( window.history.state && window.location.hash ) {
var state = window.history.state;
if ( state.id && ‘job_manager_state’ === state.id && index === state.index ) {
initial_page = state.page;
form.deserialze( state.data );
form.find( ‘:input[name^=”search_categories”]’ ).not(‘:input[type=”hidden”]’).trigger( ‘chosen:updated’ );
}
}

target.triggerHandler( ‘update_results’, [ initial_page, false ] );
});
});
});
}

////
Please let me know if this looks ok. So far, still only the loading image gif is appearing

$(window).on( "load", function( event ) { probably won’t be triggered due to your code, so you’ll need to remove that part and just have the code from within.

Thanks, I removed that part. Still only seeing the loading gif initially. Subsequent pjax loads of the page don’t show anything at all. All the scripts appear to be loading, as well as the portion in the screenshot, anything else I can try?

Are you 100% sure the done() part is running? Add an alert to check. This uses a different method https://stackoverflow.com/questions/10713546/how-to-run-jquery-before-and-after-a-pjax-load

Thanks Mike,

I think you were right, I don’t believe the the script after done() was running. I went ahead and put that script into a different function, no luck still.

One thing I’ve noted — on a pjax load, when I enter the script directly into my browser console, the “showing job” div doesn’t appear with any of the elements inside of it. And the “wp-job-manager-showing-all” class also associated with that div is not showing either (I noticed this class showing on a non-pjax load). Also the “job_listings” div which wraps the whole thing looks to be missing as well.

I have a feeling these are where the issue lies — is there any other js or css I’m not calling? Or

sorry — or some css line I can call post-pjax load?

I think you have them all. If you swap themes to check without pjax you can compare (and also ensure its working without pjax).

The answer in https://stackoverflow.com/questions/10713546/how-to-run-jquery-before-and-after-a-pjax-load has a way to run code after loading.

Thanks Mike,

Yes I have a sandbox with pjax functionality and a live site without that I’m comparing with. Yes I’m aware of the pjax:end event that allows code to run after loading. This is where I have the code of your screenshot now, but still some things not showing.

These two items in particular (comparing with my live site), have no elements in them at all when inspecting the code in my browser.

The “showing_jobs” div and
The “job_listings” ul

Everything else appears to be as it should. Are these two the only elements where ajax loads the content? Anything I can do to get the child elements of these two to render?

These areas are where JM inserts its content which gets loaded via ajax. The:

$( '.job_filters' ).each( function() {

part loops over all jobs shortcodes and triggers the ajax load (`target.triggerHandler( ‘update_results’, [ initial_page, false ] );’). The ajax-filters.js file listens for this event.

Could it be that due to the later loading of the script, the document ready event is never fired? https://github.com/mikejolley/WP-Job-Manager/blob/master/assets/js/ajax-filters.js#L1

Thanks Mike,

I believe you’re right. Comparing the header on the live site (non-pjax) and the dev site (pjax), I believe I can see that the (document).ready isn’t being loaded. Attached two screenshot of the ajax-filters header on both sites:

non-PJAX: https://www.dropbox.com/s/d9yfcthcsoj22pv/WP-Job%20Manager%20non-PJAX%20load.png?dl=0

PJAX: https://www.dropbox.com/s/1ztlvreo8dkra6f/WP-Job%20Manager%20on%20PJAX%20load.png?dl=0

What can I do to get the document ready event to fire on the PJAX load?