Using 'return' with an ajax callback renders an entire page before my content is loaded

Question

I'm developing a module that uses Openlayers maps and Drupal Commerce. When you click on the map, you should see products that relate to those coordinates of where you click. I have this working perfectly.

I've got a 'foreach' inside of my function that creates each product row:

foreach($alldata as $data) {
    $content = '';
    $date = substr($data['_source']['ver_date'], -4);    
    $content .= '<div class="product-row" data-date="' . $date . '" data-id="' . $id . '" data-scale="' . $data['_source']['scale'] . '">';

    $titleString = '';
    $titleString .= $data['_source']['longname'] . ' ';
    $trimmedTitle = strlen($titleString) > 80 ? substr($titleString,0,80)."..." : $titleString;
    $content .= '<span class="title">' . $trimmedTitle . '</span>';

    $content .= '</div>';
    print $content;
}

This works exactly like it should and renders the rows of products exactly like I want.

The problem I am having is that there is an 'Add to Cart' button that was created within another function somewhere else in the site that I have to render in this foreach.

$arr = explode(".", $data['_source']['price']);
$inner_html = '<span class="btn-text">$'.$arr[0].' Print</span><span class="glyphicon glyphicon-shopping-cart"></span>';
$add_to_cart_btn = drupal_get_form('myModule_product_cart_button', $inner_html, (object)$data['_source']);
$content .= '<div class="product-cart">' . drupal_render($add_to_cart_btn) . '</div>';

The button loses it's Ajax properties when I use 'print $content'. So I changed it to 'return $content' and moved it outside the 'foreach'.

I get all of the content properly as well as a working ajax 'Add to Cart' button. However, I also get the entire page template rendered prior to all of my content that I'm returning.

<--- Content Rendered In Div via Ajax --->

Full Empty Page Template
---------------------------
Ajax content formatted properly and working properly

I've tried using ajax_render. I've tried using ajax_command_html. I've tried completely redoing my function and ajax to use drupal.behaviors. Nothing is working to remove that full page from rendering prior to my content. It only happens I when use 'return'. I've also tried adding drupal_page_footer().

Even when I have absolutely nothing in my foreach, if I use 'return $content', I get a full page rendered. And it's not the use of '$content'. I've changed that to other variable namespaces and it still renders an empty page template.

Here is my ajax call:

 $('.products').mousedown(function() {
    $.ajax({
      url: Drupal.settings.myModule.ajaxUrl, 
      method: 'post',
      data: { 
        longtitle : title,
        id : id 
      }, 
      dataType: "text",          
      success: function(data) {
        var markup = '';
        markup += data;

          $('.products-pane').html(markup);

      }
    });   
  }); 

Anyone know what is causing this?

Answer 1

You are missing the Drupal settings that include the Ajax settings, which is why the server doesn't know it should be ajaxified. You should (may) be able to fix it by changing this:

$content .= '</div>';
print $content;

To this:

$content .= '</div>';
$scripts = drupal_add_js();
if (!empty($scripts['settings']))
{
    $settings = '<script type="text/javascript">jQuery.extend(Drupal.settings, ';
    $settings .= drupal_json_encode(call_user_func_array('array_merge_recursive', $scripts['settings']['data']));
    $settings .= ');</script>';
}

print $content . $settings;
drupal_exit();