Finding an element by ID in an AJAX Response with jQuery
I need to post data to a php page and then I'd like to get the text of a certain div that is in the response but I can't seem to set things up correctly. I'm not too good with jQuery but I can usually figure things out fairly quickly... I've been at this for a minute and have tried everything I have found... I think I am just missing the right combination of stuff.
$.post("process.php", data , function (response) {
var w = window.open();
$(w.document.body).html(response);
console.log(typeof response); // yeilds string
//create jquery object from the response html
// var $data = $(response); // yeilds Uncaught Error: Syntax error, unrecognized expression: + whole html text
var success = $($.parseHTML(response)).find("#success");
console.log('success');
console.log(success); // see screenshot
console.log(success.text()); // yields nothing
console.log(success.val()); // yields undefined
// if (window.focus) {w.focus()};
},'html');
this is the output of console.log(success); and the red box is what I want from the response...
![this picture seems really tiny... it wasn't that tiny when I made it. I hope it is still readable][1]
and this does that:
var success = $(response).find("#success");
console.log('success');
console.log(success); // yeilds Uncaught Error: Syntax error, unrecognized expression: + whole html text in red
Response is...
<html><head>
<style>
div.totals {
font-family:calibri; font-size:.9em; display:inline-block;
border-width: 2px; border-style: solid; border-color: #FFD324;
background-color: #FAF5D7; color: #514721;
width: 500px;
}
div.error_invalid {
font-family:calibri; font-size:.9em; display:inline-block;
border-width: 2px; border-style: solid; border-color: #9999CC;
background-color: #EEEEFF; color: #7979B8;
}
</style>
</head>
<body>
<div class="totals">Total new rows added: 0 out of 0<br/></div>
<br/><br/>
<div class="totals">Total updated rows: 0 out of 0 <br/></div>
<div id="success">true</div>
</body></html>
And I have tried removing the style part and I added in the html, head and body tags in hope that it would help.... meaning, I have the same issues if the response only consists of the three divs.
Answer
Notice how all of the elements are on the same level? You need to use .filter() to narrow down the current selection to a single element in that selection, .find() will instead look at the descendants of the current selection.
var success = $($.parseHTML(response)).filter("#success");
console.log(success); // div#success