How 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.txtfile 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 asload.htmlAdd 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. 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 indata.txtwill 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 thedata.txtfile 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.txtfile.
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
- How to Create Filter Lists using jQuery
- How to Create Filter Tables using jQuery
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @amosbastian, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!
Bereh... Sukses terus my buddy @sogata.
Ka rindu kuh, trep ka hana neujak bak long, hehe. Trmksh...!.
Terimong genaseh adun. Kon hna lon langkah aduen meutuwah, tengoh sibok peusapay sp lawetnyo. Mangat le jiek wate tavote. Menyo tuwo lon langkah. Nelangkah droneh keuno kon sama sit hehe
Bereh, galak long lagei nyoe. Semoga kebaikan selalu untuk gata, aamiin...!!!.
amin, terimong genaseh doa nya adun @adivender metuah
Title is pretty missleading, it says "how to load another PAGE". But you are just loading content from a text file.
this is for example, Read all the content. I have said that we can load any other content such as php, HTML, etc
Yeah, but in the end, you could have give an working example for loading a real page instead of a text file. Because loading content of a page or even the whole page itsself will end up in quite different syntax and few other problems, if you mention to load an external page for example.
Hey @sogata I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x