I'm trying to put a datetimepicker in my Rails 4 app. I decided to try this one: .
The instructions are relatively straightforward, but when I load the page, I get the following JS error message:
Uncaught SyntaxError: Failed to set the 'innerHTML' property on 'Element': The provided markup is invalid XML, and therefore cannot be inserted into an XML document.
If I pause on the line where this is happening in JQuery.extend.buildfragment:
tmp.innerHTML = wrap[1] + elem.replace( rxhtmlTag, "<$1></$2>" ) + wrap[2];
I see that it's trying to set innerHTML to this:
<div class="bootstrap-datetimepicker-widget dropdown-menu"><div class="datepicker"><div class="datepicker-days"><table class="table-condensed"><thead><tr><th class="prev">‹</th><th colspan="5" class="picker-switch"></th><th class="next">›</th></tr></thead><tbody></tbody></table></div><div class="datepicker-months"><table class="table-condensed"><thead><tr><th class="prev">‹</th><th colspan="5" class="picker-switch"></th><th class="next">›</th></tr></thead><tbody><tr><td colspan="7"></td></tr></tbody></table></div><div class="datepicker-years"><table class="table-condensed"><thead><tr><th class="prev">‹</th><th colspan="5" class="picker-switch"></th><th class="next">›</th></tr></thead><tbody><tr><td colspan="7"></td></tr></tbody></table></div></div></div>
Most XML validators plain about the ‹ value being invalid. However, I don't have control over how this string is constructed since this is internal in jquery. I know that the datetimepicker works for most people without any issues, so this seems to be something wrong in my environment.
I'm trying to put a datetimepicker in my Rails 4 app. I decided to try this one: https://github./Eonasdan/bootstrap-datetimepicker.
The instructions are relatively straightforward, but when I load the page, I get the following JS error message:
Uncaught SyntaxError: Failed to set the 'innerHTML' property on 'Element': The provided markup is invalid XML, and therefore cannot be inserted into an XML document.
If I pause on the line where this is happening in JQuery.extend.buildfragment:
tmp.innerHTML = wrap[1] + elem.replace( rxhtmlTag, "<$1></$2>" ) + wrap[2];
I see that it's trying to set innerHTML to this:
<div class="bootstrap-datetimepicker-widget dropdown-menu"><div class="datepicker"><div class="datepicker-days"><table class="table-condensed"><thead><tr><th class="prev">‹</th><th colspan="5" class="picker-switch"></th><th class="next">›</th></tr></thead><tbody></tbody></table></div><div class="datepicker-months"><table class="table-condensed"><thead><tr><th class="prev">‹</th><th colspan="5" class="picker-switch"></th><th class="next">›</th></tr></thead><tbody><tr><td colspan="7"></td></tr></tbody></table></div><div class="datepicker-years"><table class="table-condensed"><thead><tr><th class="prev">‹</th><th colspan="5" class="picker-switch"></th><th class="next">›</th></tr></thead><tbody><tr><td colspan="7"></td></tr></tbody></table></div></div></div>
Most XML validators plain about the ‹ value being invalid. However, I don't have control over how this string is constructed since this is internal in jquery. I know that the datetimepicker works for most people without any issues, so this seems to be something wrong in my environment.
- 1 Why are you using an xml validator? – epascarello Commented Jan 7, 2015 at 17:06
- @epascarello The error message is telling me that the markup is "invalid XML", so I was curious to find out what about the markup that JQuery was trying to insert might be considered invalid. Just using it to try and debug the issue. – Kohanz Commented Jan 7, 2015 at 17:09
-
1
@Kohanz what is your
<!DOCTYPE>? You're working with XML I guess? – Pointy Commented Jan 7, 2015 at 17:13 - @Pointy HTML. This error occurs on an HTML page in a rails app in the JS code that is trying to initialize the datepicker control. – Kohanz Commented Jan 7, 2015 at 17:16
- 1 In Firefox, there's a "View page info" entry in the right-button page menu. That should document type and the render mode. – Pointy Commented Jan 7, 2015 at 17:19
2 Answers
Reset to default 1The problem was that the page was being served up as XHTML+XML, rather than HTML (credit to @Pointy for pointing this out).
I found that in my application_controller.rb, there was a line as follows:
before_filter{ response.content_type = 'application/xhtml+xml' }
I don't actually know why this line was present, but removing this line solved the issue and has allowd me to move forward.
XHTML does not support document.write or .innerHTML. Due to the fact, that jQuery inserts the new code using one of these methods, all XHTML patible browsers will error out.
XHTML with application/xhtml+xml does not support raw modification of the source using any of these jQuery methods: .append(), .html(), .insert...(), etc.
Instead, query for some JSON data and insert the AJAX-received values into either pre-defined tags using .text() / .val() or dynamically create those nodes using document.createElement('someTag').
https://www.w3/MarkUp/2004/xhtml-faq#docwrite