jQuery find function with escape characters not working in latest version - javascript

I have a selector in a find function that works with jQuery 3.3.1 and before that doesn't in 3.4.0 and 3.4.1. I am using it on an xhtml jQuery document object that I have used $.parseXML on. I am using the full version of jQuery.
I have looked into the jQuery changelogs and see nothing that should affect this, as well as in the source changes on github.
I have tested the find with .class and #id and it works, but the IDs will be dynamic so I need to search by attribute name. There will also be multiple spans that I need to manipulate which is why I need a .each(function). Currently we are freezing our dependency to jQuery 3.3.1 because it works as expected but in 3.4.0+ it doesn't even enter the function.
Works:
const xmlDoc = $.parseXML(`<?xml version="1.0" encoding="windows-1252" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:dd="DynamicDocumentation">
<head>
<title></title>
</head><body><span dd:drop_list_uuid="9999">mydrop1</span></body></html>`);
const $xml = $(xmlDoc).find('body');
$xml.find('span[dd\\:drop_list_uuid]').each(function() {
console.log($(this).text())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Does not work:
const xmlDoc = $.parseXML(`<?xml version="1.0" encoding="windows-1252" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:dd="DynamicDocumentation">
<head>
<title></title>
</head><body><span dd:drop_list_uuid="9999">mydrop1</span></body></html>`);
const $xml = $(xmlDoc).find('body');
$xml.find('span[dd\\:drop_list_uuid]').each(function() { // This is the line that doesn't work
console.log($(this).text())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Problem solved here. 3.4.0+ gets rid of sizzle.
https://forum.jquery.com/topic/jquery-find-function-with-escape-characters-not-working-in-latest-version#14737000008103091
"the new versions of jQuery use querySelectoAll without sizzle. So many sizzle syntaxes don't work anymore.
A namespaced attribute query was probably implemented in sizzle."
-jakecigar

Related

Convert jQuery element to html string

This JS code tries to modify the raw html. It does that by converting the html to jQuery element, does the modifications on the jQuery element then the part which is not working is converting back to raw html string.
Since .html() will not work with xml as indicated in the docs
How can it convert the jQuery back to raw html string? Thanks
let jQ = $($.parseHTML(raw_html));
//modify jQ to heart content
console.log(jQ.html()); //<-- undefined
The raw_html
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
//...
</html>
edit
Output of console.log($.parseHTML(raw_html));
Do
var a = $('<div>').append(raw_html);
//do modifications to variable a
$(a).html() will display the correct html
NOTE this will strip head and other tags as discussed here
heres a plnkr

html generation via javascript: avoiding htmltidy error

I have a web page that generates HTML via JavaScript.
When validating using HTML validator 0.9.5.1 in Firefox 22, I get an error: 'document type does not allow element "span" here'
I am using this JavaScript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...<body>...
<script type='text/javascript'>
var someHtml = '<span>Hello world!</span>';
var e;
e = window.document.createElement('div');
e.innerHTML = someHtml;
window.document.body.appendChild(e);
</script>
Obviously the parser assumes that <span> is nested inside <script>
How should i rewrite the JavaScript to pass HTML validation? I would prefer a solution that does not require me to create HTML elements.
Note: The answers in Avoiding HTML-in-string / html() in a jQuery script do not help me since I know that the code works. I want to reformat to avoid validation errors.
the pre element is for preformatted text, not more HTML.
HTML Tidy's objection is that you are putting something that it believes you expect the browser to render as HTML, you need to scape the entities (replacing < and > with < and >) so that it is interpretted as text.
UPDATE IN RESPONSE TO COMMENT:
With an XHTML doctype, the document must be wellformed XML. So, you need CDATA marks inside your script tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hello world</title>
</head>
<body>
<script type='text/javascript'>
//<![CDATA[
var someHtml = "<div>Hello world!</div>";
var e;
e = window.document.createElement('div');
e.innerHTML = someHtml;
window.document.body.appendChild(e);
//]]>
</script>
</body>
</html>
You can't put <div> inside <pre>. <pre> can contain phrasing content only, where <div> is not.
Also you should wrap your script with <![CDATA[ ... ]]> section since doctype is XHTML.

JavaScript object properties are "sometimes" undefined

I am very confused.
I created the following script which is located at http://tapmeister.com/test/dom.html. For some unknown reason, tinymce.editors.ta1 and tinymce.editors[0] show up as undefined, and attempting to use a method under them results in an error. But when I inspect tinymce or tinymce.editors using FireBug, I see them in the DOM.
So, I create a jsfiddle http://jsfiddle.net/JWyWM/ to show the people on stackoverflow. But when I test it out, tinymce.editors.ta1 and tinymce.editors[0] are no longer undefined, and the methods work without error.
What is going on??? Maybe something to do with public/protected/private properties? How do I access methods such as tinymce.editors.ta1.hide()? Thank you!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({selector: "textarea#ta1"});
tinymce.init({selector: "textarea#ta2"});
console.log(tinymce);
console.log(tinymce.editors);
console.log(tinymce.editors.ta1);
console.log(tinymce.editors[0]);
//tinymce.editors.ta1.hide();
//alert('pause');
//tinymce.editors.ta1.show();
</script>
</head>
<body>
<form>
<textarea id="ta1"></textarea>
<textarea id="ta2"></textarea>
</form>
</body>
</html>
TinyMCE doesn't do all of the setup work immediately when you call init. It provides a callback, setup, to tell you when the work is done.
So if you provide a setup callback, you can interact with the editor instance then.
Here's an example (I've also moved your scripts to the end, which is best practice regardless):
Live Example | Live Source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
</head>
<body>
<form>
<textarea id="ta1"></textarea>
<textarea id="ta2"></textarea>
</form>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "#ta1, #ta2",
setup: function(e) {
console.log("Editor " + e.id + " is ready");
}
});
</script>
</body>
</html>
Now, if you want to actually access the editor instance, bizarrely TinyMCE doesn't add it to tinymce.editors until after calling the setup function. But if you throw in a brief yield, you're all set. Here's the above with a changed setup function:
Live Copy | Live Source
setup: function(e) {
// Bizarrely, TinyMCE calls `setup` *before* adding
// the relevant editor to `tinymce.editors`,
// so we have to yield briefly
console.log("Editor " + e.id + " is ready");
if (e.id === "ta2") {
console.log("It's ta2, I'll hide it in a moment.");
setTimeout(function() {
tinymce.editors[e.id].hide();
}, 0);
}
}
So why did it work on jsFiddle? Well, jsFiddle has a truly brain dead surprising default setting, which is to put all of your script in a window#load callback function. window#load happens very late in the load process, after all external resources have been loaded. (You can see that in the jsFiddle UI, it's the second drop-down list on the left.) So apparently TinyMCE was completely ready at that point, where it isn't earlier in the cycle.
Side note: 99.9% of the time, there is absolutely no point in supplying a tag name with an id selector, e.g. textarea#ta1. id values are unique, so you don't have to qualify them unless you explicitly want to avoid matching an element that may sometimes have one tag name, or other times have another, which is a pretty unusual use case.
There's a large chance that your script is running before tinyMCE has actually loaded. It might be the case that it loads faster from your test site so that is why it works.
Use as a quick check.

Javascript XMLSerializer case sensitive

I'm generating a KML document in Javascript and i'm trying to use XMLSerializer to generate the XML file but it's generating all lower case tags even though i create the tags in capital in the DOM.
Is it the DOM that mangles the capitalization or the XMLSerializer? Is there any way to get around it or am I missing something? I've tried this in both Chrome and Firefox.
The KML document is to be imported into Google Earth and it seems it doesn't accept lower case tags.
Based on testing in FF4, the following will work:
Use document.createElementNS ("http://www.opengis.net/kml/2.2", elementName) instead of document.createElement(elementName).
Use elt.appendChild (document.createTextNode (text)) instead of elt.innerHTML = text.
The following works for me (preserving case) in FF 5 beta in an XHTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script type="text/javascript">
function test() {
var kml = document.getElementsByTagName("kml").item(0);
window.alert (new XMLSerializer().serializeToString(kml));
}
</script>
</head>
<body onload="test()">
<kml id="kml" xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>KML Samples</name>
<open>1</open>
<description>samples</description>
<Style id="downArrowIcon">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/kml/pal4/icon28.png</href>
</Icon>
</IconStyle>
</Style>
</Document>
</kml>
</body>
</html>
It doesn't matter if you add elements with capital letters, the DOM manages them always in lower case. Just check it with firebug, you won't see uppercase tags.
In case your doctype is set to XHTML it even breaks standard compliance.
in XHTML attributes and elements must be all lower-case
UPDATE: just checked following:
var test = document.createElement("DIV");
// test.outerHTML returns "<div></div>"
So already when you create the element, it's being parsed and converted to lowercase.

Document Type Definition in html

If i add the Js Script above This Line <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Then CSS Is not working. Is There is any way to solve this issue
<script type="text/javascript">
<?php $data3 = getmaildata(); ?>
var collection = [<?php echo $data3; ?>];
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>.:: sample ::.</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
A script element can appear in the head or in the body, it can't appear before the Doctype and no element can appear outside the root element (<html>).
If the Doctype (with a couple of provisos which don't apply in this case) isn't the very first thing in a document then browsers will enter Quirks mode (and emulate bugs seen in older browsers with CSS and DOM handling).
There is no way around this (that is well supported by browsers), so just write valid code and don't try to put a script element somewhere that it isn't allowed.
<script> tags are usually placed in <head> or just before </body>, I don't know if it's related but your code is still invalid.
What happens if you put the SCRIPT element in its proper place, inside the HEAD section or in the BODY?
Also, I don't know what $data3 contains, but if it's a string and not an integer for instance, then it should be encapsulated in quotation marks.
The doctype declaration should be the very first thing in an HTML document, before the tag.
The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly.
http://www.w3schools.com/tags/tag_DOCTYPE.asp

Categories

Resources