JQuery cannot find element with the same class on the same page

Question

I'm trying to set the text of an HTML element but I'm unable to do so through JQuery class selector .text() function. It is somehow unable to find the element to set. The function was able to find the element when it was called in the document.ready() function but due to functional requirements, I moved it into an API call instead. The API call is unable to find and set a particular set of elements. There are other elements on the page utilizing the same class which was set successfully.

Documented below are the two boot grid tables in which column fields I'm trying to set the values. Note that they exist on the same HTML page. Currently only the columns in ItemTbl can be set and reflected by the $(".accrMonth").text(values) function. I've attempted to switch their position on the webpage but still only ItemTbl is being set Attached a screenshot Output of searching for the class

function setDatesSO(dateString) {
  var dateParts = dateString.split("/");
  var reviewPeriod = new Date(+dateParts[2], dateParts[1] - 1, +dateParts[0]);

  console.log("table 1: " + $("#test1").hasClass("accrMonth2"));
  console.log("table 1: " + $("#test2").hasClass("accrMonth1"));
  console.log("table 1: " + $("#test3").hasClass("accrMonth"));

  console.log("table 2: " + $("#test4").hasClass("accrMonth2"));
  console.log("table 2: " + $("#test5").hasClass("accrMonth1"));
  console.log("table 2: " + $("#test6").hasClass("accrMonth"));
  reviewPeriod.setMonth(reviewPeriod.getMonth() - 1);
  $(".accrMonth").text(reviewPeriod.toLocaleString('en-GB', {
    month: 'long'
  }));
  reviewPeriod.setMonth(reviewPeriod.getMonth() - 1);
  $(".accrMonth1").text(reviewPeriod.toLocaleString('en-GB', {
    month: 'long'
  }));
  reviewPeriod.setMonth(reviewPeriod.getMonth() - 1);
  $(".accrMonth2").text(reviewPeriod.toLocaleString('en-GB', {
    month: 'long'
  }));
}

<table id="OverviewTbl" class="table table-striped table-hover" style="word-wrap: break-word;">
  <thead>
    <tr>
      <th data-column-id="accrMonth2" id="test1" class="accrMonth2">MONTH-3</th>
      <th data-column-id="accrMonth1" id="test2" class="accrMonth1">MONTH-2</th>
      <th data-column-id="accrMonth" id="test3" class="accrMonth">MONTH-1</th>
    </tr>
  </thead>
</table>

<table id="ItemTbl" class="table table-striped table-hover" style="word-wrap: break-word;">
  <thead>
    <tr>
      <th data-column-id="accrMonth2" id="test4" class="accrMonth2">MONTH-3</th>
      <th data-column-id="accrMonth1" id="test5" class="accrMonth1">MONTH-2</th>
      <th data-column-id="accrMonth" id="test6" class="accrMonth">MONTH-1</th>
    </tr>
  </thead>
</table>

Function API call,note that startDate value is valid as results are updated for ItemTbl.It is called when user clicks a button.

        $.ajax({
            type: "POST",
            url: getReviewById,
            data: JSON.stringify(form),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend: function (xhr) {
                xhr.setRequestHeader(csrfHeader, csrfToken);
            },
            success: function (jd) {
                setDatesSO(jd.startDate);
            },
        });

You'll need to share the jQuery/Javascript code you're having issues with. — emerson.marini, Apr 07 '21 at 08:57
I found out that if I put OverviewTbl outside the same div with the tab-content class which ItemTbl also resides in, the dates are correctly reflected. — Simon Newell, Apr 07 '21 at 10:00

score 0 · Answer 1 · answered Apr 07 '21 at 09:02

I dont see error as you could see in my sample

console.log($('#test1').hasClass("accrMonth2"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="OverviewTbl" class="table table-striped table-hover" style="word-wrap: break-word;">
  <thead>
    <tr>
      <th data-column-id="accrMonth2" id="test1" class="accrMonth2">MONTH-3</th>
      <th data-column-id="accrMonth1" id="test2" class="accrMonth1">MONTH-2</th>
      <th data-column-id="accrMonth" id="test3" class="accrMonth">MONTH-1</th>
    </tr>
  </thead>
</table>

<table id="ItemTbl" class="table table-striped table-hover" style="word-wrap: break-word;">
  <thead>
    <tr>
      <th data-column-id="accrMonth2" id="test4" class="accrMonth2">MONTH-3</th>
      <th data-column-id="accrMonth1" id="test5" class="accrMonth1">MONTH-2</th>
      <th data-column-id="accrMonth" id="test6" class="accrMonth">MONTH-1</th>
    </tr>
  </thead>
</table>

are you sure your table is loaded?

The default values are loaded correctly on the front-end but the only difference I see between the two tables is the "active" class I've omitted from OverviewTbl as they're supposed to be two different tabs tables. The active is supposed to be the default view — Simon Newell, Apr 07 '21 at 09:10
No it worked for the ItemTbl table, selector doesn't work for OverviewTbl table but no errors are thrown.The function just cannot find the class — Simon Newell, Apr 08 '21 at 02:02
To add on,I've tried id selector but same issue occurs for that element — Simon Newell, Apr 08 '21 at 02:54

JQuery cannot find element with the same class on the same page

1 Answers1