CODEWITHSUNDEEP
ajaxfacebookjqueryfacebook-graph-api
Eric
Eric

Reputation: 77

ajaxComplete/ajaxStop/ajaxSuccess not firing

I appreciate any and all help. I am a beginner with little jQuery/AJAX experience and I have been going crazy trying to figure out why I can't figure this out.

I'm writing a Facebook page application that has the user grant permissions and upload a video to the page. All of this works fine and dandy. This is not so much a Facebook API related issue as it is an ajax issue (at least I think).

Basically, I am trying to gain control of the page IN SOME WAY after the user uploads a video. I am using the [malsup jQuery Form Plugin][1] to have the resulting page (which is a page on Facebook displaying returned JSON values) load in a hidden iframe.

I am able to get ajaxStart to fire, and I've tested this by having it change the background color or print an alert message when I click "Upload". However, when the upload completes (and it does complete successfully), NOTHING ELSE HAPPENS. The returned JSON values load in the hidden iframe and the page sits there. I have tried getting ajaxComplete, ajaxStop and ajaxSuccess to fire, but none of them do for whatever reason.

So overall, here is what I am trying to accomplish: - I want to redirect the user or make some hidden content appear after the file upload completes. I don't even care if there's errors. I just need SOMETHING to happen. - I am using the jQuery Form Plugin because I am not unfortunately not advanced enough to figure out how to use that value and do something with it, but if anyone can steer me in the right direction, that would be appreciated.

And finally, here is my code:

<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script>

<script type="text/javascript"> 
// prepare the form when the DOM is ready 
$(document).ready(function() { 
    var options = { 
        target:        '#output2',   // target element(s) to be updated with server response
    iframeTarget: '#output2', 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 
    }; 

    // bind form using 'ajaxForm' 
    $('#theform').ajaxForm(options); 
}); 

// pre-submit callback 
function showRequest(formData, jqForm, options) { 
    return true; 
} 

// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  {
    alert(responseText); 
} 
</script>

<script type="text/javascript">
jQuery().ready(function(){ 
    $('body').ajaxStart(function() {
        $(this).css("background-color","red");
    });
    $('body').ajaxSend(function() {
        $(this).css("background-color","blue");
    });
    $('body').ajaxComplete(function() {
        $(this).css("background-color","green");
    });
    $('body').ajaxStop(function() {
        $(this).css("background-color","purple");
    });
});
</script>


</head>
<body>


<?php

$app_id = "xxxxxxx";
$app_secret = "xxxxx";
$my_url = "xxxxxx";
$video_title = "xxxxxxxxx";
$video_desc = "xxxxxxxxx";
$page_id = "xxxxxxxx";

$code = $_REQUEST["code"];

if(empty($code)) {
  // Get permission from the user to publish to their page. 
  $dialog_url = "http://www.facebook.com/dialog/oauth?client_id="
    . $app_id . "&redirect_uri=" . urlencode($my_url)
    . "&display=popup&scope=email,publish_stream,manage_pages";

$current_url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];

if ($current_url != $dialog_url)
{
  echo('<script>window.location ="' . $dialog_url . '";</script>');
}


} else {

  // Get access token for the user, so we can GET /me/accounts
  $token_url = "https://graph.facebook.com/oauth/access_token?client_id="
      . $app_id . "&redirect_uri=" . urlencode($my_url)
      . "&client_secret=" . $app_secret
      . "&code=" . $code;
  $access_token = file_get_contents($token_url);

  $accounts_url = "https://graph.facebook.com/me/accounts?" . $access_token;
  $response = file_get_contents($accounts_url);

  // Parse the return value and get the array of accounts we have
  // access to. This is returned in the data[] array. 
  $resp_obj = json_decode($response,true);
  $accounts = $resp_obj['data'];

  // Find the access token for the page to which we want to post the video.
  foreach($accounts as $account) {
       if($account['id'] == $page_id) {
         $access_token = $account['access_token'];
         break;
       }
  }

  // Using the page access token from above, create the POST action
  // that our form will use to upload the video.

 $post_url = "https://graph-video.facebook.com/" . $page_id . "/videos?"
    . "title=" . $video_title. "&description=" . $video_desc
    . "&access_token=". $access_token;

  // Create a simple form  

  echo '<form action=" '.$post_url.' " method="POST" enctype="multipart/form-data" id="theform">';
  echo 'Please choose a file:';
  echo '<input name="file" type="file">';
  echo '<input type="submit" value="Upload" id="button-upload" />';
  echo '</form>';

}
?>

<iframe id="output2" name="output2"></iframe>


</body></html>

Thank you for your help!!

Upvotes: 6

Views: 8736

Answers (3)

georgi
georgi

Reputation: 1

The jquery ajaxSend or ajaxStart throws some kind of an error and the document does not execute ajaxComplete. I tried to fix the bug for quite a while and was only able to find a workaround:

function hideAjaxIndicator() {
    $('#ajax-indicator').hide();
}
$(document).ready(function () {
    setTimeout(hideAjaxIndicator, 1000);
});

You can add this to .js file.

Upvotes: 0

aronzygo
aronzygo

Reputation: 51

It seams you are getting an Ajax Error. I don't see any error handler in your code. Could you try to add an error handler as follows

<script>
    $(document).ready(function(){ 
        $(document).ajaxError(function(e, jqxhr, settings, exception) {
            alert(exception);
        })
    })
</script>

Upvotes: 2

logan
logan

Reputation: 3365

I have played around with file uploads, and there are a complicated beast because of all the security that browsers have for protecting users file systems and whatnot.

On to your problem, I think that there is a good chance that your AjaxForm jQuery plugin doesn't connect properly to the global Ajax state for Jquery. Even if it did, I would say that tapping into the global Ajax state is a bad design. If you add any other ajax requests to this page, then your ajaxComplete, ajaxStop, etc. functions are going to start getting called.

Your better approach is to use the callbacks provided by the AjaxForm plugin. Lets focus on this first part of your code.

Does this work?

    success:       showResponse  // post-submit callback 

...

// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  {
    alert(responseText); 
}

If so, could you replace this:

$('body').ajaxComplete(function() {
    $(this).css("background-color","green");
});

With this:

function showResponse(responseText, statusText, xhr, $form)  {
    $(this).css("background-color","green");
}

I believe that using the success: callback is the intended use of the AjaxForm plugin.

Upvotes: 0

Related Questions