2

I am trying to get buddypress avatars on a network's main site from a sub-site. The way buddypress does avatars is really involved with loops and fallbacks etc and doesn't consist of any database calls, which would have been straightforward.

Instead I thought maybe I will create a function on my main site to output the user's avatar and then grab it with AJAX. But the cross-domain policy is in effect and I'm having difficulty understanding how to implement JSONP to get around it.

My javascript looks like this:

$('.external-avatar').each(function(){
            var user_id = $(this).data('user_id');
            $.ajax({  
              type: 'POST',  
              url: vars.rootAjaxurl,  
                  data: {  
                  action: 'bp_cross_site_avatar',  
                  user_id: user_id,  
              },  
              success: function(data, textStatus, XMLHttpRequest, user_id){  
                  $(".external-avatar.user-"+user_id).attr('src', data);  
              },  
              error: function(MLHttpRequest, textStatus, errorThrown){  
                // alert(errorThrown);  
              }  
            });  
        });

Is there a way to get a request like this to work?

1

There's two parts to this, the javascript ajax call needs specific variables included:

        $.ajax({
            type: "GET",
            url: SSL_Ajax.ajaxurl,
            cache: false,
            dataType: "jsonp",              
            crossDomain: true,
            data: {
                action : 'ajaxSSL',
                ajaxSSLNonce : SSL_Ajax.ajaxSSLNonce,
                input : $('input[name=title]').val()
            },

            success: function( data ) {
                console.log( 'success' );
                console.log( data );
            },

            complete: function( data ) {
                console.log( 'complete' );
                console.log( data );
            },

            error: function( data ) {
                console.log( 'error' );
                console.log( data );
            }
        });

The important variables here for jsonp are cache,dataType, and crossDomain. Note: when your dataType is jsonp it creates an additional varible 'callback'. Also, by it's very nature, jsonp is type GET.

The other important thing to note is in the wp_ajax_nopriv_{action} and wp_ajax_{action} actions you need to include the callback and access-control header:

header("content-type: text/javascript; charset=utf-8");
header("access-control-allow-origin: *");
echo htmlspecialchars($_GET['callback']) . '(' . $response . ')';

// IMPORTANT: don't forget to "exit"
exit;

I wrote a about using jsonp in WordPress if you want more details.

0

Pass the blog ID of the sub-site to your AJAX callback handler, use switch_to_blog() there and get the data you need.

This way, you can stay on the same site with all front-end processing, while you get the information from the other site with PHP.

  • 1
    Oh! I didn't realize you could do that.. that way I don't even need ajax at all. oh man. – Damon Aug 27 '13 at 3:00
  • 1
    Just reading and it says switch_to_blog() doesn't cover plugins, though :/ – Damon Aug 27 '13 at 12:49
  • What? The function changes the current blog context, no matter where it has been called. Plugin or core is not relevant in this case. – fuxia Aug 27 '13 at 12:52
  • The docs say "Things that aren't switched: plugins" with reference to this discussion – Damon Aug 27 '13 at 13:18
  • @Damon is right, switch_to_blog will only switch DB tables references, the same plugins will still need to be active on the requested site for it to work. so this is a limited solution. Many plugins are not multisite compatible, such as mailpoet's API for example. – Aurovrata Oct 18 '19 at 12:39

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.