Dealing with jQuery parseHTML() and html() when using Google closure compiler,,,

Question

I have a simple set of statements that actually work (I have run that code and it does what I expect of it) that looks as follow:

result_xml = result.jqxhr.responseXML;
a = jQuery("data[name='calendar']", result_xml).text();
new_calendar = jQuery.parseHTML(a);
jQuery("div.calendar").html(jQuery("div.calendar table.calendar-table", new_calendar));

result comes from an AJAX reply, you should recognize the jqxhr field.

I expect a to be a string since I get a block of data with text(). The data is an HTML string that I saved in the XML document. So I can cast it this way:

a = /** @type {string} */ jQuery("data[name='calendar']", result_xml).text();

Now I convert that string to an HTML DOM thinking it would be an Element:

new_calendar = /** @type {Element} */ jQuery.parseHTML(a);

And that's where I get this weird error:

WARNING - invalid cast - must be a subtype or supertype
from: (Array.<(Element|null)>|null)
to : (Element|null)

So parseHTML() would be returning an array of elements (or null)?

Then I was trying to use the output of the parseHTML() in the html() function and there too, I have a hard time to understand what is going on.

WARNING - invalid cast - must be a subtype or supertype found : (Array.<(Element|null)>|null)
required: (Document|Element|Object.|jQuery|null|undefined)

Frankly, I do not see why the Google compiler makes it such that the output of one function cannot be the input of another, even if it works just fine in the real world.

Would an array of Element be considered a Document?

Then finally (yeah! all of that for 3 lines of JavaScript!) I get another error in regard to the input of the html() function:

WARNING - actual parameter 1 of jQuery.prototype.html does not match formal parameter found : jQuery
required: (function (number, string): ?|string|undefined)
jQuery("div.calendar").html(jQuery("div.calendar table.calendar-table", new_calendar));

Here too, it works in the real world... will the jQuery object automatically be converted to a string and then re-transformed to a set of tags to be added in my calendar?

Are all of these normal limitations of the closure compiler?

Based on Chad answer, I changed my code this way:

result_xml = result.jqxhr.responseXML;
a = /** @type {string} */ (jQuery("data[name='calendar']", result_xml).text());
new_calendar = jQuery.parseHTML(a);
jQuery("div.calendar").empty().append(jQuery("div.calendar table.calendar-table", new_calendar[0]));

I cast the text() output to string in closure;
I use element 0 of new_calendar instead of directly new_calendar.
I changed the html() with empty().append() since the append() function accepts a jQuery object as input

This makes the closure compiler happy.

Chad Killingsworth · Accepted Answer · 2016-01-12 21:58:05Z

5

Yes Absolutely this is expected behavior. There are many things that "work" in JavaScript. Closure-compiler attempts to force good behavior when asked.

As for jQuery - these are the normal limitations of the published jQuery API. With jQuery the code often supports undocumented behaviors (like you are listing). However the jQuery team is free to change behaviors that are not documented at any time.

Closure-compiler warns you if you are not matching what is listed as the API spec (and that definition is community maintained - so not always 100% right).

Here's the relevant specifications:

jQuery().html(string) - A string of HTML to set as the content of each matched element
jQuery.parseHTML('string') - Returns: Array

answered Jan 12, 2016 at 21:58

Chad Killingsworth

14.4k2 gold badges37 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

YANO Takashi · Accepted Answer · 2017-04-09 03:25:20Z

1

I use DOM API instead of jQuery. There is a full HTML text in data.

// create DOM parser object
var dom_parser = new DOMParser();
// parse HTML into DOM document object
var doc = dom_parser.parseFromString(data , "text/html");
// doc.body.innerHTML = body part in text, not object
// <body> tag is stripped.
// append the body part into div with the id "contentsarea".
$("#contentsarea").empty().append(doc.body.innerHTML);

answered Apr 9, 2017 at 3:25

YANO Takashi

113 bronze badges

Collectives™ on Stack Overflow

Dealing with jQuery parseHTML() and html() when using Google closure compiler,,,

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related