JQuery + client template = "Syntax error, unrecognized expression"

Question

I just upgraded jQuery from 1.8.3 to 1.9, and it suddenly started crashing.

This is my template:

<script type="text/template" id="modal_template"> <div>hello</div> </script> 

Here is how I read it:

 modal_template_html = $("#modal_template").html(); 

This is how I convert it to a jQuery object (I need to use jQuery methods on it):

 template = $(modal_template_html); 

... and jQuery crashed!

Error: syntax error, unrecognized expression: <div> hello </div>

slice.call (docElem.childNodes, 0) [0] .nodeType;

jquery-1.9.0.js (line 3811)

However, if I declare the template as a text variable, it starts working again:

 var modal_template_html = '<div>hello</div>'; 

Can someone help me figure this out?

UPDATE : The jquery team heard and changed things in normal mode in 1.10:

The biggest change you'll probably see is that weve relaxed the criteria for processing HTML in $ (), which allows you to use spaces and newlines, as it was before version 1.9

Answer 1

Prints a line starting with a new line (or nothing but "<") is considered an HTML line in jQuery 1.9

http://stage.jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstring

Answer 2

I think your template starts with a space or tab.

You can use jQuery as follows:

 $($.parseHtml(modal_template_html)[1]); 

or parse a line to remove spaces at the beginning:

 $(modal_template_html.replace(/^[ \t]+/gm, '')); 

Answer 3

EugeneXa mentioned this in a comment, but he deserves an answer:

 var template = $("#modal_template").html().trim(); 

This truncates the missing spaces from the beginning of the line. I used it from Mustache, like this:

 var markup = Mustache.render(template, data); $(markup).appendTo(container); 

Answer 4

you can use

 var modal_template_html = $.trim($('#modal_template').html()); var template = $(modal_template_html); 

Answer 5

As an official document: Starting from 1.9, a line is considered only HTML if it starts with a "less" ("<") character. The Migrate plugin can be used to restore behavior to 1.9.

If the string is known as HTML, but can start with arbitrary text that is not an HTML tag, pass it to jQuery.parseHTML (), which will return an array of DOM nodes representing the markup. From this, you can create a jQuery collection, for example: $($.parseHTML(htmlString)) . This is considered best practice when processing HTML templates, for example. This is a simple use of literals such as $("<p>Testing</p>").appendTo("body") .

Answer 6

I had the same error:
"Syntax error, unrecognized expression: //"
This is a known bug in jQuery, so I had to think about a workaround,
What I've done:
I changed the script tag to div
and added to angular this code
and the error disappeared ...

 app.run(['$templateCache', function($templateCache) { var url = "survey-input.html"; content = angular.element(document.getElementById(url)).html() $templateCache.put(url, content); }]);