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&height=400px&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>