Add ctools processing for content loaded via ajax

Question

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.

Answer 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);