Jump to content

Loading Issue of images and videos - Loading One page on another with JQuery AJAX

Recommended Posts

Site URL: https://dachshund-apricot-e6ab.squarespace.com/

Hi Guys! I am trying to load a page's content into another page's specific div. The content is loading perfectly only trouble is that the image and videos are not appearing.
PASSWORD:1234
Target Page (on which the content has to be displayed):
Target Page 2 — Overbound (squarespace.com)
Source Page (whose content has to be displayed):
Source Page 2 — Overbound (squarespace.com)

My Code:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
	$(document).ready(function(){
        $("#collection-62925dc5a8b48b3bc07393bd section[data-section-id=62925dc5a8b48b3bc07393bf]").load("https://dachshund-apricot-e6ab.squarespace.com/source-page-2 #page");
});
</script>

What could be the solution? Thanks in advance

Become a contributor to the largest resource for Squarespace and gain recognition from thousands of visitors.

Join us on this exciting journey. Ping us here!.

Link to comment
  • Replies 2
  • Views 201
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

I don't have a solution but this might get you a bit closer.

The first thing I explored was how the structure of the page looked. I found that you are putting a #page within a #page, so that could cause some issues. CSS being off and all.

The following tries to target more specifically the from and to locations. Making the result look like well structured page sections.

<script>

  $( ( ) => {
  
    const sourceSelector = '#page .page-section';
    
    const sourceUrl = '/source-page-2';
    
    const targetSelector = '#collection-62925dc5a8b48b3bc07393bd #page .sections';
    
    $( targetSelector )
    
      .prepend ( '<div>' )
      
      .load ( `${ sourceUrl } ${ sourceSelector }` )
      
      .first ( )
      
      .unwrap ( );
      
    } );
    
  </script>

With that out of the way the second issue is how SS loads it's pages. On the source page when it first loads all the elements are not in their final state. Image blocks are an example. They have a basic structure to start but then SS uses code to manipulate the structures further.

When you use the jQuery load method it only gets the basic structure. Load isn't a browser and so you don't get fully rendered elements.

For image blocks it is possible to replicate the final setup with code but it's not easy and of course fragile.

It may be possible to trigger the SS code to do the setup but I'm unaware if that can be done.

I imagine the video blocks may be in a similar boat.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
18 hours ago, creedon said:

I don't have a solution but this might get you a bit closer.

The first thing I explored was how the structure of the page looked. I found that you are putting a #page within a #page, so that could cause some issues. CSS being off and all.

The following tries to target more specifically the from and to locations. Making the result look like well structured page sections.

<script>

  $( ( ) => {
  
    const sourceSelector = '#page .page-section';
    
    const sourceUrl = '/source-page-2';
    
    const targetSelector = '#collection-62925dc5a8b48b3bc07393bd #page .sections';
    
    $( targetSelector )
    
      .prepend ( '<div>' )
      
      .load ( `${ sourceUrl } ${ sourceSelector }` )
      
      .first ( )
      
      .unwrap ( );
      
    } );
    
  </script>

With that out of the way the second issue is how SS loads it's pages. On the source page when it first loads all the elements are not in their final state. Image blocks are an example. They have a basic structure to start but then SS uses code to manipulate the structures further.

When you use the jQuery load method it only gets the basic structure. Load isn't a browser and so you don't get fully rendered elements.

For image blocks it is possible to replicate the final setup with code but it's not easy and of course fragile.

It may be possible to trigger the SS code to do the setup but I'm unaware if that can be done.

I imagine the video blocks may be in a similar boat.

@creedon Thanks for the code! I didn't solve the problem but it gave me an insight into what could be the issue.

Become a contributor to the largest resource for Squarespace and gain recognition from thousands of visitors.

Join us on this exciting journey. Ping us here!.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.