0

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 ?

reeena11
  • 95
  • 1
  • 11

3 Answers3

2

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

Tân
  • 1
  • 15
  • 56
  • 102
Nelson Owalo
  • 2,324
  • 18
  • 37
  • hi , thank you for the help , but still didn't affect anything – reeena11 Nov 09 '18 at 07:21
  • I'm not the downvoter but I know it: 1/. You don't have `` tag. 2/. The script at the bottom is outside `body` tag. 3/. The code is not formatted. – Tân Nov 09 '18 at 07:24
  • Your answer, unlike one that was posted before it, didn't correct the OP's errors in the id selectors. – peeebeee Nov 09 '18 at 07:31
  • @Nelson Owalo In your code HTML `id=#game1` remove `#` – Mehraj Khan Nov 09 '18 at 07:32
  • Sigh. Yes, you edited it after, but then added an extra # on an id declaration. A slower, more accurate answer is better than a lightning-fast one with errors. Downvote rescinded, anyhow. – peeebeee Nov 09 '18 at 07:34
  • @peeebeee Thanks alot, I cant believe I missed that – Nelson Owalo Nov 09 '18 at 07:35
  • `href=""` add `#`, i.e. `href="#"`. empty string command to page refresh. – Sachink Nov 09 '18 at 07:44
  • You are loading the model using either `file://` or `C:/`, you can see error message as they are not `http://`. So you can either install a webserver in your local PC or upload the code somewhere – Sachink Nov 09 '18 at 07:48
1

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');
    });
});
Met-u
  • 555
  • 7
  • 18
  • hi , i've updated the post i added the # tag it still doesnt' work – reeena11 Nov 09 '18 at 07:19
  • If you expecting to see the `

    this is first game!!!

    ` element, you won't because you've placed it in the tag. You should have it in the body. Let me update my answer     – Met-u Nov 09 '18 at 07:22
0

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.

CodeBox
  • 111
  • 4
  • and yeah, like @Nelson Owalo said, move your script after the html body elements declaration, so it actually finds the elements to click on. – CodeBox Nov 09 '18 at 07:30
  • hi , i have to use the div idea and not move to another HTML page , i've tried what you said and still doesn't work – reeena11 Nov 09 '18 at 07:41
  • Take a look at your most upvoted answer from @Nelson Owalo about the file path. Also, Met-U noted that your heading tag is in which is wrong. And lastly, it wasn't a DIV idea, please dont use href inside a DIV element. – CodeBox Nov 09 '18 at 07:48