Javascript error when adding a new record

[Paul]

No, just tried creating a record. How strange.

[kev1n]

Try using the latest nuform.js from Github. (Download it, replace your local one and log in again into nuBuilder)

[Paul]

Same problem.

[Paul]

Wait, I missed that the error is now different:

Uncaught Error: Syntax error, unrecognized expression: #

[Paul]

Perhaps a fresh installation of nuBuilder is in order?

[kev1n]

Wait, I missed that the error is now different:

Uncaught Error: Syntax error, unrecognized expression: #

Any more details in the developer console?

[Paul]

Uncaught Error: Syntax error, unrecognized expression: #
at I.error (jquery-3.7.1.min.js:2:11769)
at Y (jquery-3.7.1.min.js:2:17234)
at re (jquery-3.7.1.min.js:2:20008)
at ce.I [as find] (jquery-3.7.1.min.js:2:7520)
at ce.fn.init.find (jquery-3.7.1.min.js:2:21991)
at new ce.fn.init (jquery-3.7.1.min.js:2:22483)
at ce (jquery-3.7.1.min.js:2:1077)
at nuSetBrowseColumns (nuform.js?ts=20250926074140:4948:46)
at nuDragTitleEvents (nucommon.js?ts=202509260741402)
at nuBuildForm (nuform.js?ts=20250926074140:146:2)

Explanation

Understanding the problem
This error message, Syntax error, unrecognized expression: #, indicates that jQuery is attempting to select an element using a CSS selector that is just #. This is an invalid selector because the # symbol in CSS is used to target an element by its ID, and it must be followed by the ID string. When used alone, jQuery doesn't know what element to select, resulting in a syntax error.

Based on the provided stack trace, the issue appears to be originating from the nuSetBrowseColumns function within your nuform.js file. This function is likely receiving or constructing a selector that is just # and passing it to a jQuery function like find() or $(...), causing the error. This can sometimes happen with libraries or frameworks that dynamically build selectors, particularly when dealing with elements that might have empty or missing href or data-target attributes [1].

Suggested fix
Review the nuSetBrowseColumns function in nuform.js. Specifically, look for instances where jQuery is being used to select an element, and check the value of the selector being used. Ensure that any selector starting with # is followed by a valid element ID. If you are dynamically generating the selector, add a check to ensure that the ID is not empty or null before using it in the jQuery selector.

[kev1n]

Try placing your Custom Code in the 'Edit' field instead of using 'Browse & Edit'

[Paul]

Tried that. Same result.

I even tried re-installing nuBuilder. Backed up nuconfig.php and uploads folders, then re-extracted all of the nuBuilder files, placed my backups back in and re-started the web service. Logged in and tried creating a new record. Same result - "Cannot read properties of null (reading 'style')".

I'm a little baffled.

[Paul]

Uncaught TypeError: Cannot read properties of null (reading 'style')
at nuSetBrowseColumns (nuform.js:4957:12)
at nuDragTitleEvents (nucommon.js2)
at nuBuildForm (nuform.js:145:2)
at Object.successCallback (nuajax.js:193:4)
at c (jquery-3.7.1.min.js:2:25304)
at Object.fireWith [as resolveWith] (jquery-3.7.1.min.js:2:26053)
at l (jquery-3.7.1.min.js:2:77782)
at XMLHttpRequest.<anonymous> (jquery-3.7.1.min.js:2:80265)

Explanation

Understanding the problem
The error Uncaught TypeError: Cannot read properties of null (reading 'style') means that you are trying to access the style property of a variable that currently holds the value null. In this specific case, the error occurs within the nuSetBrowseColumns function in the nuform.js file at line 4957. The traceback indicates that this function was called as part of a sequence of events initiated by an AJAX success callback, likely triggered by jQuery.

How to verify
To confirm this, you can set a breakpoint at line 4957 in nuform.js within the Sources panel of Chrome DevTools. When the execution pauses at this line, inspect the variable whose style property is being accessed. You will likely find that its value is null.

Suggested fix
The most common reason for this error is attempting to access an HTML element that does not exist in the DOM at the time the JavaScript code is executed. This could be because:

The element's ID or class name is misspelled in the JavaScript code.
The JavaScript code is running before the HTML element has been created in the DOM (e.g., the script is placed in the <head> without a defer or async attribute, or without being wrapped in a DOM ready event listener).
The element was dynamically removed from the DOM before the code tried to access it.
To fix this, ensure that the JavaScript code attempting to access the element's style property only runs after the element exists in the DOM. If you are selecting the element using a method like document.getElementById() or document.querySelector(), check that the selector is correct and that the element is present in the HTML when the function is called.

If the element is expected to be present, debug why it might be null at that specific point in execution. Check the code that is supposed to create or fetch this element.

Without the specific code from nuform.js:4957, a precise code fix cannot be provided. However, a general approach would be to add a check before attempting to access the style property:

js

// Inside the nuSetBrowseColumns function around line 4957
let element = /* code that is supposed to get the element */;

if (element !== null) {
// Now it's safe to access the style property
element.style.propertyName = 'value';
} else {
console.error("Element is null. Cannot set style.");
// Optionally handle the case where the element is not found
}

Use code snippets with caution

Replace /* code that is supposed to get the element */ with the actual code in your application that is trying to retrieve the HTML element.

Summary
The error "Cannot read properties of null (reading 'style')" occurs when you try to access the style property of a variable that is null. This usually happens when trying to manipulate an HTML element that does not exist in the DOM at the time. The fix involves ensuring that the element you are trying to access is present before attempting to modify its style, often by adding a null check or ensuring your script runs after the DOM is fully loaded.

Data used to understand this message