How to incorporate AJAX into Webflow for popup DIVs

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)

​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.

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

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?

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

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

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>
1 Like

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.

3 Likes

Thanks for your help!!!

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!

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