-1

I've got an interesting question. I'm running Squarespace @ buscadprimero.caminoglobal.org and need to target the top-right button on the navigation (Ingresar, which means login) to bring up a Javascript form provided to me via embed code. The code itself works fine when included as a code block in the body of a page, but Squarespace only allows navigation buttons at the top to be hyperlinks. There's nowhere for me to add code to the button itself, being that it is a largely consumer platform and works great for straightforward application until you try to change the way it works.

They make an allowance for custom code via a "code injection" menu that adds whatever code you want to the HTML header of the page, so I've been trying to target this div, which does not have an id but who's class is external, with Javascript to replace its contents with an onclick listener to bring up this form. Tracking?

Here's my embed code, which like I said is fine:

<script>// <![CDATA[
   !function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.host+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);
// ]]></script>

I've been trying document.getElementsByClassName("external").innerHTML; but when set to a var that returns undefined. New to Javascript but not afraid to learn. I'd like to figure out how to properly target the div, first of all, and then replace its contents (which currently is a link to my 404 page) with a Javascript function that activates on click. Thanks for the guidance!

nathanoday
  • 35
  • 7
  • From clicking the link in your question: `Squarespace trial accounts are not visible to the public. When you are ready to publish your website, upgrading your trial will make your site active to the world.` – cssyphus Jun 28 '16 at 14:36
  • `document.getElementsByClassName("external")[0].innerHTML;`. `getElementsByClassName` returns a list. Use the browser console to debug these things. – Arg0n Jun 28 '16 at 14:36
  • You're right, the site is still in trial mode, but it can easily be accessed by entering the captcha code. – nathanoday Jun 28 '16 at 14:38
  • I've been using a browser console actually, just not exactly sure how to implement what you are suggesting. I'm not sure how to confirm that I'm correctly accessing that content because I don't know how to subsequently replace the content inside that div. – nathanoday Jun 28 '16 at 14:45
  • @Arg0n do you know how to change the contents of the div once it's been accessed? Right now it contains a link to my 404 page, like I said, but it needs to link to a Javascript function that pulls up the code I mentioned in the question. – nathanoday Jun 28 '16 at 14:48
  • If you try `document.querySelector(".external").innerHTML` it works at this time on your website, but `querySelector`return only the first element, so if you page change and you have more than one element with `.external`class, it'll not work. Reference: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector (see the compatibility list at the bottom) – Ayak973 Jun 28 '16 at 14:53
  • Thanks, that was able to get me to successfully target the div, but now my issue is not being able to successfully replace its contents with what is needed to bring up the login popup. Setting the `.innerHTML` element with anything but a basic string breaks my alert that shows me what the div contains (so I can't verify it), and regardless of what I set it to, the actual ingresar button stays unchanged, and still links to the default 404 page that it's set to. So it seems like my replacing of content isn't actually doing anything. – nathanoday Jun 28 '16 at 17:20
  • Can someone please tell me what all these downvotes are about? I'm just a user trying to get help from the community, and the question was answered successfully. Why am I being penalized for a legitimate question with a correct answer? @Arg0n, do you know why this is happening? – nathanoday Jul 07 '16 at 23:26

2 Answers2

0

I've tested the following on your site in Chrome, and have successfully changed the content. The page contained multiple ".collection" elements, so i select only the last one:

JavaScript / jQuery

$("#mainNavigation .collection").last().html("<a href='/newlink'>Test</a>");
Arg0n
  • 8,283
  • 2
  • 21
  • 38
  • Glad it seemed to work for you, but I'm still seeing no result when I put that code into my code injection area. I've got it exactly like you just said, and the jQuery is working on my site because I'm using it in another script. `` Is it possible Squarespace is overriding that script? It just seems like nothing I try is having any effect. – nathanoday Jun 29 '16 at 14:20
  • Can you try placing it inside `$(function() { //code here });`? – Arg0n Jun 29 '16 at 14:26
  • You're a genius. Thanks. That's working! But now to get my provided javascript embed in there instead of just a new link. Let me try that really quickly and I'll report back. – nathanoday Jul 01 '16 at 14:10
  • Alright, now comes the tricky part. The embed code only activates when attached to a span with the id of "cc-login", so on the page where it's currently working in the body, it looks like this: `Ingresar` followed by the original embed code shown at the top – nathanoday Jul 01 '16 at 14:20
  • And what do you want to do? – Arg0n Jul 01 '16 at 14:23
  • The code I've got on my site is now this: `` Putting the required span in there instead of a link sets everything back to not having an effect, however. Not sure how to get it to accept a span. Is there any way this would work by putting javascript as the target of the link instead of an href? – nathanoday Jul 01 '16 at 14:25
  • I want the contents of the div we're altering to inject the span with the id of "cc-login" since that is what my embedded popup login form looks for to activate. It's not simply a hyperlink. – nathanoday Jul 01 '16 at 14:26
  • Then just alter `Link` to be what you want to inject (`Ingresar`). – Arg0n Jul 01 '16 at 14:32
  • That did it! Thank you for walking me through the process. I'm up and running, my final code looking like this: `` – nathanoday Jul 05 '16 at 15:56
0

Thanks to the great help of @Arg0n, I've now got a working login form that appears in the top-right-most button of my site. Using:

$(function() { $("#mainNavigation .collection").last().html("<span id='cc-login'>Ingresar</span>"); });

as the function to replace the contents of the div in question, I inserted <span id='cc-login'>Ingresar</span> as the call to the provided embed code:

<![CDATA[ !function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.ho‌​st+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventLi‌​stener("load",n,!1):e.attachEvent("onload",n)}(window,document); // ]]>

Turns out that a little jQuery was helpful in accessing the desired div, and setting its html contents was a bit beyond my area of expertise.

Many thanks to the StackOverflow community for helping me learn about targeting page elements with Javascript to procedurally manipulate its contents.

nathanoday
  • 35
  • 7
  • 1
    Why did this get a downvote? It is the correct answer. I should know, being that it's my own problem, right? – nathanoday Jul 06 '16 at 20:52