PCGear
(Michael)
November 23, 2015, 7:45pm
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?
Can you point me to some “Using AJAX with Webflow and pulling from the CMS-generated webpages” examples?
Here is my public share link: LINK
(how to access public share link )
thewonglv
(William Wong)
December 3, 2015, 8:13pm
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.
PCGear
(Michael)
December 3, 2015, 8:21pm
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
PCGear
(Michael)
December 3, 2015, 8:28pm
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?
thewonglv
(William Wong)
December 28, 2015, 9:49pm
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?
bart
(Bartosz Kustra)
December 29, 2015, 1:01pm
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
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
Revolution
(Revolution)
December 29, 2015, 7:45pm
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.
3 Likes
bart
(Bartosz Kustra)
December 30, 2015, 12:44am
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!
system
(system)
Closed
February 28, 2016, 9:44pm
12
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.