How to execute JS function after successfull ajax call?

Question

I want to demonstrate my window in a full screen.

I have a working function, but I have a problem:

I'm sending an AJAX call after user's click on some button in UI, to get some data and prepare it, after this ajax call (on success I want to demonstrate my data in the full screen, but I can't do that, because it raises an error: Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.

As you understand, I had user action - click on button, but it's not enough, if I' trying to execute fullscreen function in ajax call.

I was trying to use global variable too, to have a state(do I need to show fullscreen or not(it depends on result of response parsing(after AJAX call)), but it doesn't work too.I was trying in this way:

ISFULLSCREEN = false;

function get_ajax() {
    ajax_call ()
    .success(response) {
        if (response.fullscreen) {
           ISFULLSCREEN = true;
        }
    }
 }


function useFullscreen() {
    if (ISFULLSCREEN) {
        use_fullscreen();
    }
}

and my button looks like:

<button onclick="get_ajax();useFullscreen()" value="click me" />

but function useFullscreen runs faster, than the value of ISFULLSCREEN changes to true

Do somebody have any idea how to resolve this issue?

Thanks a lot!

I can't, it raises the same error: "Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.". It was my the first implementation — pivanchy, Jan 23 '16 at 22:36
One suggestion is to put up another button that says something like "Best viewed fullscreen" and have user click that — charlietfl, Jan 23 '16 at 22:43
@charlietfl, maybe, but I don't want to have a lot of buttons on UI — pivanchy, Jan 23 '16 at 22:44
well you can't circumvent the time it takes for the ajax to complete — charlietfl, Jan 23 '16 at 22:48
@pivanchy First have only `get_ajax()` binded to button and on response change the onclick function to `useFullScreen()` and trigger the new onclick event through code. — Avi, Jan 23 '16 at 22:50
@Avi, it looks awful, but I can't see better ideas for now.. — pivanchy, Jan 23 '16 at 22:51
@Avi, hm....I'm running these commands: `$('#previewBtn').unbind('click');$('#previewBtn').bind('click', function() { toggleFullScreen('preview_ad'); });$('#previewBtn').click();`, but it raises the same error again.. — pivanchy, Jan 23 '16 at 23:07
@pivanchy Could you try binding `touch` events instead of click. — Avi, Jan 23 '16 at 23:21
@Avi, I read about this event, and as I understand, it's fine for mobile apps, but I'm working with desktop application — pivanchy, Jan 23 '16 at 23:26
@pivanchy Since you are using jquery you can make use of jquery fullscreen plugin itself with no work around. — Avi, Jan 23 '16 at 23:34
@avi, additional plugins - additional dependencies=additional traffic, what is not so good, in case when there is an implementation without it, using HTML5 — pivanchy, Jan 23 '16 at 23:40
Add async : false to ajax call and call the function useFullscreen on ajax success and remove this from the button onclick event — Jobelle, Jan 24 '16 at 06:10

score 1 · Accepted Answer · answered Jan 23 '16 at 22:44

1

Perhaps in your ajax request, use async: false to make the fetch synchronous, therefore keeping all the execution within the same event (from the user click).

The downside to this is that it may hang the page if it takes a long time

answered Jan 23 '16 at 22:44

Joseph Young

2,758
12
23

it looks like a workaround, but not as a solution, unfortunately – pivanchy Jan 23 '16 at 22:45
The only other way I can think of is that when the user clicks the button, it instantly goes to fullscreen, and then you show some loading or please wait screen while the ajax goes off and completes its action – Joseph Young Jan 23 '16 at 22:47
it's not a solution too, because I don't need to have a fullscreen mode always. I'm parsing a data from AJAX response, and after it I know: do I need a fullscreen or not.. – pivanchy Jan 23 '16 at 22:49
The only other solution I can think of is that you call the AJAX before the button click, on some previous event before hand. I don't think there is any other way – Joseph Young Jan 23 '16 at 22:51
I used async AJAX call, as I haven't too many data from server and it takes not too long. Other solutions were not very useful – pivanchy Jan 25 '16 at 18:53

score 1 · Answer 2 · answered Mar 26 '22 at 13:57

You can use callback function, a callback function is a function passed into another function as an argument, so you can utilize it, and it will execute after your awaited ajax response comes, see below example:

ISFULLSCREEN = false;

function get_ajax(useFullscreenCallback) {
    ajax_call ()
    .success(response) {
        if (response.fullscreen) {
           ISFULLSCREEN = true;
           useFullscreenCallback();
        }
    }
 }


function useFullscreen() {
    if (ISFULLSCREEN) {
        use_fullscreen();
    }
}

get_ajax(useFullscreen);

Reference: Callback Function Mozilla web docs

score 0 · Answer 3 · edited May 23 '17 at 12:31

0

Does this help you?: Run a website in fullscreen mode

The answer basically says that you cannot force a fullscreen change without user interaction but there are some alternate suggestions

edited May 23 '17 at 12:31

Community

1
1

answered Jan 23 '16 at 22:48

SanjanaS801

81
2
9

I was reading this article, but it doesn't help in my situation – pivanchy Jan 23 '16 at 22:50

score 0 · Answer 4 · answered Jan 24 '16 at 06:14

0

Add async : false to ajax call and call the function useFullscreen on ajax success and remove this from the button onclick event

answered Jan 24 '16 at 06:14

Jobelle

2,717
1
15
26

How to execute JS function after successfull ajax call?

4 Answers4