# Content does not load in modal when using Raw HTML and content grid carousel \[FIX INCLUDED\]

**URL:** <https://community.wpbeaverbuilder.com/t/content-does-not-load-in-modal-when-using-raw-html-and-content-grid-carousel-fix-included/17957>\
**Category:** Beaver Builder\
**Created:** [November 15, 2023, 12:06pm UTC](https://community.wpbeaverbuilder.com/t/content-does-not-load-in-modal-when-using-raw-html-and-content-grid-carousel-fix-included/17957 "2023-11-15T12:06:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jerome](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/j/a587f6/32.png) [@jerome](https://community.wpbeaverbuilder.com/u/jerome)\
**Post date:** [November 15, 2023, 12:06pm UTC](https://community.wpbeaverbuilder.com/t/content-does-not-load-in-modal-when-using-raw-html-and-content-grid-carousel-fix-included/17957/1 "2023-11-15T12:06:56Z")

</div>

### How to reproduce

Using PowerPack version 2.33.2, create a content grid and use layout _Carousel_. Add a trigger class to each post item (we are doing this by using a shortcode in _Custom content_ and defining the post item structure in `functions.php`).

Then create a PowerPack modal, set the _Trigger_ to _Custom Element Click_ and enter the class you defined above.

In _Content_ set _Type_ to _Raw HTML_, and in the box below enter your HTML with the required comment as defined [in this article](https://wpbeaveraddons.com/docs/powerpack/modules/modal-popup-box/show-post-content-in-modal-popup-box/):

```auto
<!-- pp-modal-post-template -->
[example_carousel_popup]

```

Then try clicking one of the posts in the carousel. The modal will show with the loader icon but the ajax never triggers, however **it does if the layout is set to _Grid_ instead of _Carousel_**.

### Proposed fix

The carousel is missing the _data-id_ attribute, so the modal content returns before the ajax request is triggered at **modules/pp-modal-box/js/frontend.js:139**.

Change **modules/pp-content-grid/includes/post-carousel.php:25** from:

```auto
<div class="pp-content-post pp-content-carousel-post pp-grid-<?php echo $settings->post_grid_style_select; ?> <?php echo join( ' ', get_post_class() ); ?>"<?php BB_PowerPack_Post_Helper::print_schema( ' itemscope itemtype="' . PPContentGridModule::schema_itemtype() . '"' ); ?> data-hash="pp-post-<?php echo $post_id; ?>">

```

to:

```auto
<div class="pp-content-post pp-content-carousel-post pp-grid-<?php echo $settings->post_grid_style_select; ?> <?php echo join( ' ', get_post_class() ); ?>"<?php BB_PowerPack_Post_Helper::print_schema( ' itemscope itemtype="' . PPContentGridModule::schema_itemtype() . '"' ); ?> data-hash="pp-post-<?php echo $post_id; ?>" data-id="<?php echo $post_id; ?>">

```

---

<div class="post-metadata">

**Author:** ![pross](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/pross/32/883_2.png) [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Post date:** [November 15, 2023, 3:28pm UTC](https://community.wpbeaverbuilder.com/t/content-does-not-load-in-modal-when-using-raw-html-and-content-grid-carousel-fix-included/17957/2 "2023-11-15T15:28:47Z")

</div>

You should probably let the PowerPack authors know about this.

---

<div class="post-metadata">

**Author:** ![jerome](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/j/a587f6/32.png) [@jerome](https://community.wpbeaverbuilder.com/u/jerome)\
**Post date:** [November 15, 2023, 3:30pm UTC](https://community.wpbeaverbuilder.com/t/content-does-not-load-in-modal-when-using-raw-html-and-content-grid-carousel-fix-included/17957/3 "2023-11-15T15:30:02Z")

</div>

Ah apologies, I thought PowerPack was a sub-plugin of Beaver Builder.

---

<div class="post-metadata">

**Author:** ![pross](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/pross/32/883_2.png) [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Post date:** [November 15, 2023, 3:30pm UTC](https://community.wpbeaverbuilder.com/t/content-does-not-load-in-modal-when-using-raw-html-and-content-grid-carousel-fix-included/17957/4 "2023-11-15T15:30:57Z")

</div>

No worries 🙂 Im sure they will be delighted with your fix too

---

<div class="post-metadata">

**Author:** ![system](https://community.wpbeaverbuilder.com/uploads/default/original/2X/9/9db1b183a7ea1efa26199a2a2b3511d742473dae.png) [@system](https://community.wpbeaverbuilder.com/u/system)\
**Post date:** [November 17, 2023, 3:31am UTC](https://community.wpbeaverbuilder.com/t/content-does-not-load-in-modal-when-using-raw-html-and-content-grid-carousel-fix-included/17957/5 "2023-11-17T03:31:45Z")

</div>

This topic was automatically closed 36 hours after the last reply. New replies are no longer allowed.