Unable to open a page in DIV

Question

I am trying to load a certain page load in fixed width div on click of a link, so far I made on clicking the link it does nothing, I given the code below can anyone help me solve it. I also Added the Fiddle.

HTML

<div id="top_Bar">
     <a href="#" id="ListLink">LIST LINK TEST</a> 
</div>

<div id="content"></div>

JS

 $("#ListLink").click(function() {
        $('#content')
           .load('google.com');
    });

CSS

#content{
    width:300px;
    height:300px;
    background-color:gray;
}

Here is the fiddle for this code JsFiddle

If you don't work in Google, then you have problems: you are trying to load into the `
` page from another domain. — Regent, Oct 14 '14 at 05:15
so what your saying is I can only load my own local site pages. external pages are not supported or if I am wrong correct me plz. — SMHasnain, Oct 14 '14 at 05:18
@Regent, I don't think that's the problem. From http://api.jquery.com/load/ : It is roughly equivalent to `$.get(url, data, success)` except that it is a method rather than global function and it has an implicit callback function. However browsers might restrict cross-domain Ajax requests like you rightly pointed out. It's not an issue with the `load` function. — Vivek Pradhan, Oct 14 '14 at 05:19
@VivekPradhan ...and `$.get` is shortcut for `$.ajax`, which has restrictions for cross-domain requests. — Regent, Oct 14 '14 at 05:26
@MHHasnain I can suggest to search in Google for _jquery ajax cross domain request_: JSONP data type, `Access-Control-Allow-Origin: *` header and other ways. — Regent, Oct 14 '14 at 05:28
This is a duplicate question. See http://stackoverflow.com/questions/14999573/jquery-load-external-site-page — EternalHour, Oct 14 '14 at 05:29
@EthernalHour The link to the question you gave solution holds php solution I don't want php because I am not using it, I want to do it with html and JS or Jquery. but thanks for the information you gave. — SMHasnain, Oct 14 '14 at 05:32
In order to accomplish loading external site you need to use it, you cannot do it with jquery alone as it explains. — EternalHour, Oct 14 '14 at 05:33

score 1 · Answer 1 · answered Oct 14 '14 at 05:15

1

Try waiting until the document loaded:

$(function() {
    $("#ListLink").click(function() {
        $('#content')
           .load('google.com');
    });
});

answered Oct 14 '14 at 05:15

qwertymk

34,200
28
121
184

score 1 · Accepted Answer · answered Oct 14 '14 at 05:19

1

may be you cannot retriew the other domain:

Additional Notes:

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.

see in http://api.jquery.com/load/

answered Oct 14 '14 at 05:19

Feng Lin

670
4
8

1

Please include sample scenario or sample code.It's make more clear – Albin Joseph Oct 14 '14 at 05:21

score 1 · Answer 3 · answered Oct 14 '14 at 05:39

It should be the cross-domain issue. Open your web console(F12) and see whether you have got the "Access-Control-Allow-Origin: * " related error. or else follow the below test steps.

if you are using chrome browser, close or kill all the chrome instances.
open a command line (cmd) and go to your "chrome" installation folder.
issue this command to open the chrome in security disable mode: chrome.exe --allow-file-access-from-files --disable-web-security
run your application on that chrome window and check whether you got the www.google.com inside your div.

if that is working, that confirms you have the cross-domain issue. to sort that one, you have couple of techniques out there. 1. using cross-domain.xml inside your app server. 2. use jsonp callback function with your $.ajax() 3. configure cors.jar in your path

search how to use above techniques to sort out your cross-domain issue. This is just a guidance for you..hope it will help.

score 0 · Answer 4 · answered Oct 14 '14 at 05:44

0

Thanks all for giving me your thoughts on this post. I found the answer to this.

I just create another page in my local site folder and call it. I admit I was wasting time on loading external site.

once again I thanks all for your answers.

answered Oct 14 '14 at 05:44

SMHasnain

696
4
13

Unable to open a page in DIV

4 Answers4