Last Modified 10.25.2022

Next Article and Prev Article Feature Correction

The 'Next Article' and 'Prev Article' functions cannot change pages when viewing articles belonging to different pages.

The form to request a detailed view page

<form id="viewForm" action="/bbs/${boardCd }/" method="get">
  <input type="hidden" name="page" value="${param.page }" />
  <input type="hidden" name="searchWord" value="${param.searchWord }" />
</form>

If the number of the 'Prev Article' is less than that of the last article on the current page, the page value in the viewForm form should be increased by 1.
See below.

detail view page of the board program

If the number of the 'Next Article' is more than of the first article on the current page, the page value in the viewForm form should be decreased by 1.
See below.

detail view page of the board program

Add the id attribute to the page input element of the viewForm form.

<form id="viewForm" action="/bbs/${boardCd }/" method="get">
  <input type="hidden" name="page" value="${param.page }" id="viewForm-page" />
  <input type="hidden" name="searchWord" value="${param.searchWord }" />
</form>

Below is the HTML code you need to reference to write your JavaScript code.

View page source

<div class="next-prev">
  <p>Next Article : <a href="#" title="9105" id="next-article-link">sysctl vm.swappiness</a></p>
  <p>Prev Article : <a href="#" title="9103" id="prev-article-link">free -h</a></p>
</div>
<div class="view-menu" style="margin-bottom: 47px;">
  <div class="fl">
    <input type="button" value="Modify" class="goModify" />
    <input type="button" value="Del" class="goDelete" />
  </div>
  <div class="fr">
    <input type="button" value="Next Article" title="9105" class="next-article" />
    <input type="button" value="Prev Article" title="9103" class="prev-article" />
    <input type="button" value="List" class="goList" />
    <input type="button" value="New" class="goWrite" />
  </div>
</div>
<table id="list-table" class="bbs-table">
  <tr>
    <th style="width: 60px;">NO</th>
    <th>TITLE</th>
    <th style="width: 84px;">DATE</th>
    <th style="width: 60px;">HIT</th>
  </tr>
  <tr>
    <td style="text-align: center;"><img src="/resources/images/arrow.gif" alt="You are Here!" /></td>
    <td><a href="#" title="9104">swapon -s</a></td>
    <td style="text-align: center;">10/9/22</td>
    <td style="text-align: center;">9</td>
  </tr>

  <!-- omit -->

</table>

<!-- omit -->

Refer to the HTML code and modify the JavaScript handlers of the Next Article and the Prev Article links.

Before

$('.next-prev a').click(function (e) {
  e.preventDefault();
  var articleNo = this.title;
  var action = $('#viewForm').attr('action');
  action += articleNo;
  $('#viewForm').attr('action', action);
  $('#viewForm').submit();
});

After

$('#next-article-link').click(function (e) {
  e.preventDefault();
  var nextArticleNo = this.title;
  var action = $('#viewForm').attr('action');
  action += nextArticleNo;
  $('#viewForm').attr('action', action);
  var firstItemNo = $('#list-table tr:nth-child(2) td:nth-child(2) a').attr('title');
  if (parseInt(nextArticleNo) > parseInt(firstItemNo)) {
    $('#viewForm-page').val(${param.page - 1});
  }
  $('#viewForm').submit();
});

$('#prev-article-link').click(function (e) {
  e.preventDefault();
  var prevArticleNo = this.title;
  var action = $('#viewForm').attr('action');
  action += prevArticleNo;
  $('#viewForm').attr('action', action);
  var lastItemNo = $('#list-table tr:last-child td:nth-child(2) a').attr('title');
  if (parseInt(prevArticleNo) < parseInt(lastItemNo)) {
    $('#viewForm-page').val(${param.page + 1});
  }
  $('#viewForm').submit();
});

Change the JavaScript handlers of the Next Article and the Prev Article buttons.

Before

$('.next-article').click(function () {
  var articleNo = this.title;
  var action = $('#viewForm').attr('action');
  action += articleNo;
  $('#viewForm').attr('action', action);
  $('#viewForm').submit();
});

$('.prev-article').click(function () {
  var articleNo = this.title;
  var action = $('#viewForm').attr('action');
  action += articleNo;
  $('#viewForm').attr('action', action);
  $('#viewForm').submit();
});

After

$('.next-article').click(function () {
  var nextArticleNo = this.title;
  var action = $('#viewForm').attr('action');
  action += nextArticleNo;
  $('#viewForm').attr('action', action);
  var firstItemNo = $('#list-table tr:nth-child(2) td:nth-child(2) a').attr('title');
  if (parseInt(nextArticleNo) > parseInt(firstItemNo)) {
    $('#viewForm-page').val(${param.page - 1});
  }
  $('#viewForm').submit();
});

$('.prev-article').click(function () {
  var prevArticleNo = this.title;
  var action = $('#viewForm').attr('action');
  action += prevArticleNo;
  $('#viewForm').attr('action', action);
  var lastItemNo = $('#list-table tr:last-child td:nth-child(2) a').attr('title');
  if (parseInt(prevArticleNo) < parseInt(lastItemNo)) {
    $('#viewForm-page').val(${param.page + 1});
  }
  $('#viewForm').submit();
});

References