CODEWITHSUNDEEP
javascriptjqueryhtml
reeena11
reeena11

Reputation: 105

html page doesn't load in Div using Jquery

i'm trying to load Html page on click on a link , but for some reason it doesn't work at all .
this is my LogIn.HTML page : 

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script  type="text/javascript">
$(document).ready(function(){
    $("#game1").click(function(){
        $("#result1").load('Game.html');
    });
    $("#players").click(function(){
        $("#result1").load('players.html');
    });
});
</script>
</head>
<body>
  <table>
    <tr>
  <td><a  id="game1"  href="" style="color:white;">Game</a></td>
  </tr>
  <tr>
  <td><a href="" id="players"  style="color:white;">players</a></td>
  </tr>

  </table>

<div  id="result1" >
</div>
</body>
</html>

AND this is my basic Game.html (the Players.html same concept): 

<!DOCTYPE>
<html>
<head>
  <h1>this is first game!!!</h1>
  </head>
</html>

i've tried many solutions but i can't make it work , also i open the html page using chrome (not localhost,regular one) does it affects ?

Upvotes: 0

Views: 1362

Answers (3)

Nelson Owalo
Nelson Owalo

Reputation: 2414

You could try moving the script tag to the bottom: as suggested in this SO

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <table>
        <tr>
            <td><a id="game1" href="" style="color:white;">Game</a></td>
        </tr>
        <tr>
            <td><a href="" id="players" style="color:white;">players</a></td>
        </tr>
    </table>
    <div id="result1"></div>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#game1").click(function(){
                $("#result1").load('https://full/path/to/Game.html');
            });
            $("#players").click(function(){
                $("#result1").load('https://full/path/to/players.html');
            });
        });
    </script>
</body>
</html>

Update:

  • Plus you missed a # in "game1", corrected in the above example.

  • Corrected the html in #game1 as pointed out in the comments

Upvotes: 2

Met-u
Met-u

Reputation: 675

Your code $("game1") and $("players") is missing the # tag identifier for ID's. It should be $("#game1") and $("#players").,

So

$(document).ready(function(){
    $("#game1").click(function(){
        $("#result1").load('Game.html');
    });
    $("#players").click(function(){
        $("#result1").load('players.html');
    });
});

Also you've place the <h1> element inside the <head> tag. If you wish to see a result you should have the following inside the Game.html file:

<!DOCTYPE>
<html>
<head>
</head>
<body>
  <h1>this is first game!!!</h1>
</body>
</html>

Also make sure that the file is in the same directory as the LogIn.html page.

I also believe you need to specify which element you want to include otherwise all the html might get loaded into the element. So maybe your code should be:

$(document).ready(function(){
    $("#game1").click(function(){
        $("#result1").load('Game.html #body');
    });
    $("#players").click(function(){
        $("#result1").load('players.html #body');
    });
});

Upvotes: 1

CodeBox
CodeBox

Reputation: 111

You can easily modify your current <a> tag for this kind of action with a link, its easier and also faster. For example, change your <a> tag and include in it href, like this: 

<a id="game1"  href="./Game.html" style="color:white;">Game</a>

And here you see the second problem. You are referencing the file wrong. To call out a file, you need to show in what folder its in. In this case "./" means in the current folder your main index.html file is.

If you still want to stick with JQuery for this action, then here is a fix for you (provided if you have your Game.html and Players.html in the same folder as your main index.html file)

$("#game1").click(function(){
        $("#result1").load('./Game.html');
    });
    $("#players").click(function(){
        $("#result1").load('./players.html');
    });

Also, be mindful that the file references are case sensitive. In your description you wrote that you need to load Players.html, but in code youre trying to load players.html.

Upvotes: 0

Related Questions