1

I have a search result page where all the searched results are loaded using ajax call. For each result, there is a button which should open a form in the modal.

The code snippet which is loading a button on the search result is as follows:

$build[$entity->id]['footer']['footer-bottom-section']['view-modal-form'] = array(
        '#type' => 'markup',
        '#markup' => l('<span class="glyphicon glyphicon-ok"></span> Get Best Price', 'request/add/'.$space_id.'/'.$entity->id, array('html'=>TRUE,'attributes'=> array('class'=>array('btn','btn-orange', 'pull-right', 'ctools-use-modal')))),
    );

The button is loaded properly on each search result, and it has all the classes provided. But it does not have ctools-use-modal-processed class.

I know the reason since the page is already loaded and results are added to the page through ajax after load finishes, ctools is not finding ctools-use-modal class to process.

I would like to know, how can I trigger ctools to process my ajax loaded search results so that it can add modal form for each searched result?

EDIT: Following is the js function which is calls a custom menu callback function, to load results:

function fetchNext(url, $parent) {
    $parent.append('<div id="space-loading"><span class="glyphicon glyphicon-refresh loading-spin" aria-hidden="true"></span>Loading</div>');
    $.get( url, function( data ) {
        $parent.append( data );
        $('.load-next').bind('inview', function (event, visible) {
            if (visible && !($(this).hasClass('disabled'))) {
                var url = $(this).attr('href');
                fetchNext(url, $(this).parent());
                $(this).remove();
              }
            });
        $('.load-next').click(function (event) {
            event.preventDefault();
            var url = $(this).attr('href');
            fetchNext(url, $(this).parent());
            $(this).remove();
        });
        processAfterLoad();
    }).fail(function() {
        $('#space-loading').text('Error in loading spaces. Please refresh page');
    });
}

This is line which calls above function:

$('.load-next').bind('inview', function (event, visible) {
            if (visible && !($(this).hasClass('disabled'))) {
                var url = $(this).attr('href');
                fetchNext(url, $(this).parent());
                $(this).remove();
              }
            });

Following is the kind of URL which will be called:

/lazyspaces/<Google places api locality>?<lat, lng, geolocation, sort, page>

for e.g.:

/lazyspaces/Thane-West--Thane--Maharashtra--India?lat=19.2444738&lng=72.9814877&geolocation=Thane%20West%2C%20Thane%2C%20Maharashtra%2C%20India&sort=distance&page=2&plain=1&lastdistance=8.80

Menu callback:

$items['lazyspaces'] = array(
        'title' => 'Find a Space',
        'page callback' => 'discover_lazy_spaces',
        'access callback' => 'entity_access',
        'access arguments' => array('view', 'space', 1),
        'file' => 'includes/search.utils.inc',
);

Here discover_lazy_spaces function, extracts get parameters and send it to a query to fetch results from database and then builds result list.

  • How are you loading the search results with ajax? Through a custom script, a module, or some API in core? And what version of Drupal? – Jaypan Feb 9 '17 at 14:32
  • I am using drupal 7. I have created a drupal module which has ajax calls specified in module's js file. – srahul07 Feb 10 '17 at 7:06
  • Please edit the original post and show the JS you are using to embed the new content into the page. I can give you an answer after I see that. – Jaypan Feb 10 '17 at 7:28
  • I have updated my question with codebase. Please review and let me know the solution. – srahul07 Feb 10 '17 at 9:23
1

You need to call Drupal.attachBehaviors() after inserting the new content into the page.

Change this:

$parent.append( data );

To this:

$parent.append( data );
Drupal.attachBehaviors($parent);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.