PDA

View Full Version : ajax get html: here I get whole page but I want only div with id



lse123
06-16-2012, 07:28 PM
http://localhost/goldenLandEuRe/new3.html

Here I get (after press button) whole page... but I want only=getElementById("article-content-main"), what to do?


<!-- new3.html -->
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert('Load was performed.');
$.get('getHTML.php', function(data) {
$('div').html(data);
alert('Load was performed.');
});



});
});
</script>
</head>
<body>
<div></div>
<button>Get CD info</button>
</body>
</html>



<?php // getHTML.php

$c = curl_init('http://www.yyy.com/cyprus-property/taxes-fees.html');
curl_setopt($c,CURLOPT_RETURNTRANSFER, true);

$html = curl_exec($c);

if (curl_error($c))
die(curl_error($c));

// Get the status code
$status = curl_getinfo($c, CURLINFO_HTTP_CODE);

curl_close($c);

echo $html;

?>

ApacheTech
06-16-2012, 08:56 PM
I'm afraid I don't know JQuery, but here it is using Javascript. I've annotated it to make it easier to understand the process.


<!DOCTYPE html>
<html>
<head>
<!-- Page Title -->
<title>Ajax Code Injection Example</title>
<!-- Meta Block -->
<meta content="text/html; charset=iso-8859-1" http-equiv="content-type" />
<meta content="Ajax Code Injection Example" name="description" />
<meta content="Ajax, Code Injection, Example" name="keywords" />
<meta content="all,index,follow" name="robots" />
<meta content="noodp" name="msnbot" />
<meta content="global" name="distribution" />
<!-- Javascript Scripts -->
<script type="text/javascript">
//<![CDATA[

$(document).ready(function () {
$("button").click(function () {
alert('Load was performed.');
$.get('getHTML.php', function (data) {

// Create a new DIV to house Ajax HTML
var divAjax = document.createElement('div');
divAjax.setAttribute('id', 'divAjax');
divAjax.setAttribute('style', 'display:none');
divAjax.innerHTML = data;

// Inject the DIV to the body of the page
document.appendChild(divAjax);

// Grab newly injected DIV information
divAjax = document.getElementById('divAjax');

// Grab article DIV to output information
var divArticle = divAjax.getElementById('divArticle');

// Inject relevent information from divAjax into divArticle
divArticle.innerHTML = document.getElementById('article-content-main').innerHTML;

// Clean up body of page
document.removeChild(divAjax);

// DEBUG
// alert('Load was performed.');
});
});
});

//]]>
</script>
</head>
<body>
<div id="divArticle">
</div>
<button>
Get CD info</button>
</body>
</html>

lse123
06-17-2012, 01:20 PM
Do not seem to work ... only alert appear...

missing this:
<script type="text/javascript" src="jquery.js"></script>

PHP code is it OK???

you may try with

$c = curl_init('http://www.propertyinpolis.com/cyprus-property/taxes-fees.html');

jscheuer1
06-17-2012, 02:57 PM
Using jQuery:


<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$('div').load('getHTML.php #article-content-main', function(){
alert('Load was performed.');
});
});
});
</script>
</head>
<body>
<div></div>
<button>Get CD info</button>
</body>
</html>

The jQuery AJAX .load() function is unique in that it can fetch specific contents from the page without too much fuss or bother. Using $.get() or any of the other jQuery AJAX functions requires that you parse the incoming data unless you want all of it.

For more on .load() as used above see:

http://api.jquery.com/load/

About ApacheTech's approach, there is no:



divAjax.getElementById('divArticle');

getElementByID can only be applied to the document.

There may also be other problems with it.

lse123
06-17-2012, 04:10 PM
worked as: // change #div in load()


<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> $(document).ready(function(){
$("button").click(function(){
$('div').load('getHTML.php #article_main', function(){
alert('Load was performed.');
});
});
});
</script>
</head>
<body>
<div></div>
<button>Get CD info</button>
</body>
</html>
as of js (not jQ) approach, can with php get a particular id(#article_main), rather than, send to client all <Html> doc?

jscheuer1
06-17-2012, 06:52 PM
Anything that can be done with jQuery can be done without it. Generally it requires more code. In this case, probably considerably more.

I once tried to reverse engineer the jQuery AJAX .load() function. I got lost. Most browsers will allow you to get the external page as an XML document. But some will not, and the external page has to be valid XML for that to work. So you're left with populating a div with the text/html result and parsing it for the content you want. As long as it has a unique id or is otherwise identifiable once made a part of the page in an unseen div, that's not too hard. But if you're importing an id that's already on the page before removing the existing one, it can get tricky. I guess you can do a getElementsByTagName(*) on the imported content and check each one's id.

And ApacheTech's code still uses jQuery for the request. Just to get a serviceable XMLHTTPRequest object without jQuery is at least 5 lines of code. Done right it's more like 20.

Do you have a real need to do this without jQuery?

ApacheTech
06-17-2012, 07:49 PM
Using jQuery:
About ApacheTech's approach, there is no:


divAjax.getElementById('divArticle');

getElementByID can only be applied to the document.

There may also be other problems with it.

This is how I've always done it with GreaseMonkey (which allows XSS_HttpRequests to any domain). You grab the whole document, place it within a dummy div and then append the dummy div to the page, with it's display style set to none so it is invisible. Then, because the div is now an element on the page, you can navigate it's DOM Tree with getElementByID as any other element on the page. Then clean up afterwards by removing the dummy div.

lse123
06-17-2012, 07:58 PM
jQ only is ok!
I did it with id:
#article_main
and url get from:
propertyinpolis.com/cyprus-property/taxes-fees.html

jscheuer1
06-18-2012, 04:59 AM
This is how I've always done it with GreaseMonkey (which allows XSS_HttpRequests to any domain). You grab the whole document, place it within a dummy div and then append the dummy div to the page, with it's display style set to none so it is invisible. Then, because the div is now an element on the page, you can navigate it's DOM Tree with getElementByID as any other element on the page. Then clean up afterwards by removing the dummy div.

Well you cannot depend upon your users having Firefox with GreaseMonkey installed now can you?

In any case, in normal javascript there's no cross domain HTTP request, and getElementById can only be applied to the document. The former is merely a security precaution that I suppose GreaseMonkey overrides. The latter is actually the specification. In any browser without GreaseMonkey or similar one can do:


<div id="outer">
<div id="inner"></div>
</div>
<script type="text/javascript">
alert('document.getElementById: ' +
document.getElementById +
'\ndocument.getElementById(\'outer\').getElementById: ' +
document.getElementById('outer').getElementById);
</script>

Alerts:


document.getElementById: function getElementById() {
[native code]
}
document.getElementById('outer').getElementById: undefined

One can easily make an Object.prototype.getElementById() function:


Object.prototype.getElementById = function(id){
var els = this.getElementsByTagName('*');
for(var i = 0; i < els.length; ++i){
if(els[i].id === id){
return els[i];
}
}
return null;
};

However, not all browsers will roll with that. Firefox will, so that's probably what GreaseMonkey does.

ApacheTech
06-18-2012, 08:43 AM
I didn't realise you couldn't do that in Javascript as standard. I've always taken it as read that you could, it seemed a basic method. My apologies. Greasemonkey is more powerful than I thought! :p

jscheuer1
06-18-2012, 10:04 AM
It's of questionable utility. Not GreasMonkey in general, but that particular ability.

The reason being that according to standards there may be only one element on a page with a given id. If your page is standards compliant, then there will be only one element on the page with the id you seek and you may use document.getElementById() to get it. There's no need to look within a specific element for it.

But I've been thinking about this issue visa vis the original question here. Say you were importing an element from another page by its id, and you wanted to be able to import from other pages as well and/or where you were importing it from receives periodic updates and you want to periodically update your import of it.

Then, unless you removed it each time before importing it again, you might not find it. Or you might find the wrong one, the one that's already on the page. There are various ways to ensure that doesn't happen. You can't use the Object prototype from my last post because it doesn't work in IE 8 and less. But you could use its routine as a regular function.

Once you have the request object's responseText, you could populate your div with it. Something like:


function getSpecificContent(targetDiv, soughtId, responseText){
var temp = document.createElement('div'), els, returnVal = null;
temp.style.display = 'none';
document.body.appendChild(temp);
temp.innerHTML = responseText;
els = temp.getElementsByTagName('*');
for(var i = 0; i < els.length; ++i){
if(els[i].id === soughtId){
while(targetDiv.firstChild){
targetDiv.removeChild(targetDiv.firstChild);
}
targetDiv.appendChild(els[i]);
returnVal = els[i];
break;
}
}
document.body.removeChild(temp);
return returnVal;
}