0

For over 10 years now we have developed single page applications where an AJAX call goes out and downloads the text/html of an inner page from a template folder with all of our page content. When it downloads it the div inside index.htm where the content is put is cleared with $('#' + container).contents().remove(); then we insert the new html with $('#' + container).html(content);.

We have been using version 3.3.1 for almost 5 years now and decided to update to a newer version. The recent ones sound like they internally use Plain Vanilla JavaScript to manipulate instead of the old engine in jQuery. It seems to get easily confused though and will scramble the inserted HTML or parts will be outright missing like they were never there. It seems to have the most problems with self-closing tags and tags in a section that repeat like 2-3+ spans or inputs in a row, and it will try to nest them when they weren't nested, set the html after as if it were inside the tag or the value of the input, some will be out of order, or 2+ of them will just not be there.

I tried 3 versions after 3.3.1 and they all output wrong. When I go back to 3.3.1 everything is fine again.

Roger Garstang
  • 71
  • 8
  • 2
    Please provide examples of the behavior. A bug report without steps to reproduce is almost useless. – Heretic Monkey Jun 28 '23 at 22:41
  • Have you reviewed the upgrade guide, e.g., for [jQuery 3.5](https://jquery.com/upgrade-guide/3.5/), which specifically discusses some changes that impact self-closing tags and sending correct MIME types? – Marc Jun 29 '23 at 00:19
  • There's a blog post here about how they had to add some security fixes to 3.5: https://blog.jquery.com/2020/04/ – Marc Jun 29 '23 at 00:27
  • It isn’t only self-closing tags, but random tags in general. I used it for a week before I started to notice things missing, out or order, duplicated, etc. A set of inputs that were the same in an Edit/Update page as a New/Enter page had 2-3 inputs just missing on the Edit. We also use the Bootstrap Combobox library that rendered wrong. – Roger Garstang Jun 30 '23 at 11:14

1 Answers1

0

jQuery might be parsing the HTML, try a Javascript native innerHTML.

document.getElementById(container).innerHTML = content;

It is exactly as bad a practice and as insecure as doing it with jQuery. You really should be moving to a modern template binding practice.

Adrian Brand
  • 20,384
  • 4
  • 39
  • 60
  • jQuery does some sanity checks on the HTML, like stripping out ` – Heretic Monkey Jun 28 '23 at 22:47
  • Actually that is backwards. jQuery doesn’t strip out script tags it executes them as the page is injected. If I recall it uses eval() too which probably isn’t great. We actually kind of depend on the behavior now though and jQuery to also clean up event handlers as we remove old pages too. – Roger Garstang Jun 30 '23 at 11:22