Shortcode in AJAX popup

by

I am trying to use a shortcode from Ultimate Facebook plugin to display a FB connect button in an AJAX popup and can’t seem to get it work properly.
I searched and used the solution given by djb in this question – Why might a plugin’s ‘do_shortcode’ not work in an AJAX request?, but it worked only partially. Ideally, I want a user to be able to sign in using FB and then save the list to her account. I want to use the plugin instead of embedding direct code because creates a new user in wordpress too when someone uses FB connect.

Procedure to reproduce issue –

  • Go to http://www.ajaymreddy.com/stg/country/india/#
  • Click on Start
  • Select any of checboxes – take care to not click on the text against
    the checkboxes
  • Click on Save button in the popup
    If you are not logged in, the fb connect button should show up. However, only the shortcode text is currently showing up.

Code in functions.php –

//From https://wordpress.stackexchange.com/questions/53309/why-might-a-plugins-do-shortcode-not-work-in-an-ajax-request
add_action( 'init', function() {
  ps_register_shortcode_ajax( 'show_fblogin', 'show_fblogin' );
} );

function ps_register_shortcode_ajax( $callable, $action ) {
  if ( empty( $_POST['action'] ) || $_POST['action'] != $action )
    return;
  call_user_func( $callable );
}

function show_fblogin(){
        if (!is_user_logged_in())
          echo do_shortcode('[wdfb_connect]');
        die ();
}
add_action( 'wp_ajax_show_fblogin', 'show_fblogin' );
add_action( 'wp_ajax_nopriv_show_fblogin', 'show_fblogin' );

Code in ajax file –

$(document).on( 'click', '#saveBtn', function (){
            if (myAjax.loggedin==1)
            {
                    jQuery.ajax({
                    type: 'POST',
                    url: myAjax.ajaxurl,

                    data: {
                            action: 'save_whslist',
                            selected: selected.toString(),
                            whsNonce: myAjax.selectNonce,
                    },
                    success: function(data, textStatus, XMLHttpRequest){
                            selected = [];
                            modal.close();
                            $("input.whsites").prop('disabled', true);
                            $("input.whsites").prop('checked', false);
                    },
                    error: function(MLHttpRequest, textStatus, errorThrown){
                            alert(errorThrown+' fail');
                    }
                    });
            }
            else
            {
                    jQuery.ajax({
                    type: 'POST',
                    url: myAjax.ajaxurl,

                    data: {
                            action: 'show_fblogin',
                            selected: selected.toString(),
                            whsNonce: myAjax.selectNonce,
                    },
                    success: function(data, textStatus, XMLHttpRequest){
                            modal.open({content: "<p>Please login to save your travel list<br /><span>No auto posts on your wall!</span></p>"+data});
                    },
                    error: function(MLHttpRequest, textStatus, errorThrown){
                            alert(errorThrown+' fail');
                    }
                    });
            }
    });

1 Answer
1

Adding the solution for posterity –
I solved it by adding FB.XFBML.parse(); once the AJAX call returned succesfully. Hope this helps.

Leave a Comment