• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 744
  • Last Modified:

Parse String or JSON response to get a DOM element from the string / response

I am not too familiar with this.  I found a function on the Web that can make a cross domain query using jQuery and YSQL.  It seems to be working and returns everything from <body> to <body> in data.

What I want to do is actually edit the response in data so that it is equal to an element in the response.

e.g.

There is and element in the response that has this form:

 <table id="MainContentTable" cellpadding="0" cellspacing="0" width="100%">

... ....

</table>

I want the table tags and the innerHTML.

Is there a way to do that?  I'm not sure if data is simply a string, a JSON object, XML.  Seems like it should not be too hard.

// Accepts a url and a callback function to run.
function requestCrossDomain( site, callback ) {

	// If no url was passed, exit.
	if ( !site ) {
		alert('No site was passed.');
		return false;
	}

	// Take the provided url, and add it to a YQL query. Make sure you encode it!
	var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + site + '"') + '&format=xml&callback=?';

	// Request that YSQL string, and run a callback function.
	// Pass a defined function to prevent cache-busting.
	$.getJSON( yql, cbFunc );

	function cbFunc(data) {
	// If we have something to work with...
	if ( data.results[0] ) {
		// Strip out all script tags, for security reasons.
		// BE VERY CAREFUL. This helps, but we should do more.
		data = data.results[0].replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');
		// If the user passed a callback, and it
		// is a function, call it, and send through the data var.
		if ( typeof callback === 'function') {
			callback(data);
		}
	}
	// Else, Maybe we requested a site that doesn't exist, and nothing returned.
	else throw new Error('Nothing returned from getJSON.');
	}
}

Open in new window

0
sscotti
Asked:
sscotti
  • 4
1 Solution
 
KiasChaos83Commented:
You could do

alert($("#MainContentTable", $(data.results[0])).html());
0
 
leakim971PluritechnicianCommented:
For the cbFunc function use something like this :


function cbFunc(data) {
		// If we have something to work with...
		if ( data.results[0] ) {
			// Strip out all script tags, for security reasons.
			// BE VERY CAREFUL. This helps, but we should do more.
			data = "<div>" + data.results[0].replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '') + "</div>";
			// If the user passed a callback, and it
			// is a function, call it, and send through the data var.
			if ( typeof callback === 'function') {
				callback(data);
			}
			$("#putTableHere").append( $(data).find("table[id='MainContentTable']") );
		}
		// Else, Maybe we requested a site that doesn't exist, and nothing returned.
		else throw new Error('Nothing returned from getJSON.');
	}

Open in new window

0
 
leakim971PluritechnicianCommented:
test page :


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
//		requestCrossDomain("http://www.domain.com/path/to/page.php", cbFunc);
		var tbody = "<tr><td>HELLO</td></tr><tr><td><input type=\"text\" value=\"\"/></td></tr>"
		var json = {"results":["<html><head></head><body><h1>test</h1><table id=\"MainContentTable\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">" + tbody + "</table><h2>test</h2></body></html>"]};
		cbFunc(json);
	});
	// Accepts a url and a callback function to run.
	function requestCrossDomain( site, callback ) {
		// If no url was passed, exit.
		if ( !site ) {
			alert('No site was passed.');
			return false;
		}		
		// Take the provided url, and add it to a YQL query. Make sure you encode it!
		var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + site + '"') + '&format=xml&callback=?';
		
		// Request that YSQL string, and run a callback function.
		// Pass a defined function to prevent cache-busting.
		$.getJSON( yql, cbFunc );
	}

	function cbFunc(data) {
		// If we have something to work with...
		if ( data.results[0] ) {
			// Strip out all script tags, for security reasons.
			// BE VERY CAREFUL. This helps, but we should do more.
			data = "<div>" + data.results[0].replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '') + "</div>";
			// If the user passed a callback, and it
			// is a function, call it, and send through the data var.
			if ( typeof callback === 'function') {
				callback(data);
			}
			$("#putTableHere").append( $(data).find("table[id='MainContentTable']"));
		}
		// Else, Maybe we requested a site that doesn't exist, and nothing returned.
		else throw new Error('Nothing returned from getJSON.');
	}

</script>
</head>
<body>
<div id="putTableHere"></div>
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
work too : $("#putTableHere").append( $("#MainContentTable", data) );
function cbFunc(data) {
		// If we have something to work with...
		if ( data.results[0] ) {
			// Strip out all script tags, for security reasons.
			// BE VERY CAREFUL. This helps, but we should do more.
			data = "<div>" + data.results[0].replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '') + "</div>";
			// If the user passed a callback, and it
			// is a function, call it, and send through the data var.
			if ( typeof callback === 'function') {
				callback(data);
			}
			$("#putTableHere").append( $("#MainContentTable", data));
		}
		// Else, Maybe we requested a site that doesn't exist, and nothing returned.
		else throw new Error('Nothing returned from getJSON.');
	}

Open in new window

0
 
leakim971PluritechnicianCommented:
Thanks a lot for the points!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now