For some hours now, I am trying to accomplish the following scenario:
I have a views_slideshow that uses the cycle plugin, it shows 3 slides at a time that each contain a title, body, image and read more button. Read more button shows a modal window (twitter bootstrap) popup.
Since views_slideshow is not responsive out of the box, I am trying to create an AJAX mechanism that loads the correct view display, based on the width of the screen.
I have created 2 views displays in my slideshow view.
- One showing 3 slides
- One showing just 1 slide.
I created a small block that contains an AJAX wrapper (div) that I will fill with the correct view, based on the width.
My block:
function _topics_block_render() {
drupal_add_js(drupal_get_path('module', 'my_module').'/js/topics_block.js');
return '<div id="topic-ajax"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></div>';
}
My JS file:
(function ($) {
var checked = false;
Drupal.behaviors.topics_block = {
attach: function (context, settings) {
var width = $(window).width();
if (width <= 768) {
var size = '1_by_1';
}
else {
var size = 'default';
}
var url = Drupal.settings.basePath + '/get-topics/' + size;
$.get(url, function (data) {
$('#topic-ajax').html(data);
});
if (checked == false) {
checked = true;
Drupal.attachBehaviors();
}
}
};
})(jQuery);
My AJAX page callback
function topics_get_topics($size='default') {
$view = views_embed_view('topics', $size);
return print render($view);
}
As soon as I load the view into my page manager page without AJAX all is working perfectly fine.
Anyone ever tried to accomplish anything like this?
As a sidenote, I am not using owl carousel because of a JS conflict with the Bootstrap modal window popups...
Many thanks in advance
EDIT
The questions does not appear to be a duplicate of How to load and display a view with Ajax in Drupal 7?
I have tried the proposed solution there, but the result is exactly the same. The view is shown properly, but the slideshow does not work.
Some additional hours of debugging have led me to figure out that the Drupal behaviors are actually being reattached properly, but Drupal.settings.viewsSlideshowCycle[fullId]; is not being called properly. When you investigate Drupal.settings.viewsSlideshowCycle, you will see that it contains all the view id's from slideshows on the page. That is not being updated properly after the ajax event.
The only extra thing that is worth mentioning, is that somehow the Quicktabs module seems to manage to load the views_slideshow view via AJAX.