How to rewrite javascript to force it to load despite Ajax?

Question

I have the following javascript code, the problem is that the Squarespace site i'm working on requires Ajax-loading. Therefore, this code only works if you refresh the page once loaded. More on this issue here https://forum.squarespace.com/topic/87058-why-doesnt-my-javascript-code-work-until-i-refresh-the-page/

I'd be grateful for any pointers on how to rewrite this so that it loads despite the Ajax. It works wonderfully when I disable Ajax but unfortunately I need for that to be turned on for the rest of the site to look good.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> $(document).ready(function(){
$('.markdown-block .sqs-block-content h3').css('cursor','pointer');
$(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
$(".markdown-block .sqs-block-content h3").click(function()
{$(this).nextUntil("h3").slideToggle();}); }); </script>

Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — cloned, Jul 27 '21 at 12:27
This looks very promising but I have no idea how to switch up my code in order to use it. — siaeva, Jul 27 '21 at 12:41
@cloned That only helps for events but won't affect the css() or slideToggle() shown — charlietfl, Jul 27 '21 at 12:49
How is your ajax done? Need to call some of this after it completes when the elements actually exist — charlietfl, Jul 27 '21 at 12:50
The CSS should be set in CSS anyhow and not via jQuery. The slidetoggle needs to be called once the loading of the data finished, but we don't know how this is done. — cloned, Jul 27 '21 at 12:52
Thanks folks, here's the template for you to evaluate the Ajax: https://brine-demo.squarespace.com/ — siaeva, Jul 27 '21 at 13:35
Show us the code. We shouldn't have to go dig through a remote site — charlietfl, Jul 27 '21 at 13:38
@charlietfl I agree but I don't know what the code is myself :) Then I guess you can't help me but thank you for your efforts so far! — siaeva, Jul 27 '21 at 14:54
See: [Something in my web site or project doesn't work. Can I just paste a link to it?](https://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it) — charlietfl, Jul 27 '21 at 15:51

score 1 · Accepted Answer · answered Jul 28 '21 at 22:37

This is a common issue, and there are several common ways that developers approach the solution.

In your case, inserted via sitewide code injection:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
window.Squarespace.onInitialize(Y, function() {
  $('.markdown-block .sqs-block-content h3').css('cursor','pointer');
  $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
  $(".markdown-block .sqs-block-content h3").click(function() {
    $(this).nextUntil("h3").slideToggle();
  });
});
</script>

How to rewrite javascript to force it to load despite Ajax?

1 Answers1