CODEWITHSUNDEEP
htmlajaxjquery
Vel Murugan S
Vel Murugan S

Reputation: 580

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

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?

Upvotes: 0

Views: 1110

Answers (5)

klewis
klewis

Reputation: 8389

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.
 }
});

Upvotes: 1

Daniel Gimenez
Daniel Gimenez

Reputation: 20654

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');
                    }
                }
            });
        }
    });

Upvotes: 1

Karl Adler
Karl Adler

Reputation: 16836

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

Upvotes: 0

imjared
imjared

Reputation: 20584

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'));
  }
});

Upvotes: 1

Suresh Atta
Suresh Atta

Reputation: 122026

For sure,send an ajax call.

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

 }
});

Upvotes: 1

Related Questions