How to call view block on click?

Question

I have a page/node that contains 15 view blocks, each view block has many fields and all of this causes the page to load really slow.

How do I load the view block only when I need it? for example I would click a button/div (venue) then the view block venue will load instead of invoking all of the view blocks on the template and letting it load all at once.

UPDATE: I tried using ajax but it's not working even though I turned the ajax on the view block.

This the code I used:

JS:

$(document).ready(function(){
$("#getvenue").click(function(){
    $.ajax(
    Drupal.settings.basePath + 'views/ajax',
    {

    view_name: 'custom_package_form',view_display_id: 'block_56'
    },

    function(response)
    {
        if (response[1] !== undefined) 
        {
            var viewHtml = response[1].data;
            $("#output-venue").html(viewHtml);

            Drupal.attachBehaviors();
        }
        else {
            $("#output-venue").html("NONE");
        }


    });
    });
 });

Node Venue TPL:

<button id="getvenue"> GET VENUE </button>
<div id="output-venue"></div>

Nothing happens, I tried alerting the var viewHtml to see if it has something, the alert only shows null.

What's wrong with the JS? Can someone point me to the right direction?

Thank you in advance!

Answer 1

Try this code

$.ajax({
    url: Drupal.settings.basePath + 'views/ajax',
    type: 'POST',
    dataType: 'json',
    data: 'view_name=custom_package_form&view_display_id=block_56',
    success: function(response) {
      var output = response[1].data;
      $("#output-venue").html(output);
    },
    error: function(data) {
        alert('An error occured!');
    }
});

Answer 2

You need to try this module ajaxblock, I have used it with ubercart for building e-commerce site.

Permits to load some blocks by additional AJAX request after loading the whole cached page when the page is viewed by anonymous user. It is suitable for sites which are mostly static, and the page caching for anonymous users is a great benefit, but there are some pieces of information that have to be dynamic.