Use ajax to render a view - pagination not working

Question

I'm trying to render a view using Ajax, but I can't get the ajax pagination to work. I've found the following code which works, apart from the pagination:

            $.ajax({
                url: '/views/ajax',
                type: 'post',
                data: {
                    view_name: 'stores',
                    view_display_id: 'default',
                    view_args: {},
                },
                dataType: 'json',
                success: function (response) {
                    if (response[1] !== undefined) {
                        $('.store-locator-view-wrap').html(response[1].data);
                        Drupal.attachBehaviors(); // Thought this would do it, but nope
                    }
                }
            });

The links go to /views/ajax?page=1 with the following json:

[{"command":"settings","settings":{"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"rhm_starter","theme_token":"dRce3KwWhWs1ZpnNe6KVUu31mLX8pdVoZ5XixJo8SVI"}},"merge":true}]
::1

Answer 1

The problem here is that the Drupal.settings does not have the proper views key it needs to attach the behaviors if you are loading a view via views/ajax.

There is no good documentation on this, spend alot of time trying to figure it out, but this ended up working. I had to set the views key in the settings manually:

success: function (response) {
    if (response[1] !== undefined) {
        $('.store-locator-view-wrap').html(response[1].data);

        // Set views key based on response data. 
        Drupal.settings.views = response[0].settings.views;
        Drupal.attachBehaviors();
    }
}

I also had to make sure the Views js files had been added to my page:

$views_path = drupal_get_path('module', 'views');
drupal_add_js(
    $views_path . '/js/base.js',
    array(
        'type' => 'file',
        'scope' => 'footer',
        'group' => JS_DEFAULT,
    )
);
drupal_add_js(
    $views_path . '/js/ajax_view.js',
    array(
        'type' => 'file',
        'scope' => 'footer',
        'group' => JS_DEFAULT,
    )
);