How to fetch a specific div id from an html file through ajax

Question

I have two html files called index.html & video.html

video.html holds coding like:

<div id="video">
<iframe src="http://www.youtube.com/embed/tJFUqjsBGU4?html5=1" width=500 height=500></iframe>
</div>

I want the above mentioned code to be crawled from video.html page from index.html

I can't use any back-end coding like php or .net

Is there any way to do using Ajax?

Ya, you can use ajax for sure... Let me ask you, what have you tried? — A. Wolff, Jun 21 '13 at 12:41
You can access YouTUbe data via de Google API. Perhaps this is easier. — Jeffrey, Jun 21 '13 at 12:44
Are the pages on the same domain? Otherwise it's impossible. http://stackoverflow.com/questions/6853641/how-to-get-the-html-code-from-a-web-page-different-domain — Karl Adler, Jun 21 '13 at 12:45
@abimelex even not on same domain you could proxified it server side in most case — A. Wolff, Jun 21 '13 at 12:50

score 1 · Answer 1 · answered Jun 21 '13 at 12:47

1

For sure,send an ajax call.

$.ajax({
url: 'video.html',
success: function(data) {
    data=$(data).find('div#video');
   //do something

 }
});

answered Jun 21 '13 at 12:47

Suresh Atta

120,458
37
198
307

score 1 · Answer 2 · answered Jun 21 '13 at 12:50

Yep, this is a perfect use case for ajax. When you make the $.ajax() request to your video.html page, you can then treat the response similar to the way you'd treat the existing DOM.

For example, you'd start the request by specifying the URI in the the following way:

$.ajax({
    url: 'video.html'
})

You want to make sure that request succeeds. Luckily jQuery will handle this for you with the .done callback:

$.ajax({
  url: "video.html",
}).done(function ( data ) {});

Now it's just a matter of using your data object in a way similar to the way you'd use any other jQuery object. I'd recommend the .find() method.

$.ajax({
  url: "video.html",
}).done(function ( data ) {

    $(data).find('#video'));
  }
});

Thanks for your step by step explanation – Vel Murugan S Jun 24 '13 at 09:03 — Vel Murugan S, Jun 24 '13 at 09:03

Daniel Gimenez · Answer 3 · 2013-06-21T13:11:46.913

Since you mentioned crawl, I assume there is the possibility of multiple pages. The following loads pages from an array of urls, and stores the successful loads into results. It decrements remainingUrls (which could be useful for updating a progressbar) on each load (complete is called after success or error), and can call a method after all pages have been processed (!remainingUrls).

If this is overkill, just use the $.ajax part and replace myUrls[i] with video.html. I sepecify the type only because I ran into a case where another script changed the default type of ajax to POST. If you're loading dynamic pages like php or aspx, then the cache property might also be helpful if you're going to call this multiple times per session.

    var myUrls = ['video1.html', 'video2.html', 'fail.html'],
        results = [],
        remainingUrls;


    $(document).ready(function () {
        remainingUrls = myUrls.length;
        for (var i = 0, il = myUrls.length; i < il; i++) {
            $.ajax({
                url: myUrls[i],
                type: 'get', // somebody might override ajax defaults
                cache: 'false', // only if you're getting dynamic pages
                success: function (data) {
                    console.log('success');
                    results.push(data);
                },
                error: function () {
                    console.log('fail');
                },
                complete: function() {
                    remainingUrls--;
                    if (!remainingUrls) {
                        // handle completed crawl
                        console.log('done');
                    }
                }
            });
        }
    });

klewis · Accepted Answer · 2013-06-24T12:41:24.490

1

Try this...

$.ajax({
url: 'video.html',
success: function(data) {
    mitem=$(data).filter('#video');
    $(selector).html(mitem); //then put the video element into an html selector that is on your page.
 }
});

edited Jun 24 '13 at 12:41

answered Jun 21 '13 at 12:59

klewis

7,459
15
58
102

Thanks @Blachawk. I just added $("#wrapper").html(mitem) to bring the fetched html from external page. – Vel Murugan S Jun 24 '13 at 09:03
You're Welcome. Happy to help. And yes that is what I meant to say too! That was an overlook on my part. It is now updated. – klewis Jun 24 '13 at 12:40

score 0 · Answer 5 · edited May 23 '17 at 11:50

not tested, but should be something similair to this: https://stackoverflow.com/a/3535356/1059828

var xhr= new XMLHttpRequest();
xhr.open('GET', 'index.html', true);
xhr.onreadystatechange= function() {
    if (this.readyState!==4) return;
    if (this.status!==200) return; // or whatever error handling you want
    document.getElementsByTagName('html').innerHTML= this.responseText;
};
xhr.send();

How to fetch a specific div id from an html file through ajax

5 Answers5