All geek questions in one place

AjaxComplete / ajaxStop / ajaxSuccess does not fire

I appreciate any help. I am new to jQuery / AJAX with a little experience and I went crazy trying to figure out why I can't figure it out.

I am writing an application on a Facebook page that has user access rights and uploads video to the page. All this works great and dandy. This is not so much a Facebook API related issue as an ajax problem (at least I think).

Basically, I am trying to gain control over the IN SOME WAY page after the user uploads the video. I use the [malsup jQuery Form Plugin] plugin [1] to get the resulting page (which is a Facebook page displaying return JSON values) in a hidden iframe.

I can run ajaxStart, and I tested this by changing the background color or by printing a warning message when I click Download. However, when the download completes (and it completes successfully), NOTHING ELSE HAPPENS. The returned JSON values ​​are loaded into a hidden iframe and the page is there. I tried to get ajaxComplete, ajaxStop and ajaxSuccess to run, but none of them for any reason.

So here is what I am trying to do: - I want to redirect the user or make hidden content after the file has finished loading. I don’t even care if there are any errors. I just need SOMETHING to happen. I use the jQuery Form plugin because I, unfortunately, are not advanced enough to understand how to use this value and do something with it, but if someone can direct me in the right direction, it will 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!

+6
source share
3 answers

This means that you are getting an Ajax error. I do not see an error handler in your code. Could you try adding an error handler like this:

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

I played with file downloads, and there is a complex beast because of all the security that browsers protect for users ’file systems and something else.

Due to your problem, I think there is a good chance that your AjaxForm jQuery plugin is not connecting correctly to the global Ajax state for jQuery. Even if that were the case, I would say that using Ajax's global state is a bad design. If you add any other ajax requests to this page, your functions are ajaxComplete, ajaxStop, etc. Will start to be called.

Your best approach is to use the callbacks provided by the AjaxForm plugin. Let's focus on this first part of your code.

It works?

  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"); });

Wherein:

 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.

0
source

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

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

You can add this to your .js file.

0
source

Source: https://habr.com/ru/post/900398/

More articles:


All Articles