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.