Open links in modal pop-up page

Sorry for my late reply.

You can change the markup tags style at each rendered columns by adding a filter hook since version 2.
Since I describes way for this approach ASAP, please wait.

thank you,

Sorry to keep you waiting.
I’ll immediately explain as follow;

Firstly, it is a way to add a link to a specific column of the displayed table by the shortcode. You can be achieved by adding a filter hook as described below. The place where you add is in the “functions.php” of your theme.

function custom_column_definitions( $columns, $shortcode_name, $table ) {
  if ('wp_post' === $table || 'cdbt-view' === $shortcode_name) {
    foreach ($columns as $_i => $_column) {
      if ('post_title' === $_column['property']) {
         $_custom_column_renderer = '\'<a href="\' + rowData.'. $_column['property'] .' + \'" class="myCustomModal">\' + rowData.'. $_column['property'] .' + \'</a>\'';
         $columns[$_i]['customColumnRenderer'] = $_custom_column_renderer;
         break;
      }
    }
  }
  return $columns;
}
add_filter( 'cdbt_shortcode_custom_columns', 'custom_column_definitions', 10, 3 );

Then, add the process to open the modal dialog into JavaScript side.
For example, how about you like follow.

function custom_footer(){
echo <<<EOH
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body"></div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
jQuery(document).ready(function($) {
  $('.myCustomModal').on('click', function(event){
    event.preventDefault();
    $('#myModal').find('.modal-body').html('<embed src="' + $(this).attr('href') + '"></embed>').end().modal('show');
  });
});
</script>
EOH;
}
add_action('wp_footer', 'custom_footer', 99);

Please try it.

Hi,

I haved added custom_column_definitions function in my theme’s function.php. Can you please let me know what change is required in cdbt view shortcode?

I will explain in more detail the below full code.

function custom_column_definitions( $columns, $shortcode_name, $table ) {
  if ('{your_table_name}' === $table || 'cdbt-view' === $shortcode_name) {
    foreach ($columns as $_i => $_column) {
      if ('{column_name}' === $_column['property']) {
         $_custom_column_renderer = '\'<a href="\' + rowData.'. $_column['property'] .' + \'" class="myCustomModal">\' + rowData.'. $_column['property'] .' + \'</a>\'';
         $columns[$_i]['customColumnRenderer'] = $_custom_column_renderer;
         break;
      }
    }
  }
  return $columns;
}
add_filter( 'cdbt_shortcode_custom_columns', 'custom_column_definitions', 10, 3 );

function custom_footer(){
echo <<<EOH
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body"></div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
jQuery(document).ready(function($) {
  $('.myCustomModal').on('click', function(event){
    event.preventDefault();
    $('#myModal').find('.modal-body').html('<embed src="' + $(this).attr('href') + '"></embed>').end().modal('show');
  });
});
</script>
EOH;
}
add_action('wp_footer', 'custom_footer', 99);

• {your_table_name}: Table name that you want to operate.
• {column_name}: Column name that you want to add a link. (In that column must be stored URL)

Note: the shortcode does not have to change anything.

Thanks a lot – it’s working well now