JQuery unrecognized expression on Ajax response

Question

I have this JQuery Ajax Form.

$('#modal-body-sign-in').on('submit', '#sign-in', function(e) {
        e.preventDefault();
        var data = $(this).serialize();
        var url = $(this).attr('action');
        $.ajax({
            //this is the php file that processes the data and send mail
            url : url,
            type : "POST",
            data : data,
            dataType: "html",
            //Do not cache the page
            cache : false,
            //success
            success : function(data) {
                //console.log(data.content);

                console.log($(data));
                //$('#modal-body-sign-in').html(data);
            }
        });
    })

on the response, when i console.log(data); in the console it shows me the responded html but when I do this console.log($(data));it gives me this error

Uncaught Error: Syntax error, unrecognized expression:

<html>
<head>
<style>
ul {
    margin: 0%;
}

ul li {
    display: inline;
    list-style-type: none;
    float: left;
}
</style>
<title>Insert title here</title>
</head>
<body>
    <!--  Ajax Container. DO NOT REMOVE THE DIV CONTENT  FOR AJAX ACCESS! -->
    <div id="content">
        <div id="modal-body">

            <form id="doLogin" name="doLogin" action="/HitPlay/doLogin" method="post">

                <fieldset>
                    <ul id="doLogin_" class="errorMessage">
            <li><span>Incorrect username or password</span></li>    </ul>

                <br/>           

                <br/>

                    <label>Username</label>                 
                    <input type="text" name="userBean.username" value="" id="doLogin_userBean_username"/>
                    <br/>
                    <label>Password</label>
                    <input type="password" name="userBean.password" id="doLogin_userBean_password"/>
                    <br />

                    <input type="submit" id="doLogin_0" value="Submit"/>

                </fieldset>
            </form>





        </div>

    </div>
</body>
</html> jquery-1.9.0.min.js:2
a.error jquery-1.9.0.min.js:2
f jquery-1.9.0.min.js:2
x jquery-1.9.0.min.js:2
a jquery-1.9.0.min.js:2
st.fn.extend.find jquery-1.9.0.min.js:2
st.fn.st.init jquery-1.9.0.min.js:1
st jquery-1.9.0.min.js:1
$.ajax.success localhost:59
f jquery-1.9.0.min.js:1
p.fireWith jquery-1.9.0.min.js:1
r jquery-1.9.0.min.js:3
r

I was doing this

  $(data)

because I want to get a fragment of the responded HTML page

Put it in a hidden div and then select it or just send the desired output from the server or parse it as text because the data is not in the DOM — Seder, Feb 02 '13 at 23:18
If you use something like `console.log($(data).find("#content").html());` instead do you still get an error? BTW, using the variable `data` in multiple places is confusing....maybe use `success: function (response) {...` — mccannf, Feb 03 '13 at 00:19

Baptiste LARVOL-SIMON · Answer 1 · 2013-02-26T17:02:06.607

I've got exactly the same problem since I've upgraded to jQuery 1.9.x. actually the simple $(data) generates the crash, nothing else. I had this problem a few times before (without previous versions than 1.9), but I don't remember its issue...

anyway it is a totally blocking trouble... still looking for a reason for that and a fix.

EDIT:

If I'm doing that :

$.ajax('/',function(html){
  html = $('<div></div>').append(html);
  $(html);
});

It works fine. If I do :

$.ajax('/',function(html){
  $(html);
});

It gives me a (through the FF error console) :

Erreur : Error: Syntax error, unrecognized expression: <div id="...">(...)
jquery.min.js - line : 4

EDIT 2:

Ok found the solution... after a long search and tests : http://stage.jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstring

So I now do something like :

$.ajax('/',function(html){
  $($.parseHTML(html));
});

Anyway jQuery is always confusing my first element with the one, but at least it works

:'-( I'm also face this same problem. After seen this post, i got a answer. Thanks.. :-) — Ranjith, Apr 16 '13 at 13:26

score 3 · Answer 2 · answered Apr 30 '13 at 17:49

3

If you are using jQuery1.9, the problem may lie in the content being loaded. There is a new update which requires that the first character in the response be a < [AKA the less than symbol]. Even whitespace will cause this to break and throw the dreaded "Uncaught Error: Syntax error, unrecognized expression:" error.

I'd recommend checking this before using the suggested workaround above. Its not a bug its a security effort.

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

answered Apr 30 '13 at 17:49

Ryan Ore

1,315
17
23

Wow, had worked on this for a couple of hours I had a space before my
in my ajax response which was causing this error. This should be marked as the answer. thanks!
– Jimmy Johnson May 01 '13 at 14:03
Extremely helpful. I first changed my markup templates, but instead of reducing their readability, I think a more robust solution is the recommendation at your link & above, changing `$(htmlString)` to `$($.parseHTML(htmlString))` – ajmicek Jul 11 '13 at 04:01
1

Very late response but if whitespace is the issue, why not use $(html.trim()) – mbuff24 Jan 20 '14 at 22:11
@mbuff24, there are always different ways to skin a cat, but you can't really argue with the language used in the docs. It is pretty clear. "Use jQuery.parseHTML() to parse arbitrary HTML". – Ryan Ore Jan 21 '14 at 17:30

JQuery unrecognized expression on Ajax response

2 Answers2

Linked