JQuery Load Page Content into Div

Question

I found lots of questions/answers regarding how to load page content into a div; however, I can't get mine to load. I am running the jquery inside document.ready. Running an alert by itself works fine, but the code below does not. Any pointers would be greatly appreciated. Thanks!

//First I tried this:
$("#divTestPreview").load("~/Testing/TestCreation/AddTestItems.aspx");
//and then I tried this:
$.get('~/Testing/TestCreation/AddTestItems.aspx', function (data) {
            $('#divTestPreview').html(data);
            alert('Load was performed.');
});

<div id="divTestPreview" runat="server" style="width: 100%; height: 500px;">
</div>

Look at this: http://stackoverflow.com/questions/1050996/jquery-cross-site-fetch — algiecas, Jul 12 '11 at 20:05
Thanks! Sorry, my test with google, was not a good one since I am trying to load a page within my own site. Edited code above. — daniel, Jul 12 '11 at 20:41

score 2 · Answer 1 · answered Jul 12 '11 at 20:05

2

Try removing the runat="server" in your div as I think your ASP.NET interpreter might be fiddling with the HTML before it reaches the client.

Thanks!

answered Jul 12 '11 at 20:05

Gauthic

91
1
3

1

Depends. If you have turned ClientIDMode to static, it won't mess with the id. But like I said, that depends on the mode, and of course that it's run on .NET4. Just as a side note :) – Jesper Haug Karsrud Jul 12 '11 at 20:09
1

@Gauthic is correct asp.net will generate an id when the page is rendered. if you need to keep the runat="server" then use $("#" + <%=divTestPreview.ClientID%> +").load(... – Dave Jul 12 '11 at 20:11
The rendered code looks like this: `$.get('http://www.google.com', function (data) { $("#" + "ctl00_mainContent_divTestPreview").html(data); alert('Load was performed.'); });` – daniel Jul 12 '11 at 20:19

score 1 · Answer 2 · edited May 23 '17 at 12:19

1

you can use load and get to load only pages inside your domain other wise you will get cross domain error there is a solution for it you need to create some sort of proxy read this: WebBrowser Control: Disable Cross Site XSS Filtering or another way to process JS in full on HTML or you can try this: http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/

edited May 23 '17 at 12:19

Community

1
1

answered Jul 12 '11 at 20:05

kleinohad

5,800
2
26
34

load & get can load pages from just about anywhere.. get & load are usually used to load pages from the same domain... however this does not mean that they can't be used to load contents from a different site. – Anantha Sharma Jul 12 '11 at 20:07
this exactly means that you can't load data from other domain unless doing so in the server side (as a proxy) and use the same domain (server) on javascript – algiecas Jul 12 '11 at 20:15
Thanks! I am actually trying to access a local page: `$("#" + "ctl00_mainContent_divTestPreview").load("~/Testing/TestCreation/AddTestItems.aspx");` (rendered code) – daniel Jul 12 '11 at 20:31

biluriuday · Accepted Answer · 2011-07-12T20:16:32.163

1

your div has runat="server" tag which makes it a server side control. To access it in client side you need to use ClientID to access the div. Like this

$("#<% divTestPreview.ClientID %>").load();

edited Jul 12 '11 at 20:16

answered Jul 12 '11 at 20:07

biluriuday

428
1
7
16

it should be "#<%divTestPreview.ClientID %>" – kleinohad Jul 12 '11 at 20:09
I tried this and it still doesn't work for me: `$("#" + "ctl00_mainContent_divTestPreview").load("http://www.google.com");` (rendered code) – daniel Jul 12 '11 at 20:22
it because you you are trying to load some page which is not in your domain(i.e., google.com). For doing cross domain requests refer to the links provided by kleinohad above – biluriuday Jul 12 '11 at 20:29
try $("#<% divTestPreview.ClientID %>").load("/Testing/TestCreation/AddTestItems.aspx"); – biluriuday Jul 12 '11 at 20:48
That got me further, but I am getting errors on a dynamically generated page. I think I am going to load the content a different way. Thanks for your help! – daniel Jul 12 '11 at 21:11

score 0 · Answer 4 · answered Jul 12 '11 at 20:13

That is not allowed by Access-Control-Allow-Origin, you are making cross domain AJAX, and it's no possible in current versions browsers, you have to do it in the server side, for example in PHP with fopen() o file_get_contents(), if you need to make it on client side, there are many options like flensed FLXHR or CORS for modern browsers.

JQuery Load Page Content into Div

4 Answers4