Anyway to load content via ajax within webflow?

Publishing help General
1

For example: Example 3 on http://interactions.webflow.com/ . Is there a way to have that area load dynamic content from another page? I am thinking of a portfolio use where I would not want all of that data loaded on page load as it would heavily impact performance for users.

2

http://ajax-content-loader.webflow.com/
https://webflow.com/design/ajax-content-loader?preview=5688e12b3561759edb2b0ce75f384b31

<script>
    $('#load-here').load('toload');
</script>

You’re welcome :slight_smile:

1 Like
3

Now when I think about it I don’t think that using ajax’s load was a good choice. You should totally use $.get since load is loading everything including html tags from the beginning. Use the following script with function to load specific stuff from other website. That way you can have some loaders coming up in here :smile:

function loadContent(url, targetSelector, contentSelector) {
    var target = $(targetSelector);
    $.get(url, function(data) {
        alert('loaded');
        target.html($(contentSelector, data));
    });
};
loadContent('toload', '#load-here', '#load-me');
4

Could you reactivate the page or give a new example? I can’t seem to make it work…

5

@constantinb hey! I had some issues with $.get on Webflow before. Unfortunatelly the page was recently deleted, I’m sooooo sorry for that to happen. The code posted above should work. Let me explain to you what has to be done to make it work.

First of all you need to set up your website properly. Create the div block whereever you want to have content loaded and give it a uniqueid like load-content-here. If you want to have multiple content loaders on one website you can simply call divs differently (load-here-1, load-here-2, etc…)

Secondly… Add the following code to the Custom Code section in the site dashboard:

<script>
function loadContent(url, targetSelector, contentSelector) {
    var target = $(targetSelector);
    $.get(url, function(data) {
        alert('loaded');
        target.html($(contentSelector, data));
    });
};
</script>

This function will let you load different stuff from different pages.

Let’s say you have a page called awesomepage and a div called copyme on it.

Now… Let’s say you will have a button with unique-id of load-content-please. You should then add a function in custom code:

<script>
$(document).ready(function() {
	$('#load-content-please').click(function(e) {
		e.preventDefault()
		loadContent('awesomepage', '#load-here-1', '#copyme')
	});
	// even more clickable stuff to load content here...
});
</script>

As you can see I used a loadContent() function that we have created earlier. This function require 3 arguments:

  1. Page from which the content will be taken
  2. Place to load a content
  3. Place to get content from

If you find yourself stuck you can contact me. Details are in my profile.
Good luck!

1 Like
6

Thank you, i’ll try that and tell you how it goes!

7

Hey Buddy, I just tried this out & I’m getting the following remark but no content is loading:

1666×746 113 KB

Below is my site link:
https://preview.webflow.com/preview/loadpagewithin?preview=83444c9e46440ed13602b34178fdd275

Have I missed something obvious?
Lastly, Is it possible to use this onScroll? without a clickable link?

/
Cheers

8

Hey, can you direct me to your published website link?

9

Sure:

http://loadpagewithin.webflow.com/

thanks
Shane