Running the shortcode inside of an AJAX request
-
As the title suggest I want to run the alm shortcode inside of a ajax request. It seems that the shortcode is not defined inside of the ajax request. Any help here?
-
Do you mean you are loading a page with [ajax_load_more] in the content via Ajax and nothing is happening?
I mean I am making an AJAX call on my page and the alm shortcode is in there, and nothing displays. Here is my code:
main.js
$( '.active-toggler' ).on( 'click', function() { if ( !$(this).hasClass( 'toggler-is-active' ) ) { if ( $( '.all-toggler' ).hasClass( 'toggler-is-active' ) ) { $( '.all-toggler' ).removeClass( 'toggler-is-active' ); } $(this).addClass( 'toggler-is-active' ); } else { if ( $( '.all-toggler' ).hasClass( 'toggler-is-active' ) ) { $( '.all-toggler' ).removeClass( 'toggler-is-active' ); } } var content = $('.template-page-content-container'); $.ajax({ type : 'post', url : "/wp-admin/admin-ajax.php", data : { action: 'active_search_results' }, beforeSend: function() { console.log('beforeSend'); }, success : function ( response ) { content.html( response ); console.log(response); } }); return false; });
functions.php
function isc_active_search_results() { echo do_shortcode( '[ajax_load_more repeater="template_1" post_type="fellows" posts_per_page="8" scroll="false" order="ASC" orderby="title" button_label="Load More Stories"]' ); die(); } add_action( 'wp_ajax_active_search_results', 'isc_active_search_results' ); add_action( 'wp_ajax_nopriv_active_search_results', 'isc_active_search_results' );
page.php
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 template-page-content-container"> <?php echo do_shortcode( '[ajax_load_more post_type="fellows" posts_per_page="8" scroll="false" order="ASC" orderby="title" button_label="Load More Stories"]' ); ?> </div>
You likely need to initiate ALM after loading the page via ajax.
success: function(){ if ($(".ajax-load-more-wrap").length){ $(".ajax-load-more-wrap").ajaxloadmore(); } }
I’m getting a response now and there is a div being created but there is no content inside the div. Here is the response:
<div id="ajax-load-more" class="ajax-load-more-wrap default"><div class="alm-listing alm-ajax " data-repeater="template_1" data-post-type="fellows" data-post-format="" data-category="" data-category-not-in="" data-tag="" data-tag-not-in="" data-taxonomy="" data-taxonomy-terms="" data-taxonomy-operator="" data-meta-key="" data-meta-value="" data-meta-compare="" data-meta-relation="" data-year="" data-month="" data-day="" data-author="" data-post-in="" data-exclude="" data-search="" data-custom-args="" data-post-status="" data-order="ASC" data-orderby="title" data-offset="0" data-posts-per-page="8" data-lang="" data-scroll="false" data-scroll-distance="150" data-max-pages="5" data-pause="false" data-button-label="Load More Stories" data-button-class="" data-destroy-after="" data-transition="slide"></div></div>
I changed the ajax shortcode to be the same exact shortcode as in the page template but it is still returning an empty div. It seems like maybe the loop inside the plugin isn’t functioning properly in the ajax call? I’ve been trying to debug inside the plugin.
Im really not sure.
Are you getting any response i the browser console?What I posted earlier is the response from the browser console.
Are you adding that response to the page?
You need to write that content to the page then fire the ALM init functionThis is my current success:
success : function ( response ) { if ($(".ajax-load-more-wrap").length){ $(".ajax-load-more-wrap").ajaxloadmore(); } content.html(response); console.log(response); }
I need to run the alm init function in the success function?
I know the ajax call and everything is working correctly because I can output simple text to the content area.
i might be wrong but it sounds like you are not appending the <div id=”ajax-load-more”> response to your page.
Are you?
I believe I am, here is what the html of the page looks like after I try to run my ajax.
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 template-page-content-container"> <div id="ajax-load-more" class="ajax-load-more-wrap default"> <div class="alm-listing alm-ajax " data-repeater="default" data-post-type="fellows" data-post-format="" data-category="" data-category-not-in="" data-tag="" data-tag-not-in="" data-taxonomy="" data-taxonomy-terms="" data-taxonomy-operator="" data-meta-key="" data-meta-value="" data-meta-compare="" data-meta-relation="" data-year="" data-month="" data-day="" data-author="" data-post-in="" data-exclude="" data-search="" data-custom-args="" data-post-status="" data-order="ASC" data-orderby="title" data-offset="0" data-posts-per-page="8" data-lang="" data-scroll="false" data-scroll-distance="150" data-max-pages="5" data-pause="false" data-button-label="Load More Stories" data-button-class="" data-destroy-after="" data-transition="slide"></div></div></div>
Oh ok… then that looks fine.
Sorry but I got to head out for the rest of the night… I can have a look again tomorrow.Alright, thanks for the help.
Sorry, forgot to get back to you.
Is it at all possible to have a link to your site for debugging?
- The topic ‘Running the shortcode inside of an AJAX request’ is closed to new replies.