0

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>
  • it appears your colorbox href in the <a> tag is loading the frontpage as opposed to being relative to the current page; try processing the link without the leading slash (or passing the full url to the current page). Then colorbox will trigger opening the inline div as the modal on the same page. – Anson W Han Dec 22 '17 at 22:33
  • I've tried both options and neither work. I have other inline colorbox links on the page that are not loaded via ajax and they all work and their links show that they go to the same location of "/?width...." – dajuice Dec 23 '17 at 20:06
  • Are there any javascript errors with the page load that are preventing colorbox from initializing? It sounds like an issue with the order in which the script is loading. Alternatively, you could create a custom html-level template for the view page to exclude header and footer, or use css to hide it. – Anson W Han Dec 25 '17 at 20:44
0

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

      }

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.