3

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.

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.

  • 2
    Please edit your question to provide your full code, in context. Echoing anything directly inside functions.php is going to break things; I'm assuming that's not what you're actually doing. – Chip Bennett Nov 7 '13 at 13:11
  • Please check the edited question – MidhuN Nov 7 '13 at 13:17
  • So, what's the problem? What are you expecting to happen, that's not happening? Or what's happening unexpectedly? – Chip Bennett Nov 7 '13 at 13:21
  • do_shortcode function is not working. it displays '[contact-form-7 id="698" title="Meet The Team Email"]'. not the contact form – MidhuN Nov 7 '13 at 13:23
  • This function is inside functions.php. if I put this is my page template it works correctly as expected. – MidhuN Nov 7 '13 at 13:25
5

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.
  • Thanks for the response. I just realised that this wont work for what I need and I am trying some other way to achieve what I want. I first tried another way but it wasnt working like I wanted. I even tried asking my question here but noone replied. Now I think i will try what I was trying in the first place. Meanwhile if you can help with that I will be most greatful. wordpress.stackexchange.com/questions/121556/… – MidhuN Nov 7 '13 at 14:12

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.