Home/ Questions/Q 9266909
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T14:25:36+00:00

My code currently allows any link clicked under citations to open a new page.

  • 0

My code currently allows any link clicked under citations to open a new page. I’m trying to exclude the “More…” links from performing this function since these are used to add more links to the current page. Is there a way to do this?

Here’s the jsfiddle

Here’s my javascript

$(document).ready(function ($) {
  var url = 'https://www.sciencebase.gov/catalog/item/504216b6e4b04b508bfd333b?
format=jsonp&fields=relationships,title,body,contacts';
  $.ajax({
    type: 'GET',
    url: url,
    jsonpCallback: 'getSBJSON',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function (json) {
      var citeCount = 0;
      var piCount = 0;
      $('#project').append('<li><b><a href="' + url + '">' + json.title + '</a> - </b>' + json.body + '</li>');
      $('#project a').on('click', function (e) {
        e.preventDefault();
        if (citeCount == 1) {
          return;
        }
        $.ajax({
          type: 'GET',
          url: 'https://www.sciencebase.gov/catalog/itemLink    
/504216b6e4b04b508bfd333b?format=jsonp',
          jsonpCallback: 'getSBJSON',
          contentType: "application/json",
          dataType: 'jsonp',
          success: function (json) {
            // Loop function for each section (10 citations per section)
            var loopSection = function (start, stop) {
              // Http setup for all links
              var linkBase = "http://www.sciencebase.gov/catalog/item/";
              // Link for citation information
              var link = "";
              for (var j = start; j < stop; j++) {
                // Create a link using the realtedItemId
                link = linkBase + json[j].relatedItemId;
                // Title links                                 
                var $anchor = $("<a>", {
                  href: link,
                  id: "id" + j,
                  text: json[j].title
                });
                // .parent() will get the <li> that was just created and append to 
                //the first citation element
                $anchor.appendTo("<li>").parent().appendTo("#citations");
              }
            }
            var itemCount = json.length;
            var numSections = Math.floor((itemCount / 10));
            var moreLinks = $('<a href="" id="nextLink">More...</a>');
            var loopCount = 1;
            loopSection(0, 10);
            $('#citations').append(moreLinks);
            $(moreLinks).on('click', function (e) {
              e.preventDefault();
              if (numSections > 1) {
                loopSection((loopCount * 10), ((loopCount + 1) * 10));
                $('#citations').append(moreLinks);
                numSections -= 1;
                loopCount++;
              } else if (numSections <= 1) {
                $("#nextLink").closest('a').remove();
                loopSection((loopCount * 10), json.length);
              }
            });
          },
          error: function (e) {
            console.log(e.message);
          }
        }); // END Second .ajax call
        $('#project').on('click', function (e) {
          e.preventDefault();
          if (piCount == 1) {
            return;
          }
          for (var i = 1; i < json.contacts.length; i++) {
            $('#piHeading').append('<ul>' + "Name: " + json.contacts[i].name + ', ' + "Email: " + json.contacts[i].email + ', ' + "Phone: " + json.contacts[i].phone + '</ul>');
          }
          piCount++;
        });
        citeCount++;
      }); // END Project link click event
      $('#citations').on('click', function (e) {
        e.preventDefault();
        window.open('CitationsInfo.html', '_self');
      });
    },
    error: function (e) {
      console.log(e.message);
    }
  }); // END First .ajax call              
}); // END Doc.ready

and Here’s my html,

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="MainPage4.js"></script>
<script src="Citations.js"></script>
</head>
<body>

<h2>Project</h2>

<div class='wrapper'>
<ul id='project'></ul>
</div>

<h3>Citations</h3>

<div class='wrapper'>  
<ul id='citations'></ul>   
</div>

<h3>Principal Investigators</h3>

<div class='wrapper'>    
<ul id='piHeading'></ul>
</div>

</body>
</html>

Thanks for the help

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you change the part of your code that is handling the global click event for the #citations container to include logic to filter out clicks where the target is the #nextLink, it should do what you want.

    $('#citations').on('click', function (e) {
    e.preventDefault();
    if (!$(e.target).is($('#nextLink'))) {
        window.open('CitationsInfo.html', '_self');
    }
});

    Removing the above section entirely also allow the “More…” link to work correctly, while still maintaining functionality on the individual links. The citations click event is masking the other behaviors.

    jsfiddle

    • 0