Links wont work with AJAX

Question

I'm learning to use AJAX in my website, and when I add some things to the page with container.insertAdjacentHTML('beforeend', thing); everything shows up fine but when I click things, the links don't take me to a new page(nothing happens).

Here is the code...:

    var container = document.getElementById("sec");
var thing = `<div class="mdl-card coffee-pic mdl-cell mdl-cell--8-col">
            <div class="mdl-card__media mdl-color-text--grey-50">
              <h3><a href="entry.html">What is this?</a></h3>
            </div>
            <div class="mdl-card__supporting-text meta mdl-color-text--grey-600">
              <div class="minilogo"></div>
              <div>
                <strong>Illuminatiiiiii</strong>
                <span>3.14159265359 seconds ago</span>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <button onclick="pls()" class="mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--fab mdl-color--accent">
              <i class="material-icons mdl-color-text--white" role="presentation">add</i>
              <span class="visuallyhidden">add</span>
            </button>
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/1.jpg)">
              <a href="lib/i/?book=robinsoncrusoe.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>Robinson Crusoe by Daniel Defoe</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/2.jpg)">
              <a href="lib/i/?book=thecallofthewild.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>The Call of the Wild by Jack London</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/3.jpg)">
              <a href="lib/i/?book=blackbeauty.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>Black Beauty by Anna Sewell</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/4.jpg)">
              <a href="lib/i/?book=frankenstein.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>Frankenstein by Mary Shelley</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/5.jpg)">
              <a href="lib/i/?book=achristmascarole.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>A Christmas Carole by Charles Dickins</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/6.jpg)">
              <a href="lib/i/?book=treasureisland.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>Treasure Island by Robert Louis Stevenson</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/whitefang.jpg)">
              <a href="lib/i/?book=whitefang.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>White Fang by Jack London</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/dracula.jpg)">
              <a href="lib/i/?book=dracula.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>Dracula by Bram Stoker</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/theprince.jpg)">
              <a href="lib/i/?book=theprince.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>The Prince by Niccolò Machiavelli</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/theadventuresofsherlockholmes.jpg)">
              <a href="lib/i/?book=theadventuresofsherlockholmes.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>The Adventures of Sherlock Holmes by Arthur Conan Doyle</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/commonsense.jpg)">
              <a href="lib/i/?book=commonsense.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>Common Sense by Thomas Paine</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/astudyinscarlet.jpg)">
              <a href="lib/i/?book=astudyinscarlet.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>A Study in Scarlet by Arthur Conan Doyle</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/prideandprejudice.jpg)">
              <a href="lib/i/?book=prideandprejudice.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>Pride and Prejudice by Jane Austen</strong>
              </div>
            </div>
          </div>`;

var request = new XMLHttpRequest();
request.open('GET', "https://cortexreading-illuminatiiiiii.c9users.io/books.json");
request.onload = function(){
  var theData = JSON.parse(request.responseText);
  makeThingy(theData);
};
request.send();

function makeThingy(data){
    container.insertAdjacentHTML('beforeend', thing);
}

It all goes into a div with an id called "sec" and the little boxes are supposed to be clickable. If I don't use the AJAX, then everything works fine. here is what it looks like...

http://prnt.sc/e4luzl

I am trying to click the image, that is div in which the is located

JSON is not a part of this, that is for later on.

/UPDATE -

I seem to have found the problem...so instead of inserting all that HTMl, i inserted only one "card" and so everything else works instead of the one I added. I know why now, it is because the link does encompass all of the div anymore, just one little area. Let me show you...: http://prntscr.com/e4m8wt If you look closely , there is alittle link in the middle instead of that whole picture div. Help with fixing this would be much appreciated...

`<div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
        <button onclick="pls()" class="mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--fab mdl-color--accent">
          <i class="material-icons mdl-color-text--white" role="presentation">add</i>
          <span class="visuallyhidden">add</span>
        </button>
        <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/1.jpg)">
          <a href="google.com">grg</a>
        </div>
        <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
          <div>
            <strong>Robinson Crusoe by Daniel Defoe</strong>
          </div>
        </div>
      </div>`;

is the new inserted HTML

What specifically are you clicking on that isn't doing what you expect? — David, Feb 05 '17 at 00:30
check your browser developer tools console for errors - though I can't see how the hard coded `thing` could be successfully put into the page if there was an error in the AJAX — Jaromanda X, Feb 05 '17 at 00:32
@PHPglue unless he's on ie 7 backticks have nothing to do with it and backticks are WAY better in this situation — TheRealMrCrowley, Feb 05 '17 at 00:37
David, I am trying to click the image, that is div in which the is located. — Kody Simpson, Feb 05 '17 at 00:41
@PHPglue, ok then your comment is pointless. any browser that supports insertAdjacentHTML supports backticks — TheRealMrCrowley, Feb 05 '17 at 01:11
`@TheRealMrCrowley`, that appears to be another incorrect statement, as IE 4 and up support `.insertAdjacentHTML`. You may want to start looking at some [documentation](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML). Oh... [Template Litterals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) — StackSlave, Feb 05 '17 at 01:30

TheRealMrCrowley · Accepted Answer · 2017-02-05T01:21:55.100

1

your anchor tags need to WRAP the div's you are clicking. right now you have INSIDE the div you are tying to click. tags have no content, and are therefor unclickable

your markup needs to be structured as follows:

<a href="lib/i/?book=blackbeauty.epub">
  <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/3.jpg)">
  </div>
</a>

if you dont want to wrap your div, then your anchor tag needs to be a block

  <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/3.jpg)">
    <a href="lib/i/?book=blackbeauty.epub" style="display:block; width: 100%; height:100%">
    </a>
  </div>

var container = document.getElementById("sec");
var thing = `<div><a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work?rq=1">inserted</a></div>`;

var request = new XMLHttpRequest();
request.open('GET', "https://reqres.in/api/users?page=2");
request.onload = function(){
  
  var theData = JSON.parse(request.responseText);
  makeThingy(theData);
};
request.send();

function makeThingy(data){
    container.insertAdjacentHTML('beforeend', thing);
}

<a id="sec" href="http://stackoverflow.com/questions/2530377/list-of-phone-number-country-codes">
  </a>

edited Feb 05 '17 at 01:21

answered Feb 05 '17 at 00:36

TheRealMrCrowley

976
7
24

In this, the whole div is considered a link, because of the way the is placed so maybe that is doing something idk – Kody Simpson Feb 05 '17 at 00:43
@KodySimpson shouldn't be part of the problem. check the updated snippet. neither the ajax nor the nested anchors cause a problem. the problem has to lie elsewhere in your code, or in your routes – TheRealMrCrowley Feb 05 '17 at 01:04
I seem to have found the problem...so instead of inserting all that HTMl, i inserted only one "card" and so everything else works instead of the one I added. I know why now, it is because the link does encompass all of the div anymore, just one little area. Let me show you...: http://prntscr.com/e4m8wt If you look closely , there is alittle link in the middle instead of that whole picture div. – Kody Simpson Feb 05 '17 at 01:07
@KodySimpson yup i actually noticed that and just finished updating my answer when you posted this comment. – TheRealMrCrowley Feb 05 '17 at 01:09
Wow, that works now, but for some reason it looks like this haha. http://prntscr.com/e4maph. When i remove the link totally, it goes back to normal – Kody Simpson Feb 05 '17 at 01:13
That would be a css specificity issue, you probably have your css in the format of div > div – TheRealMrCrowley Feb 05 '17 at 01:16
Could you plz explain more what that means? I'm not sure. – Kody Simpson Feb 05 '17 at 01:21
meaning that the styles that are targeting your cards are expecting a very specific HTML format. and moving the to the outside breaks that format. – TheRealMrCrowley Feb 05 '17 at 01:22
glad I can help. just one thing to note, the stylings for that tag would be better moved to a class, instead of inline styles. they are just inline for the purposes of the example – TheRealMrCrowley Feb 05 '17 at 01:32
o ok, i'll do that ty. – Kody Simpson Feb 05 '17 at 01:55

Links wont work with AJAX

1 Answers1