do_shortcode inside AJAX callback

0 Views

I have an AJAX callback function inside my functions.php file, which displays posts in a specific category. 

add_action( 'wp_ajax_ajaxified_function', 'ajaxified_function' );
add_action( 'wp_ajax_nopriv_ajaxified_function', 'ajaxified_function' );
function ajaxified_function() 
{ 
    $post = get_post($_POST['post_id']);
    $feat_image = get_the_post_thumbnail($post->ID);
    $desc_values = get_post_custom_values("designation",$post->ID);
    $title = current(explode(' ', get_the_title($post->ID)));
    if( is_array( $desc_values ) )
    {
     foreach($desc_values as $key => $value );
    }   
    $email_values = get_post_custom_values("email",$post->ID);
    if( is_array( $email_values ) )
    {
        foreach($email_values as $key => $email_value );
    }
    echo '<div id="bloggers_avatar">'.$feat_image.'</div>'.$post->post_.'<div id="bloggers_title">'.$post->post_title.'</div><div id="bloggers_desig">'.$value.'</div><div id="emailid" ><a class="email_link">Email '.$title.'</a></div><br/><div id="postContent">'.$post->post_content.'</div>'; 
    echo '<script>
        jQuery(document).ready(function(){
            jQuery(".email_link").colorbox({inline:true,
               width:400,
               height:600,
               fixed:true,
               href:"#email_id_meet_the_team"
           });
       });
       </script>';
       echo '<div style="display:none">
           <div id="email_id_meet_the_team">
          <div>';    
            echo do_shortcode('[contact-form-7 id="698" title="Meet The Team Email"]');

           echo '</div>
               </div>
          </div>';
      die();
  }

When I use this its just echoing the shortcode instead of showing the contact form.

Read More

I am working on local now. I have a demo which just uses just the ajax, not the colorbox.

You can see a Email link in the biography div. On clicking on that link I want to show a colorbox with the contact form.

Post Views: 0

Related posts

1 comment

  1. The How

    It would be much better and easier if you’d just add the script directly to the main body instead of the AJAX call.

    The same goes with the shortcode result. Just use the shortcode as argument inside wp_localize_script():

    wp_localize_script( 'script-handle', 'pluginObject', array(
    'contactForm' => do_shortcode( '[contact-form-7 id="698" title="Meet The Team Email"]' ),
) );

    Then – inside your jQuery AJAX handler, do whatever you need to do – for e.g. insert the Contact Form.

    ( function( $, plugin ) {
    $.ajax( {
        url  : plugin.ajaxurl,
        data : {
            action         : plugin.action,
            _ajax_nonce    : plugin._ajax_nonce,
            data           : { 
                plugin.contactForm 
            }
        },
        beforeSend : function( d ) {
            console.log( 'Before send', d );
        }
    } )
        .done( function( response, textStatus, jqXHR ) {
            console.log( 'AJAX done', textStatus, jqXHR, jqXHR.getAllResponseHeaders() );
            // this.processAJAXResponse( response );
        } )
        .fail( function( jqXHR, textStatus, errorThrown ) {
            console.log( 'AJAX failed', jqXHR.getAllResponseHeaders(), textStatus, errorThrown );
        } )
        .then( function( jqXHR, textStatus, errorThrown ) {
            console.log( 'AJAX after finished', jqXHR, textStatus, errorThrown );
        } );
} )( jQuery, pluginObject || {} );

    You now should have access to the rendered Form inside your AJAX callback, but as well inside your JavaScript AJAX handler.

    The Why

    IIRC your problem is that AJAX requests are always admin requests – even when public. And as there’s no output of shortcodes on admin pages, there’s nothing than a string return value as well.

    Rule: Never try to run shortcodes inside AJAX or Admin requests.

    Additional notes:

    • Don’t add scripts inside AJAX callbacks. That’s simply not the right thing to do. Pass values – as I explained above – using wp_localize_script().
    • A shortcode normally is just a wrapper for some API. Never use the shortcode – use the APi instead. Greetings from Stephen Harris who just told me in chat that I should point you at that.

Comments are closed.