How to load an OpenLayers view into the content area with an AJAX link?

Question

I have a link in the side bar that links to a OL view.

I would like to Ajaxify it so the view is loaded into the content area without a page re-load.

I am using the Ajax link example in the Example module and saving the $output at ajax_link_response() with this code:

<?php
...
function ajax_link_response($type = 'ajax') {
  ...
  $view = views_get_view('view-name');
  $view->set_display('display-name');
  $view->exposed_input['myfilter'] = 'filter-value';
  $view->pre_execute();

  // $output = t("This is some content delivered via AJAX");

  $output = $view->render();
  ...

This solution works fine for non OL views but fails to load a OL view into the wrapper div. What am I missing?

Gist files:

• ajax_example.module
• ajax_example.misc.inc

Answer 1

NOTE FROM THE QUESTION'S AUTHOR: This solution works for non OpenLayers views. It fails to build up the wrapper when the view is an OpenLayers though.

So the question remains to be answered.

---

• You have to create a div wrapper where you are supposed to show the ajaxified view content. You have to add the div wrapper in the template file (MYTEMPLATE.tpl.php)
• Create a module that will register the ajax link in hook_menu(). In the callback of the menu item you have to render the view content using ajax_commands.

Sample code:

function MYMODULE_init() {
  // Add the Drupal AJAX library.
  // You can optionally provide a check to add AJAX library only on certain pages.
  drupal_add_library('system', 'drupal.ajax');
}

function MYMODULE_menu() {
  $items = array();

  $items['ajax-link/nojs'] = array(
    'title' => 'TITLE',
    'description' => 'DESCRIPTION',
    'page callback' => 'MYMODULE_ajax_link_callback',
    'page arguments' => array(1),
    'access callback' => PERMISSION,
    'type' => MENU_CALLBACK,
  );

  $items['ajax-link/ajax'] = array(
    'delivery callback' => 'ajax_deliver',
  ) + $items['ajax-link/nojs'];
}

function MYMODULE_ajax_link_callback($ajax) {
  // Check whether this is AJAX callback.
  $is_ajax = $ajax === 'ajax';

  if ($is_ajax) {
    // Your code to obtain view content in HTML format and store it in some variable say $ajax_content.

    $commands = array();

    $commands[] = ajax_command_replace('div.WRAPPER-YOU-ADDED-PREVIOUSLY', $ajax_content);

    return array(
      '#type' => 'ajax',
      '#commands' => $commands,
    );

  }
  else {
    drupal_set_message('Content added');
    drupal_goto();
  }
}

Answer 2

I've had to do this on a Drupal 6 site. The problem is that the settings for the view are output in the header as inline javascript, so you can't just load the div containing the view and expect it to work.

What I had to do was use an ajax call to get the page that has the OL view, grab the div from that containing the view html, then grab the inline js from the header of the page, and run that javascript, then run the OL javascript function that initialises the view.

In short it is a massive PIA.

There are some examples of this working on the individual community pages here

http://www.villagesos.org.uk/communities

..though for the life of me I can't remember which one.

Here's the js snippet that does this anyway, you should be able to work out what's going on, but like I say, it's not a great solution and prob worth looking at something other than the OpenLayers module imo.

// Load content from a remote url into ajax target
/*
Drupal.behaviors.vsosStateLoader.loadUrl = function(State, target) {
  $.ajax({
    type:State.data.type,
    url:State.data.url,
    data:State.data.data,
    success:function vsosAjaxLoaded(response) {
      // Load the individual elements and Drupal classes into our ajax target region
      var content = $('#main-content > *', response).not('h1, .local-tasks');
      target.find('> .content').html(content);
      // Load any Drupal settings - to set map data
      var settings = $(response).filter('script').not('[src]');
      settings.each(function() {
      //check we have a value
      if($(this).html()){
        var setting = $(this).html();
        //parse out html comments as this breaks in IE
        setting = setting.replace("<!--","");
        setting = setting.replace("-->","");
        eval(setting);
      }
      });
      // Load behaviours onto new content
      Drupal.attachBehaviors();
    }
  });
};*/

Answer 3

This is an issue in OL being addressed by one of its maintainers at http://drupal.org/node/1895530.

He is in need of help, if you got some savvy skills on Drupal Ajax / JS framework, please check out the post above and, if possible, give him a hand.