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?

HTML Code:

<!-- 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>

Code:

<?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.

PHP Code:


<!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:

Code:

<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:

Code:

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()

Code:

<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

Originally Posted by jscheuer1

Using jQuery:
About ApacheTech's approach, there is no:

Code:

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

Originally Posted by ApacheTech

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:

Code:

<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:

Code:

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!