Placing AJAX response into container that can be immediately used and manipulated

Question

I'm running a simple ajax call and get the returned results:

$.get('/page.html',function(data){});

In order for me to do stuff to the information, i have to place it into a div container. From there I can manipulate the data.

$.get('/page.html',function(data){
  $('#results').html(data);
  $('#results').html().indexOf('^');
  $('#results ul').remove();
});

<div id="results"></div>

So my question is, is there anyway that i can take the response data and put it into it's own container without setting up a div on the page? I tried doing something like this:

var myData = $(data);

but it's not the same thing. Doing something like this:

myData.find('ul').remove();

Any ideas? So the question again is, how do i put the response into a variable I can manipulate and treat as if it was put into an element on the page?

Here's sample data from the page I'm bringing in:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<!-- BC_OBNW -->

<head>

<title>TEST</title>

<link href="/StyleSheets/ModuleStyleSheets.css" type="text/css" rel="StyleSheet" />

<script type="text/javascript">var jslang='EN';</script>

<link rel="stylesheet" href="/CatalystStyles/Box.css?vs=b1722.r464991-phase1" type="text/css" media="screen" />

<script type="text/javascript" src="/CatalystScripts/Java_Box.js?vs=b1722.r464991-phase1"></script>

</head>

<body>

^,["C","A","0790","0603","PN","S","M","2","Standard","/krc-ea-ca07900603pnsm2"," CA07900603PNSM2","Doors","KRC-EA"],["C","A","0790","0609","PN","S","M","2","Standard","/krc-ea-ca07900609pnsm2"," CA07900609PNSM2","Doors","KRC-EA"],["C","A","0790","1203","PB","S","M","2","Standard","/krc-ea-ca07901203pbsm2"," CA07901203PBSM2","Doors","KRC-EA"],["C","A","0790","1203","PN","S","M","2","Standard","/krc-ea-ca07901203pnsm2"," CA07901203PNSM2","Doors","KRC-EA"],["C","A","0790","1209","PB","S","M","2","Standard","/krc-ea-ca07901209pbsm2"," CA07901209PBSM2","Doors","KRC-EA"],["C","A","0790","1209","PN","S","M","2","Standard","/krc-ea-ca07901209pnsm2"," CA07901209PNSM2","Doors","KRC-EA"],["C","A","1180","0603","PN","S","M","2","Standard","/krc-ea-ca11800603pnsm2"," CA11800603PNSM2","Doors","KRC-EA"],["C","A","1180","0609","PN","S","M","2","Standard","/krc-ea-ca11800609pnsm2"," CA11800609PNSM2","Doors","KRC-EA"],["C","A","1180","1203","PB","S","M","2","Standard","/krc-ea-ca11801203pbsm2"," CA11801203PBSM2","Doors","KRC-EA"],["C","A","1180","1203","PN","S","M","2","Standard","/krc-ea-ca11801203pnsm2"," CA11801203PNSM2","Doors","KRC-EA"],["C","A","1180","1209","PN","S","M","2","Standard","/krc-ea-ca11801209pnsm2"," CA11801209PNSM2","Doors","KRC-EA"],<ul id="webapp24958pagination" class="pagination webapp">

<li class="pag-current">1</li>

<li class="pag-number"><a href="/Default.aspx">2</a></li>

<li class="pag-next"><a href="/Default.aspx">Next</a></li>

</ul>



</body>

</html>

Possible duplicate http://stackoverflow.com/questions/327047/what-is-the-most-efficient-way-to-create-html-elements-using-jquery — k0pernikus, Aug 03 '15 at 18:17
Oh, but it is the same. The only difference is in what `myData` contains. In the first case you have a div that contains the result selected, and in the second you have the result selected directly. — Kevin B, Aug 03 '15 at 18:17
Not a duplicate. I'm not trying to create an Element on the page. I'm trying to avoid that. @Kevin, but when i do myData.find('ul').remove(). That doesn't work. If i do the same thing to $('#results').find('ul').remove(), it works just fine — Damien, Aug 03 '15 at 18:36
Right, because .find looks at children. What you're looking for instead is .filter since the ul is one of the several selected elements. — Kevin B, Aug 03 '15 at 18:36
But... if i do $(data).find('ul').remove(); , that works just fine. Shouldn't myData.find..... work the same? — Damien, Aug 03 '15 at 18:45

score 0 · Answer 1 · answered Aug 03 '15 at 18:45

0

Create a wrapper element (not inserted into the DOM) and work from there:

var myData = $('<div>').html(data);
myData.find('ul').remove();

answered Aug 03 '15 at 18:45

js1568

7,012
2
27
47

Not having any luck... just did exactly that, and to see the results, i placed it into a container on the page like so: $('#results').html(myData.html()) and all i get is blank – Damien Aug 03 '15 at 18:56
You are saying that `$('#results').html(data)` works but `$('
').html(data)` does not?
– js1568 Aug 03 '15 at 19:03
Are you trying to retrieve JSON data or an html template from `/page.html`? – Daniel Lizik Aug 03 '15 at 19:06
@js... exactly. Also, daniel, it's loading an html page. – Damien Aug 03 '15 at 19:16
Are you sure you are putting the code inside the AJAX callback function? – js1568 Aug 03 '15 at 19:25
Definitely in the ajax callback function. Again, if i just go straight up $('#results').html(data), then the info shows up – Damien Aug 03 '15 at 19:37
Can you add the output from `data` to your question? – js1568 Aug 03 '15 at 19:54

Placing AJAX response into container that can be immediately used and manipulated

1 Answers1