Wait for ajax data load

Question

I have a grid that pulls data from an ajax call and a video player. I'm trying to play the video after the data is loaded into the grid(DevExtreme.DataGrid). How do I do that?

var isLoaded = false;
        $.ajax({
            type: 'GET',
            url: '?handler=GetData&StartTime=' + eventStartTime + '&EndTime=' + eventEndTime,                
            success: function (response) {
                var obj = jQuery.parseJSON(response);
                var _dataGrid = $("#eventGridData").dxDataGrid("instance");
                _dataGrid.option('dataSource', obj);
                _dataGrid.reload();
                _dataGrid.refresh();
                isLoaded = true;
            },
            error: function (error) {
                alert("Error: " + error);
            }
        });
        //this needs to kick in after the data is loaded into the grid and I do a refresh(see above)
        if (isLoaded) {  
            //fetch matching video(by timestamp)
            playbackPlayer.connect({
                address: '127.0.0.1',
                port: '25200',
                timestart: timestart from the first record of the datagrid,
                timeend: timeend from the first record of the datagrid
            });
            playbackPlayer.play();
        }

Add the code to play the video after the line `isLoaded = true;` — VLAZ, Jun 24 '21 at 20:35
Would you accept a Plain JavaScript answer? Without jQuery (it makes me feel kinda sick). — Ernesto Stifano, Jun 24 '21 at 20:35
@ErnestoStifano jQuery has had [what amounts to promises](https://api.jquery.com/category/deferred-object/) since before there were promises. The return value of `$.ajax()` is fully promise compliant, too. I don't really see how jQuery changes things all that much compared to vanilla. You'd just be switching `$.ajax` for an equivalent `fetch()` call - the actual handling of the result would be barely different. — VLAZ, Jun 24 '21 at 20:43
How do I do this in plain JavaScript? A sample code would be helpful. I tried using .done of the ajax request, but didn't work. — SoftwareDveloper, Jun 24 '21 at 20:49
@SoftwareDveloper Move the code that is in the if-statement, after (or instead of) the `isLoaded = true;` line. — Ivar, Jun 24 '21 at 20:52
Click anywhere in the `isLoaded = true;` line -> press the **End** key to go to the end of the line -> Press **Enter** to go to a new line -> add the video playing code there. — VLAZ, Jun 24 '21 at 20:53
@VLAZ exactly, it would be barely different, so why use jQuery on the first place? Modern JavaScript made jQuery redundant/useless. IMHO. And I think it is still being used by entry-level developers because of an unfair historical fear to Plain JavaScript. (Btw, I would use `XMLHttpRequest` and not `fetch` for compatibility reasons). — Ernesto Stifano, Jun 24 '21 at 20:53
@ErnestoStifano IE11 still exists. Old projects still exist. jQuery is still shorter and fairly minimal size if you want something that's more expressive than vanilla but not a full-blown framework like Vue or Knockout and above. I'm not much into jQuery myself but I don't really see much problem with it if the code is already there. It's changing one line instead of re-writing the whole thing *and* introducing potential bugs in the process. — VLAZ, Jun 24 '21 at 21:00

SoftwareDveloper · Accepted Answer · 2021-06-25T15:11:33.823

I tried it this way using jQuery and it seems to be working:

$.when(
$.ajax({
            type: 'GET',
            url: '?handler=GetData&StartTime=' + eventStartTime + '&EndTime=' + eventEndTime,                
            success: function (response) {
                var obj = jQuery.parseJSON(response);
                var _dataGrid = $("#eventGridData").dxDataGrid("instance");
                _dataGrid.option('dataSource', obj);
                _dataGrid.reload();
                _dataGrid.refresh();
                
            },
            error: function (error) {
                alert("Error: " + error);
            }
        })
).then.function(){ 

            //fetch matching video(by timestamp)
            playbackPlayer.connect({
                address: '127.0.0.1',
                port: '25200',
                timestart: timestart from the first record of the datagrid,
                timeend: timeend from the first record of the datagrid
            });
            playbackPlayer.play();
});

I still have to work on playing the video only if data is available in the grid. I think DevExtreme's datagrid has a method onLoadingChanged that would indicate that the data has been loaded.

Wait for ajax data load

1 Answers1