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

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

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.

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.