load html page in div tag using jquery dynamically

Question

0.00/5 (No votes)

See more:

JavaScript

$(document).ready(funtion(){
    $('#btn').click(funtion(){   
        $('#div_content').load(html.page);
     });
});

Above coding only i used. but the page not loading into div tag.

Pls help me.. (javascript or Jquery)..

Posted 9-Mar-13 21:13pm

hari301

Updated 7-Feb-17 19:19pm

Add a Solution

Comments

Sandeep Mewara 10-Mar-13 3:20am

"html.page" is a URL or Data or what?

hari301 10-Mar-13 3:35am

i want load the content from "load.html", i mean what the html page contains.

Prasad Khandekar 10-Mar-13 14:32pm

Hello Hari,

According to JQuery API doc your code should work, provided div_content exists and is visible and that html.page represents a valid url. Have a look at http://api.jquery.com/load/

3 solutions

Solution 2

$(document). ready(function(){
$("#any button id or href id"). click(function(){

$("#id of the div tag where you want to add the entire page"). load ("myFile.jsp");
});

});

Posted 3-Jun-13 3:12am

lips007

Comments

guradio 5-Aug-14 22:57pm

how can you load two pages with just one click of a link..i want to load two pages in two separate div how is this possible

Solution 5

How to load external or internal CSS files?

Posted 7-Feb-17 19:19pm

Member 12988449

Comments

CHill60 8-Feb-17 12:36pm

This is not a solution to the question posed. If you have a question of your own then use the Ask a Question link above. You will need to include a lot more information than this

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

sri senthil kumar · Accepted Answer · 2013-03-10T23:21:00

Solution 1

Hari301,

I had a same problem once and when I tried the below code it was working fine for me.

Main page:

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
  body{ font-size: 12px; font-family: Arial; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<b>Successful Response (should be blank):</b>
<a href="#" onclick="check();">click me</a>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>
<div id="b"></div>

<script>

function check(){
$('#b').load('test.html #target');
}
  </script>

</body>
</html>

Page from which we need to load the content

HTML

<html>
<head></head>
<body>
<div id='target'>
 I am from test page.
</div>
</body>
</html>

Posted 10-Mar-13 23:21pm

sri senthil kumar

Updated 11-Mar-13 2:18am

v2

Comments

hari301 12-Mar-13 9:12am

Ya its working.. Really thank u so much senthil.

sri senthil kumar 13-Mar-13 3:11am

you're welcome

parvez11 23-Apr-13 7:55am

hi,,
i want to target whole aspx page..
how can i load it into div.

sri senthil kumar 25-Apr-13 2:04am

You can load with above method itself, if u have a wrapper div in aspx page.

ijaz4u 22-May-13 3:06am

hi,
i have loaded html in a div element and i want to overwrite div with new html page what should i do??

sri senthil kumar 23-May-13 3:08am

Just empty the innerHTML of that div and again load new content.

Jules Verne 7-Dec-14 17:10pm

Thank you for this, really useful for beginners :) keep it up!