How to call a script inside a script

Question

I am currently working on this responsive gallery content and it is working the way I wanted it to. However, I needed to have one of the contents have a content change upon clicking a certain selection This is the working code of the content change. I added it on the main responsive gallery content after checking that it works ok on a separate file.

Is it due to my placing of the content changing script? I tried placing it inside the main script below but it didn't work. I tried creating its own script tag and placed it at the end but same result. Right now, I tried adding it inside the head tag and it still won't work. Can somebody please help me T^T

Kindly click the atkinsons menu since that is where I inserted the content change

Here is the script tag i'm referring to who is responsible for selecting the appropriate pages to change the content.

<!--Content Change Script-->
  <script type="text/javascript">
    $(document).ready(function() {
      $("a").click(function() {
        var id = $(this).attr("data-id"); // Using a custom attribute.
        $("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
        $(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
      });
    });
  </script>

PROBLEM Under the Atkinsons page, the content is not changing whenever i click the selection. under the first link, the outcome should look like this The title and Page should change whenever I click on the selection.

THE CHANGES I already applied the code advise from the 1st answer below. it is now changing the title upon clicking the selection, but not all section is clickable. I applied the same changes in both codepen and localhost but it produces different clickable links that doesn't work. The random letter not working depends on the size of the window. Also the paragraph is not showing

It is not at all clear what your question is. What is working, what is not working and how do we get to see the error and what does the error look like? Also where are you calling what script inside what script? — mplungjan, Sep 06 '18 at 06:05
Also why is the script inline and not to the right in the codepen? Makes it much harder to find: https://codepen.io/anon/pen/qMXGqa — mplungjan, Sep 06 '18 at 06:09
@mplungjan i do apologize, as i have only copy pasted my codes as it is straight in my localhost. the problem is, the content is not changing when you click the selections under Atkinsons. I'll try posting an image to describe it properly — UmaruHime, Sep 06 '18 at 07:16
First have a look at the answer and dupe given. I think you will see it solves your issue — mplungjan, Sep 06 '18 at 07:22
@mplungjan i already applied 1st answer but it is still showing some error. I explained it on the edited content. Here is the current output. codepen.io/UmaruHime/pen/ZMJZwP — UmaruHime, Sep 06 '18 at 07:38
PROBLEM Under the Atkinsons page, the content is not changing whenever i click the selection. under the first link, the outcome should look like this(https://codepen.io/UmaruHime/pen/BORbqR)The title and Page should change whenever I click on the selection. I already applied the code advise from the 1st answer below. it is now changing the title but not all is clickable and also,the paragraph is not showing. I applied the same changes in both codepen and localhost but it produces different clickable links that doesn't work. The random letter not working depends on the size of the window. — UmaruHime, Sep 06 '18 at 07:53

score 1 · Accepted Answer · edited Sep 06 '18 at 06:23

1

Your script is not working because your <a> is not in page when you are trying to bind events to them.

You need to do delegate which is something like this.

<script type="text/javascript">
    $(document).ready(function() {
      $(document).on("click", "a", function() {
        var id = $(this).attr("data-id"); // Using a custom attribute.
        $("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
        $(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
      });
    });
  </script>

This will bind event to document, which is in page from start.

More on jQuery api here.

edited Sep 06 '18 at 06:23

mplungjan

169,008
28
173
236

answered Sep 06 '18 at 06:17

Kamil Folwarczny

581
1
3
13

Alternatively bind to the link's closest static container – mplungjan Sep 06 '18 at 06:24
I tried using this. The title of the page content works, but it does not show the paragraph. https://codepen.io/UmaruHime/pen/ZMJZwP? – UmaruHime Sep 06 '18 at 07:27
Thats because your text has `opacity: 0` in class `.content p`. Function `$.show()` will only modify display. – Kamil Folwarczny Sep 06 '18 at 07:46
After futher look. You are definind `.content p` twice in your ccs. I have deleted your second declaration and everything works fine at my side. However i would recoment check elements where you wanted to use the other declaration. Working pen: https://codepen.io/Kamil-Folwarczny/pen/BOdXXY – Kamil Folwarczny Sep 06 '18 at 07:53
@KamilFolwarczny i tried you code, it seems i am also using the same class name on a different part of the site and it's reading that instead, so i changed it to content2 instead of removing the opacity. It's working but for some reason, my border is not capturing the whole section unlike yours. Here is the edited version of my changes https://codepen.io/UmaruHime/pen/ZMJZwP – UmaruHime Sep 06 '18 at 08:12
@UmaruHime Thats because you are removing wrong code. It seems that both declaration of `.content` is important for correct behaviour. You need to remove only second `.content p` – Kamil Folwarczny Sep 06 '18 at 08:28
However this goes beyond the scope of the question. If you have trouble with css not working correctly, you should accept this answer and make separate question i quess. – Kamil Folwarczny Sep 06 '18 at 08:34

How to call a script inside a script

1 Answers1

Linked