CODEWITHSUNDEEP
jqueryhtmlget
André
André

Reputation: 25554

How to get and show the contents of other HTML page with Jquery?

I'm a newbie with Jquery. I'm trying to get how to get the contents and show another HTML.

Here is my code that does not work:

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="jquery-1.4.4.js"></script>  
  </head>
  <body>    
    <div id="target">
        click here to see test1.html
    </div>
    <script type="text/javascript">
        $('#target').click(function() {
            $.get('test1.html', function(data) {
                $('.result').html(data);
                alert('Load was performed.');
            });
        });
    </script>
  </body>
</html>

My question... How can I get this working. I have read the documentation but I'm not getting if I must use some external script(PHP) to accomplish this.

If you can give me some clues I would be very appreciated.

Update:

I have successfully achieved the task of getting an internal webpage:

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="jquery-1.4.4.js"></script>  
  </head>
  <body>    
    <div id="target">
        click here to see teste1.html
    </div>
    <div id="result">

    </div>
    <script type="text/javascript">
        $('#target').click(function() {
            $.get('teste1.html', function(data) {
                $('#result').html(data);
                alert('Load was performed.');
            });
        });
    </script>
  </body>
</html>

The main goal is to get an external webpage, but this is not working:

$.get('http://www.google.com/index.html', function(data) {
    $('#result').html(data);
    alert('Load was performed.');
});

Some clues on how to achieve this?

Best Regards.

Upvotes: 0

Views: 273

Answers (1)

Nick Craver
Nick Craver

Reputation: 630429

The main issue is you have no output element, you have $('.result'), but you have no class="result" element for it to find/put the content in.

Also keep in mind that .innerHTML (what you're ultimately using here) varies by implementation, meaning various contents of the document (<head>, <script>, etc.) may be stripped out when inserting it into an element in your page.

Upvotes: 1

Related Questions