Colorbox after ajax load

Question

I've created a custom module that updates content in my page via an ajax call. I tried it do it with only views but it was too complex because I was loading multiple content types based on organic groups.

So I have a view that I'm rendering from code and in that view I have a colorbox trigger. The ajax works and the view gets rendered but I cannot figure out how to properly process the inline-colorbox. Right now it seems to create the colorbox but fills it with default content from the frontpage so I'm not sure what I'm missing.

I re-init the colorbox after the ajax is loaded in the success and it does process the field.

JS Code

(function ($) {
Drupal.behaviors.forums_dashboard = {
attach: function (context) {

  // If changing the select field
  $('#cohort-select-value', context).change(function () {
        var cohort = $(this).val();
        var dataString = "cohort=" + cohort;

        $.ajax({
          url: '/ajax/coaching_summary',
          type: "POST",
          data: {cohort_id: cohort},
          success: function (response) {
            $('#coaching_summary_ajax').html(response);

            //reinit the colorbox
            $('.colorbox-inline').colorbox();
          }
        });
      }
  );
}
}
})(jQuery);

Ajax code in my module:

function forums_dashboard_menu() {
// Ajax callback
 $items['ajax/coaching_summary'] = [
  'title' => 'Update Coaching Summary',
  'page callback' => 'forums_dashboard_update_coaching',
  'access arguments' => ['access content'],
  'type' => MENU_CALLBACK,
 ];
 return $items;
}

function used to print the view is:

print views_embed_view('cohort_user_list','default',$args);
drupal_exit();

here is the html i get after ajax is called

<div class="views-field views-field-colorbox">        
 <span class="field-content">
  <a href="/?width=400px&amp;height=400px&amp;inline=true#colorbox-inline-549561640" class="colorbox-inline cboxElement" rel="">

  </a>
  <div style="display: none;">
   <div id="colorbox-inline-549561640">
    <div class="contact_box"></div>
   </div>
  </div>
 </span>
</div>

Edit: I forgot to add versions Drupal 7.56 Colorbox 7.x-2.13 Views 7.x-3.18

Update: I decided to use a separate page view for the content to load instead of trying to do it inline. Here is the new cleaned up jquery

(function ($) {
Drupal.behaviors.forums_dashboard = {
attach: function (context, settings) {

  // If changing the select field
  $('#cohort-select-value', context).change(function () {
    var cohort = $(this).val();

    $.ajax({
      url: '/ajax/coaching_summary',
      type: "POST",
      data: {cohort_id: cohort},
      success: function (response) {
        $('#coaching_summary_ajax').html(response);
        $('a',context).colorbox();
      }
    });
  });
}}}(jQuery));

The ajax now returns it as follows to create the URL for a colorbox-node link instead which links to the page with the UID as a parameter:

<a href="/user_popup/95?width=400&amp;height=400" class="colorbox-node cboxElement"><div class="left">Test User 1</div><div class="right">100 Hours</div></a>

My problem now is that the first time I click the link it displays the entire page with header/footer instead of just the node content which colorbox-node should be doing. If I close the colorbox and click the link a second time it displays only the node content as expected. The colorbox URL gets updated when its clicked the first time. I'm not sure how to replicate this colorbox process so that it works the first time as expected. Here is the new link after its clicked a first time.

<a href="/user_popup/95?width=400&amp;height=400" class="colorbox-node cboxElement init-colorbox-node-processed-processed"><div class="left">Test User 1</div><div class="right">100 Hours</div></a>

Answer 1

Here is the updated jquery code that renders the colorbox properly the first time:

success: function (response) {
        $('#coaching_summary_ajax').html(response);
        $('.colorbox-node',context).once('init-colorbox-node-processed',function () {
          $(this).colorboxNode({'launch': false});
        });
        $('.colorbox-node',context).colorbox();

      }