trouble with jquery load method

Question

i have a table in one html file and div in another and both files are on same server, same folder. I'm trying to use jquery load function to do the folowing. So I do :

$('#div').load('game.html #tbl', function(){ alert ("succes on load");});

As you can see I try to target #tbl which is id of table, and I get the alert that is succes, but no tables were loaded. Can tables be loaded this way?

yes, div is id, am running from .html, .js is used to handle load() — nhrnjic6, Jun 25 '15 at 13:00
@nhrnjic6 See my answer. Make sure that all of the ids are spelled correctly, since it seems like you do have some kind of connection between the files. — Gustaf Gunér, Jun 25 '15 at 13:02

score 1 · Accepted Answer · edited May 23 '17 at 12:29

1

Look in the browser console, you probably have an error there. You've got to make sure you have the proper path, this is a relative path. If your current doesn't work, try messing around. Add ../ before the path and see if that works. I don't know your file structure so this is probably easier for you.

Another problem could be that you don't have the right permissions on that file, 403 Forbidden. So, go check your web browser's console.

If you have the following file structure and run the code beneath that, everything should work fine.

/project_name
├── index.html
├── game.html

index.html

<div id="div"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>$('#div').load('game.html #tbl', function(){ alert ("succes on load");});</script>

game.html

<div id="tbl"><h1>I origin from another file</h1></div>

EDIT: After messing around a bit I found the solution. You can't run scripts with .load just by opening a .html file from your hard drive. You need to install WAMP/LAMP/MAMP (a local server) that you can access by entering localhost in the browser.

WAMP

MAMP

Please have a look here: AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https

edited May 23 '17 at 12:29

Community

1
1

answered Jun 25 '15 at 12:55

Gustaf Gunér

2,272
4
17
23

It seems that all is in place but can you take a look. (sorry for pastebin) : game.html : http://pastebin.com/qr9UtgdK home.html : http://pastebin.com/ZN9CmC0r .js : http://pastebin.com/pJbP4Fen – nhrnjic6 Jun 25 '15 at 13:13
@nhrnjic6 Found the solution, check my answer, I updated it! – Gustaf Gunér Jun 25 '15 at 13:27
but I am running xamp, and all files are in htdocs(localhost) and like I said it gives me succes function, but it doesen't load file. Have you seen my code? – nhrnjic6 Jun 25 '15 at 13:30
@nhrnjic6 That's strange. I copied your code and for me it works. Does `#canvas` turn blank after clicking? – Gustaf Gunér Jun 25 '15 at 13:33
@nhrnjic6 Anything in console? – Gustaf Gunér Jun 25 '15 at 13:37
it does remove content of a div so there is some action, but it doesn't load my grid – nhrnjic6 Jun 25 '15 at 13:59
@nhrnjic6 That's because there's no content in it. Fill that table and you'll see it. This is solved! – Gustaf Gunér Jun 25 '15 at 16:46
@nhrnjic6 Are you going to mark this as the solution or did you do it in another way? – Gustaf Gunér Jun 26 '15 at 11:18

trouble with jquery load method

1 Answers1