How to call view block on click? 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:

&lt;button id="getvenue"&gt; GET VENUE &lt;/button&gt;
&lt;div id="output-venue"&gt;&lt;/div&gt;


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!
Try this code

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