Problem/Motivation
We have a view that returns several related nodes which used entity view attachments (EVA) to pull in related audio media. Unfortunately, all these entities would cause unacceptably long page loads, so I off-loaded the EVAs into Views AJAX calls.
We now have a DIV the end-user clicks for each media to execute the View AJAX to load that audio player:
/**
* Attaches an on-click event allowing us to load the video_media_evas:smallest
* view into a div with the classes "av_ajax_player" and "js-view-dom-id-av-player-{{nid}}"
* with the node's ID in the data-nid attribute.
* E.g. `<div class='av_ajax_player js-view-dom-id-av-player-{{nid}}' data-nid={{nid}}>PLAYER!</div>`
*/
(function (Drupal, once) {
Drupal.behaviors.ajaxViewDemo = {
attach(context) {
once('attach-player', '.av_ajax_player', context).forEach(
element => {
// Pull node ID from div.
var nid = element.attributes['data-nid'].value;
// Everything we need to specify about the view.
var view_info = {
view_name: 'video_media_evas',
view_display_id: 'smallest',
view_args: nid,
view_dom_id: 'av-player-' + nid
};
// Details of the ajax action.
var ajax_settings = {
submit: view_info,
url: '/views/ajax',
element: element,
event: 'click'
};
// Have drupal/ajax attach the on-click event.
Drupal.ajax(ajax_settings);
}
);
},
};
}(Drupal, once));
The client asked if we can have the page go ahead and just run each view AJAX call right away instead of making the user click the DIV. Unfortunately, simply changing my event: 'click' line to event: 'load' (or 'onload') doesn't work because, as far as I can tell, the onload event only works if linked to the document or window.
Am I missing something obvious that would allow Drupal.ajax to load the audio players right away? Most of the documentation assume forms or links, so I'm not finding anything that quite matches my use case.