TheSquareSpacer Posted June 3, 2022 Share Posted June 3, 2022 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 Get Our MultiCurrency Extension for Your Site (7.0 & 7.1) Feel free to reach out for help and projects! The Squarespacer Limited Link to comment
creedon Posted June 4, 2022 Share Posted June 4, 2022 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 best , and see my profile. Thanks for your support! Link to comment
TheSquareSpacer Posted June 4, 2022 Author Share Posted June 4, 2022 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. Get Our MultiCurrency Extension for Your Site (7.0 & 7.1) Feel free to reach out for help and projects! The Squarespacer Limited Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment