Rockwell Rice Rockwell Rice - 26 days ago 10
Javascript Question

Slack channel signup button not showing when loaded with ajaxed page content

I am ajaxing in some content to a page. There is a middle column that has content based on a specific class. So there is a bunch of stuff coming in when they click on the class's button. The slack channel button is part of the support box that belongs to that page. Along with that is a button to sign up to the slack channel. This is taken from here.

It looks like this in the html, this block is coming in on the page being loaded

<div class="support box">
<span class="title">Support</span>
<p>
Are you haveing trouble? Visit our workshop FAQ page or send us an email and we'll get back to you as soon as possible.
<br />
<br />
<a href="/faq" class="changeColor">Frequently Asked Questions</a>
<br />
<a href="mailto:....com" class="changeColor">...url....com</a>
</p>
<p>Join the conversation on slack</p>
<div id="slackin-div">
<script src="https://...url....com/slackin.js?large"></script>
</div>
</div>


When the page initially loads the button shows fine. If I view the page that is getting ajaxed in at it's own url the button shows fine. But once I ajax the content in the button does not show up. I have found a few posts that used "eval()" but I think it is not helping here because all I am doing is adding this script tag, not actually running any js from a function in a file on my page soI don't think there is anything to evaluate.

Anyone know any way I can keep this button showing up after the page has been ajaxed in. I did try to append it to a div but the button still would not show up.

Answer

You need to make sure that the script tag is not "ajaxed" in as a string, but as an element the DOM understands. You can use plain Javascript for this (createElement()). Here's an example with a timeout that simulates an AJAX request.

// Sorry framer guys for using this script, will remove after some time! <3
const slackin = 'http://framer-slack-signup.herokuapp.com/slackin.js';

let script = document.createElement('script');
    script.src = slackin;

setTimeout(() => {
  document.querySelector('#target').appendChild(script);
}, 200);
<div id="target"></div>