How to incorporate AJAX into Webflow for popup DIVs

Design help Custom code
1

Hello Webflow Community,

I am trying to incorporate using AJAX to populate a popup DIV for a modal popup from content from a CMS-generated webpage.

Here is the homepage where the testimonials will live: geauxfresh.webflow.io – scroll down to the “Client Testimonials” section and view/click on each testimonial so you can see what I’m trying to do.

Here is some sample content that I want to load into the popup DIV: http://geauxfresh.webflow.io/testimonials/linda-vaccaro-reed. I’m trying to grab all of the content from “testimonial-source-div” that’s located in that webpage and load it into the popup on my homepage: http://geauxfresh.webflow.io into the “testimonial-target-div” popup DIV.

I also need some way to store the testimonial URL (from the CMS database) into a element so the script can reference this URL and load the correct testimonial into the popup DIV.

Simple enough? :wink:

Can you point me to some “Using AJAX with Webflow and pulling from the CMS-generated webpages” examples? :smiley:

Here is my public share link: LINK
(how to access public share link)

2

​From what it sounds like, you may be able to achieve your goal with a popup that has a dynamic list in it that’s filtered by tags (item references)
​
Note: this is a workaround as we cannot have nested dynamic lists yet.

3

Thanks for responding to me.

Filtered by tags?

I don’t see that as an option – how do I go about doing this?

Thanks

Mike

4

So are you saying that loading the specific detail page into the container DIV by way of AJAX is not possible right now using Webflow?

5

Hi @PCGear, I believe you can use AJAX with custom code. @bart, do you have any insight on how to properly go about this?

6

Modal popup structure:

CSS

.testimonials-modal-bg {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 1010;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.42);
}

.container {
  position: relative;
  top: 50%;
  padding: 30px;
  background-color: white;
  box-shadow: black 0px 0px 15px -4px;
  -webkit-transform: translate(0px, -50%);
  -ms-transform: translate(0px, -50%);
  transform: translate(0px, -50%);
}

.modal-container {
  margin-top: 30px;
}

Open modal interaction

245×533 23.6 KB

Close modal interaction

Script

<script>
Webflow.push(function() {

  /* Config */
  var trigger = $('.testimonial-view-button');
  var modalcontainer = $('.modal-container');

  /* Awesome code */
  trigger.click(function(e) {
    e.preventDefault();
    
    var reflink = $(this).attr('href');

    $.ajax({
      url: reflink,
      success: function(data) {
        data = $(data).find('.testimonial-source-div');
        modalcontainer.html(data.html());
      }
    });
  });
  
});
</script>
7

I have a bookmark folder that I use for useful Webflow tricks and tips.

Seems @bart’s name is associated to a lot of them.

10

Thanks for your help!!!

11

The code automatically takes the url from your CMS-generated buttons. Hope it is working for you :) Let me know if you need any other help!