You were right @████████that the issue was related to the fact that the fields are changed when it is in the read-only version. By painstakingly comparing the "Inspect Page" element of the form in the editable version and the read-only version, and using tricks like alerts and background colors (adding .css('background-color', 'yellow'); to form elements), I was able to eventually (several hours later) narrow down which parts of my Javascript were not running in the read-only version.
Here is the code I was using before - to cycle through all the records in the collection and check for a field value, and if correct hide/show fields as appropriate:
$('.numberBranchesSplit input').each(function() {
if ($(this).closest("ul").find('#q83 input').val() != "1") {
//show and hide fields as appropriate
}
});
And here's the updated code that works in both the live editable form, and the read-only version that displays in the instance history and in the repository.
$('.numberBranchesSplit').each(function() {
if ($(this).closest("ul").find('#q83 input').val() != "1" && $(this).closest("ul").find('#q83').text() != "1") {
//show and hide fields as appropriate
}
});
As you can see, I had to make two major changes:
- In the Each Loop, I was searching for all '.numberBranchesSplit input' elements, which works in live, but not in read-only. When I changed it to search for all elements of '.numberBranchesSplit' (dropping the input) it worked in both versions of the form.
- When checking the value of the input field, it wasn't recognizing it as an input field once it was read only, so I had to check for the value in two versions of the field. In the live form, I'm checking the val(), but in the read-only form I'm checking text() instead.
This is now working across the board for me.
Although I was really frustrated that it took me hours to figure out what was what, I am thankful to you for pointing me in the right direction.