CODEWITHSUNDEEP
jqueryhtml
Fred
Fred

Reputation: 2468

jQuery AJAX struggle

I searched the internet until I went blue but cannot figure this out and why it is not working.

I have javascript but this is only working for firefox. no other browser.

SO, I decided to go to jQuery.

What I want to do is this: - I have a folder. - In this folder, I have an html.html file. This is my main website. - then I have a file home.html.

html.html looks like this:

<html>
    <head>
        <title>
            Struggeling with jQuery ajax! *******
        </title>
    </head>
    <body>
        <div="one">
            Load the page here
        </div>
    </body>
</html>

and home.html looks like this:

    <html>
        <head>

        </head>
        <body>
            Please load this into the div! (this text will be displayed in other words)
        </body>
    </html>

how on earth can I get this using jQuery? Please help me. I cannot get this right.

=====================================================================================

OK, so this is how it looks like right now. In my file, I have home.html:

<html>
    <head>
        <title>
            Struggeling with jQuery ajax! *******
        </title>
        <script language="javascript" src="jQuery.js"></script>
        <script>
            $(document).ready(function() {
                $("#one").load("html.html body");
            });
        </script>
    </head>
    <body>
        <div id="one">
            Load the page here
        </div>
    </body>
</html>

I downloaded the development version of jQuery and this is a file (jQuery.js) where home.html is located.

then in the other html.html looks like this: 

<html>
    <head>

    </head>
    <body>
        Please load this into the div! (this text will be displayed in other words)
    </body>
</html>

but this is not working. I dont get the "Please load this into the div! (this text will be displayed in other words)"

Upvotes: 0

Views: 78

Answers (2)

Iron3eagle
Iron3eagle

Reputation: 1077

First give your div a proper ID.

<div id="one">
    Load the page here
</div>

Then use jQuery to get and load, using the jQuery.load() function.

$('#one').load('folder/html.html', function() {
  alert('Load was performed.');
});

Also remove any "doubled" tags. In other words when you insert html.html you don't want:

<div id="one">
     <html>
          <body>
               Stuff
          </body>
     </html>
</div>

It'll look ugly and could cause issues. So remove those extra <html> and <body> tags.

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

Try this jquery

<script>
$(document).ready(function() {
    $("#one").load("home.html body");
});
</script>

Also, update your html.html (I dont like this name, btw, use index.html for a main page) target div ID.

<div id="one"></div>

Edit: I also see no place where you reference your jQuery lib, be sure to do that!

Upvotes: 2

Related Questions