0

I have a function I use on a web page to count the number of visible "finance-container" classes. I was using the "https://code.jquery.com/jquery-3.5.1.slim.min.js" CDN without issue.

function countSections() {
var y = $('#sectionsdisplayed');
var count = $('.finance-container').length;
var visible = $('.finance-container:not([style*="display: none"])').length;
y.text('Showing ' + visible + ' of ' + count);}

I needed to add another function to perform an ajax call.

function saveRecord(id) {
if (validateForm(id) == false) {
    return;
}
var dataID = $("#" + id).attr("data-id");
var lv = id.split("_")[0];
var lvID = id.split("_")[2];
var glcode = $('#' + lv + '_ddlGLCode_' + lvID);
var source = $("#" + lv + '_hdnSource_' + lvID);
var poCancelled = $("#" + lv + '_ckCancelled_' + lvID);
var nonCapEx = $("#" + lv + '_ckNonCapEx_' + lvID);
var capEx = $('.capex[data-id*="' + dataID + '"]');
var effDate = $('.effectiveDate[data-id*="' + dataID + '"]')
var poReq = $('.poReq[data-id*="' + dataID + '"]');
var poNumber = $('.poNumber[data-id*="' + dataID + '"]');
var poAmt = $('.poAmt[data-id*="' + dataID + '"]');
var poType = $('.poType[data-id*="' + dataID + '"]');
var trackingComment = $('.trackingcomment[data-id*="' + dataID + '"]');
var duplicate = $('.duplicate[data-id*="' + dataID + '"]');

var j = {
    'resourceID': $("#hdnUsername").val(),
    'keyid': $("#hdnKeyId").val(),
    'effectiveDate': effDate.text(),
    'costCenter': glcode.val(),
    'capExNumber': capEx.val(),
    'poReq': poReq.val(),
    'poNumber': poNumber.val(),
    'price': poAmt.val(),
    'poType': poType.text(),
    'trackingComment': trackingComment.val(),
    'poCancelled': poCancelled.is(":checked"),
    'nonCapEx': nonCapEx.is(":checked"),
    'poEformSource': source.val(),
    'eformID': dataID,
    'duplicateEntry': duplicate.prop("checked"),
    'legalEntity': $("#hdnLegalEnt").val()
}

$.ajax({
    type: "POST",
    data: JSON.stringify(j),
    url: "../api/saveCCCpo/",
    contentType: "application/json",
    success: function (status) {
        if (status == "Failed") {
            alert("An error occurred while trying to save the note.  Please try again or alert support for assistance.");
        }
        else {
            alert("Financial information was successfully saved");
            var lblFinanceHeader = $('.lblFinanceHeader[data-id*="' + dataID + '"]');
            var financeHeader = $('.finance-header[data-id*="' + dataID + '"]');
            lblFinanceHeader.text("Logged");
            financeHeader.css("background-color", "")
        }
    }
});}

The ajax call wouldn't work with the jquery.com stating "Object doesn't support property or method 'ajax'.
enter image description here

I added the Google CDN "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" to my page. The ajax call now works, but the countSections is no longer functioning. Every result, whether the elements are 'display: none' or not always comes out to the same number (e.g. 5 of 5). What might I be missing? I'm not well versed in all things jquery.

Thanks!

EDIT: Using the :visible also doesn't work in this case.
enter image description here

Mike C
  • 21
  • 2
  • 1
    Does this answer your question? [What are the differences between normal and slim package of jquery?](https://stackoverflow.com/questions/35424053/what-are-the-differences-between-normal-and-slim-package-of-jquery) – Phil Jan 20 '21 at 00:52
  • Unfortunately, no. Even using the normal src="https://code.jquery.com/jquery-3.5.1.js" yields the same result. The ajax works, but the countSections doesn't. – Mike C Jan 20 '21 at 01:05
  • Your visibility selector seems pretty brittle. Why not use `$('.finance-container:visible')`? – Phil Jan 20 '21 at 01:07
  • Good question. Here's the function I'm using to hide/show the elements. That's what adds the "display:none". function hideElement(e, s) { if (s == true) { $(e).hide(400); } else { $(e).show(400); } } – Mike C Jan 20 '21 at 01:11
  • Your selector is brittle because it specifies a space between `display:` and `none` which may or may not be there depending on the implementation of `.hide()` / `.show()`. Use the [`:visible` selector](https://api.jquery.com/visible-selector/) instead as it is much more robust – Phil Jan 20 '21 at 01:14
  • What other debugging have you done? You can easily inspect the DOM and / or execute queries in your browser console to check those 5 elements to see if they are actually visible or not – Phil Jan 20 '21 at 01:18
  • Also, make sure you clear your browser cache when making changes to your `.js` files – Phil Jan 20 '21 at 01:19

0 Answers0