0

I'm trying to load a slideshow if the browser is a certain screen size - i.e. I don't want the slideshow to load on smaller, mobile screens. The slideshow plugin provides a shortcode:

<?php echo do_shortcode('[metaslider id="8302"]'); ?>

But when I try to load it with .load(), it just spits out the string and doesn't run the php.

So, looking around it seems that there's a couple of posts related to this:

call shortcode in javascript Why might a plugin's 'do_shortcode' not work in an AJAX request?

But unfortunately I don't have a high enough reputation to contribute comments to those, so I'm opening a new question.

I wonder if anyone can help explain this to someone in a very simplified way to someone who is not good familiar PHP?

  • Try to load what with .load()? Please post all of the relevant code. – s_ha_dum Aug 3 '13 at 18:32
  • When I try to load a php file that contains the code above ( <?php echo do_shortcode('[metaslider id="8302"]'); ?> ) Like this: $('.homepage__slider').load('wp-content/themes/mytheme/slider.php'); – Don't Wake Me Up Aug 3 '13 at 18:49
3

You cannot load a file directly like this:

$('.homepage__slider').load('wp-content/themes/mytheme/slider.php');

Also note that WordPress loads jQuery in noConflict mode, so the $ alias does not work.

If you load a file directly none of the WordPress functions will work. You should be using the AJAX API so that everything loads in WordPress context.

You would wrap your processing PHP is a function:

function my_ajax_shortcode_wpse_108874() {
    echo do_shortcode('[metaslider id="8302"]');
    die;
}

Hook that into the AJAX system:

add_action('wp_ajax_my_ajax_shortcode', 'my_ajax_shortcode_wpse_108874()');
add_action('wp_ajax_nopriv_my_ajax_shortcode', 'my_ajax_shortcode_wpse_108874()');

Submit your request to http://site/wp-admin/admin-ajax.php and pass my_ajax_shortcode as an argument when the Javascript makes a request.

var data = {
    action: 'my_ajax_shortcode'
};
jQuery.post(ajax_url, data, function(response) {
    // whatever you need to do; maybe nothing
});

You can set ajax_url similarly to this from the Codex:

add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue($hook) {
    if( 'index.php' != $hook ) return;  // Only applies to dashboard panel

    wp_enqueue_script( 'ajax-script', plugins_url( '/js/my_query.js', __FILE__ ), array('jquery'));

    // in javascript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value
    wp_localize_script( 'ajax-script', 'ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
}
  • Thanks for the detailed post. I'm really quite bad with php and javascript, so to be honest it didn't make a lot of sense to me even though your explanation looks pretty thorough. I did manage to almost get it working - the slideshow loads, but it is glitchy. As if it is not loading all the resources it needs to work properly (images are not correct size, objects that ought to be hidden aren't, etc). I've tried manually adding the plugin javascript and css, but with no joy. – Don't Wake Me Up Aug 4 '13 at 9:05
  • Seems to be nothing to do with resources - if I load two versions of the slider on the same page, this way and the regular shortcode way so that all resources are loaded for sure, the ajax version is still broken. – Don't Wake Me Up Aug 4 '13 at 9:10
  • To be more precise, the ajax version is spitting out a bunch of html in the slide that isn't in the regular shortcode version These include divs with the class of thumbnail, delete slide, input fields for captions, etc - almost as if it is an admin version of the slide. – Don't Wake Me Up Aug 4 '13 at 9:28
  • If there is an "admin" version of the slideshow and that is loading you are going to need to locate the code that controls that. It would be loading something different on is_admin() === true I assume, but all AJAX API requests are "admin". – s_ha_dum Aug 4 '13 at 15:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.