How to load another page using jQuery
utopian-io·@sogata·
0.000 HBDHow to load another page using jQuery
#### What Will I Learn?
- You will learn how to use jQuery
- You will learn about jQuery Selector
- You will learn about load() method
#### Requirements
- You have basic about HTML
- You have basic about JavaScript
- To practice this tutorial you should also have a text editor software, browser and you should install or host jQuery file. Or you can also add jQuery CDN if you don't want to install
> In this tutorial I use Mozilla Firefox for Browser and Visual Studio Code for text editor.
#### Difficulty
- Basic
#### Tutorial Contents
jQuery has provided a method to load another file. It is load() method. With this method we load another file such as txt, html, php etc on our page. This method you can use to load a file and display it on your html element. For example you will display your txt file on `<p>` element in your page, you can use this method. For Detail how to use it, Lets follow steps bellow :
- Open your text editor.
- Create a txt file. This file is a file that you will load it on main page later. Then write some text up to you. For example I create `data.txt` file and i write the following text inside :
```
Utopian is the best. Vote @utopian-io as witness
```
- Create a HTML file and save it in same folder with `data.txt`. For example I create and save it as `load.html`
- Add the HTML element as usual
```
<html>
<head>
<title>LOAD ANOTHER FILE</title>
</head>
<body>
</body>
</html>
```
- As we know, to use jQuery we need to install or host it. Or we can also add jQuery CDN if we don't want to install or host it. we also have many choices CDN that we can use, either Google CDN or Microsoft CDN. For more Detail you can visit [jquery official web](https://code.jquery.com/). In this tutorial I use Google CDN. Add the CDN in `<head>` element.
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
```
- Create a button. This button is for calling the file that we can load, so when we click this button. The file will appear in element that we set to display it.
```
<button>Get External Content</button>
```
- Create an element that you will display your load file. For example here I create `<h3>` element. So the text in `data.txt` will appear in this element .
```
<h3></h3>
```
- To write the jQuery Script we should open `<script>` tag. You can put it in `<head>` element or in `<body>` element.
```
<script></script>
```
- Before add more event in jQuery. There is some event that we should add for the first. It ready() event. this event to make sure that all html elements are loaded. if it is, then it will load jQuery script. So, all jQuery Script must write in this function event.
```
$(document).ready(function(){
});
```
- Select the HTML element, To do this we can use jQuery Selector. jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more.All selectors in jQuery start with the dollar sign and parentheses: $(). In this case we use *The element Selector* to get HTML element.
- Select the button element then add a click function event.
```
$("button").click(function(){
});
```
- Select the element that you display the load file in it, Then place it in button click function event . In this tutorial I use `<h3>` element.
```
$("h3")
```
- Then Add the `load()` method with the parameter is the file that you will load. Here i Use the `data.txt` file that I have created justnow.
```
$("h3").load("file.txt");
```
- Save the file And try to run on your browser.
- Try to click the button and you will see all the text that you write on `data.txt` file.
- Finish, For the full code you can get bellow :
```
<html>
<head>
<title>LOAD ANOTHER FILE</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<center>
<button>Get External Content</button>
<h3></h3>
</center>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h3").load("file.txt");
});
});
</script>
</body>
</html>
```
#### Curriculum
- [How to create a toggle button to show and hide an element](https://utopian.io/utopian-io/@sogata/how-to-create-a-toggle-button-to-show-and-hide-an-element)
- [How to Create Filter Lists using jQuery](https://utopian.io/utopian-io/@sogata/how-to-create-filter-lists-using-jquery)
- [How to Create Filter Tables using jQuery](https://utopian.io/utopian-io/@sogata/how-to-create-filter-tables-using-jquery)
<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@sogata/how-to-load-another-page-using-jquery">Utopian.io - Rewarding Open Source Contributors</a></em><hr/>