Attached view ajax call (lazy load) with exposed filters

Question

I'm using views with a main view and an attachment to put 2 views on a single page. Each view is in it's own Bootstrap togglable tab. Because I don't know how many people will actually switch to the non-default tab, I'd like to wait to load that view until it's needed, then load it via ajax.

Is there any way to do this within the Views UI, or is it time for custom coding? This post is kind of old, but is that the best method for executing an ajax call to render a view?

Edit: A complicating factor is that I need to include exposed filters, which also need to fetch the data via Ajax. Right now, the filters work with the second tab, but not the first. I believe this is because Quicktabs creates multiple sections with .view-dom-id-<settings.view_dom_id>, which is the selector used in Views js/ajax_view.js.

Any solutions that work with exposed filters and Ajax?

Answer 1

U can use quicktab module for the same. Create Tab with it, and select your view which u want to use. After that there is an option to check how to load content of the tab, u can either choose to load at once, or on click of tab using ajax.

Answer 2

You could make the other view a page view so that they all have urls

then using the Ajax .load() function

(function ($) {
   $("#Tab1").click(function(){
     $("#Area").load("/view1URLgoesHERE");
   });
   $("#Tab2").click(function(){
     $("#Area").load("/view2URLgoesHERE");
   });
})(jQuery);

if you want an animated loading image add:

.html('<center><img src="/loading.gif"></center>').load("/view1URLgoesHERE"); 

before the .load