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
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
Share Improve this question asked Feb 2, 2013 at 22:58 user962206user962206 16.1k65 gold badges184 silver badges272 bronze badges 2 |2 Answers
Reset to default 19I'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
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
console.log($(data).find("#content").html());instead do you still get an error? BTW, using the variabledatain multiple places is confusing....maybe usesuccess: function (response) {...– mccannf Commented Feb 3, 2013 at 0:19