Manipulate AJAX response in HTML format

Question

I am using an AJAX request to return 'raw' HTML content, which I was then planning to manipulate before rendering it on the page. The AJAX request returns the HTML data:

function AjaxTest(url){
    $.ajax({
        url: "index.aspx?" + url,
        success: function(result){gatherData(result)},
        dataType: 'html'
    });
}

I then call another function called gatherData(result) with the result of the AJAX request as the function parameter.

function gatherData(data){
  var $data = $(data);

  tables = $data.find('body table');

At this point my tables var is empty, but I expected it to reference to the tables found within the AJAX responses' body. Is there any way to manipulate the HTML returned via. an AJAX request before rendering it? Below is the HTML response from the AJAX request. All I need to do is access the tables within the body.

<!DOCTYPE HTML><html>
<HEAD>
<title></title>
</HEAD>
<BODY>
<TABLE border=1 cellspacing=0 cellpadding=0 alignment="">
<TBODY>
<TR><TD>x-value</TD><TD>Financial Plan</TD></TR><TD>09/11/2015</TD>
<TD>0</TD>
</TR><TD>10/11/2015</TD>
<TD>0</TD>
</TR><TD>11/11/2015</TD>
<TD>0</TD>
</TR><TD>12/11/2015</TD>
<TD>0</TD>
</TR><TD>13/11/2015</TD>
<TD>0</TD>
</TR><TD>14/11/2015</TD>
<TD>0</TD>
</TR><TD>15/11/2015</TD>
<TD>0</TD>
</TR></TBODY></TABLE><TABLE border=1 cellspacing=0 cellpadding=0 alignment="">
<TBODY>
<TR><TD>x-value</TD><TD>Business Forecast</TD></TR><TD>09/11/2015</TD>
<TD>0</TD>
</TR><TD>10/11/2015</TD>
<TD>0</TD>
</TR><TD>11/11/2015</TD>
<TD>0</TD>
</TR><TD>12/11/2015</TD>
<TD>0</TD>
</TR><TD>13/11/2015</TD>
<TD>0</TD>
</TR><TD>14/11/2015</TD>
<TD>0</TD>
</TR><TD>15/11/2015</TD>
<TD>0</TD>
</TR></TBODY></TABLE><TABLE border=1 cellspacing=0 cellpadding=0 alignment="">
<TBODY>
<TR><TD>x-value</TD><TD>Operational Planned</TD></TR><TD>09/11/2015</TD>
<TD>0</TD>
</TR><TD>10/11/2015</TD>
<TD>0</TD>
</TR><TD>11/11/2015</TD>
<TD>66358</TD>
</TR><TD>12/11/2015</TD>
<TD>65990</TD>
</TR><TD>13/11/2015</TD>
<TD>55993</TD>
</TR><TD>14/11/2015</TD>
<TD>0</TD>
</TR><TD>15/11/2015</TD>
<TD>0</TD>
</TR></TBODY></TABLE><TABLE border=1 cellspacing=0 cellpadding=0 alignment="">
<TBODY>
<TR><TD>x-value</TD><TD>Actual</TD></TR><TD>09/11/2015</TD>
<TD>0</TD>
</TR><TD>10/11/2015</TD>
<TD>0</TD>
</TR><TD>11/11/2015</TD>
<TD>62202</TD>
</TR><TD>12/11/2015</TD>
<TD>59261</TD>
</TR><TD>13/11/2015</TD>
<TD>49119</TD>
</TR><TD>14/11/2015</TD>
<TD>0</TD>
</TR><TD>15/11/2015</TD>
<TD>0</TD>
</TR></TBODY></TABLE>

</BODY>
</HTML>

It is not working what so ever, the `tables` var contains nothing. — Mike Resoli, Dec 17 '15 at 11:26
This will help you http://stackoverflow.com/questions/17724017/using-jquery-to-build-table-rows-from-ajax-responsejson?answertab=active#tab-top — Parth Trivedi, Dec 17 '15 at 11:27
Please write question properly? where is the problem? to Generate Html from JSON ? — Parth Trivedi, Dec 17 '15 at 11:29
`data` contains the the response with no problems, the problem occurs when trying to find the `body table` elements. @ParthTrivedi thanks however that is not the solution. — Mike Resoli, Dec 17 '15 at 11:29
As per my view you need to place this data in some div first make that div hidden and then access elements in it — Guru, Dec 17 '15 at 11:29
@ParthTrivedi the question is written plain and simple. "Is there any way to manipulate the HTML returned via. an AJAX request before rendering it?" — Mike Resoli, Dec 17 '15 at 11:33
Just curious, why you're returning HTML data instead of a webmethod call? [Webmethod](https://msdn.microsoft.com/en-us/library/byxd99hx(v=vs.90).aspx) will either return json or xml data which will be easy to manipulate and light weight. However, can you update your question with the data that you receive from ajax call? Use Dom inspector to grab data. — Ravimallya, Dec 17 '15 at 11:33
http://stackoverflow.com/questions/4408571/how-do-i-manipulate-html-returned-in-an-ajax-response may be helpful to you. — Ravimallya, Dec 17 '15 at 11:39
Wrapping HTML string in jq object using `$(HTMLCodeSource)` just returns the `body` content, and so using `$(HTMLCodeSource).find('body')` fails. — A. Wolff, Dec 17 '15 at 11:50

Jai · Accepted Answer · 2015-12-17T12:01:21.973

Is there any way to manipulate the HTML returned via. an AJAX request before rendering it?

In short: Yes!

How?

You are actually doing it correct but partially, You need to have a virtual element to store the response in and that element can be used to manipulate the data before rendering, in javascript document.createElement() can be used and $('<tag>',{option:option}) can be used :

function gatherData(data){
  var $data  = $(data),
      tables = $data.find('table'),
      div    = $('<div>', {html:tables});



      div.find('table').each(function(){
         $(this).find('td').append('dynamicValues.')
      });

  $(document.body).append(div);

}

Check the snippet below:

var table = '<table><tr><td>one</td><td>two</td><td>three</td></tr></table>';

var div = $('<div>',{ html:table});

$(div).find('td').append(' dynamic values.');

$(document.body).append(div);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Can you explain why you need to do so? – Manticore

As this question is been asked, i would say that the response is a string value which have some html tags, so directly htmlstrings are very hard to manipulate, so best way is to create a dummy element in the memory as suggested above and place the htmlstring in it, now javascript can be used to manipulate it because that has been now placed as a valid html.

Can you explain why you need to do so? – Manticore Dec 17 '15 at 11:59 — Manticore, Dec 17 '15 at 11:59
will add in the answer @Manticore – Jai Dec 17 '15 at 12:02 — Jai, Dec 17 '15 at 12:02

score 0 · Answer 2 · edited Dec 17 '15 at 11:35

0

You have to do like

var table = $("body").append("<div id='dataDiv'>"+data+"</div>").find("table");

$("#dataDiv").remove();

edited Dec 17 '15 at 11:35

Zakaria Acharki

66,747
15
75
101

answered Dec 17 '15 at 11:32

Parth Trivedi

3,802
1
20
40

Manipulate AJAX response in HTML format

2 Answers2