HomeХобби и стильRelated VideosMore From: John Morris

jQuery Tutorial: AJAX Load Content With No Page Refresh

179 ratings | 41033 views
In this jQuery tutorial, you'll learn how to load content into a div on click using the AJAX load method. Here's the special discount link for Rob's course: http://www.johnmorrisonline.com/coupon-code-for-the-complete-web-developer-course-on-udemy/?utm_campaign=ytae-FqAt_VCA Get the source code in the Code Snippets section here: http://www.johnmorrisonline.com/web-developer-resources/ Training Center: http://www.johnmorrisonline.com/training Subscribe on YouTube: http://youtube.com/johnmorrisonline Subscribe on SoundCloud: http://soundcloud.com/johnmorrisonline Subscribe on iTunes: http://goo.gl/RggnXW -~-~~-~~~-~~-~- Please watch: "Ryan Carson: How to Get an IT Job WITHOUT a College Degree" https://www.youtube.com/watch?v=wxetW3hmPd0 -~-~~-~~~-~~-~-
Html code for embedding videos on your blog
Text Comments (35)
Zubair Khan (26 days ago)
Hi John, nice to have watch this tutorial, Can you please tell me how to retain the about page when user refresh, or move forward or backward I search about history.pushState but didn't get a good tutorial on this, Actually I am implementing on my personal project, where user login and get on admin panel page, I just included that admin panel page in index page ajax content holder like you, and when I clicked on other ajax load page in that content place holder well, but when I refresh I just get to admin panel which I included. So how to handle this situation. Please make video if you can...One more thing, at login side I didn't use ajax, simple user php header function to land user index page. or is there any other way to load dashboard when user land on index or home page.
AR (5 months ago)
The mystery is he is actually 'Rob'...
GND,EI Holmes (6 months ago)
great one....keep up the goood JOB
k2chris1983 (6 months ago)
This also works with Ajax 3.3.1, just wish the code was at pastebin or somewhere else.
Albanus Temu (7 months ago)
i have create a page that loads data from database in every 5 seconds by using Ajax and put the data in a div inside the page , the problem is when i refresh the page the content of the div is dissapear for a moment how can i fix this problem? some one help me
Sruthi Kalikota (8 months ago)
how to call a jsp pages using these links someone please help
Gude Balm (9 months ago)
Thanks for the wonderful video! Is there a way to alter the code easily to work in just a plain html page without using php?
Puneet Tripathi (10 days ago)
just change .php into .html and after all everything rest is just javascript and that runs fine with html
Ricky Bee (10 months ago)
only 25% off mate
Trimuda Karya (1 year ago)
hello John...how do you do? :) your video help me fully... but I have a new problem...i have a recursive menu...how to take a last node from my menu ?? I use last node for async action to load page. and I want parent menu no take action to load page
Jhotay Alo (1 year ago)
this is helpful. but i m trying to load a html . but the css is not loading with html
John Charlock (1 year ago)
Rob has a new course. It's an updated version of his old course with html 5 and some other changes. You should get a coupon for that because I doubt anyone will take the old one now.
Chaplin Li (1 year ago)
[jquery-3.1.1.min.js:4 XMLHttpRequest cannot load file:///G:/WEB/www/html/test1.php. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource] I can't load the php in the same page.How can i fix it?It seems like js can't open the local file.
Mail To Ram (2 years ago)
hI sir i need a urgent help .As per the above video i have created the content loading its working fine .But i have one problem while loading my forms. 1)In About link I have created the basic form ,while submitting the form the data is not uploading in the mysql db ,bcs it get auto refresh and go back to the home page . Please help....... THANKS IN ADVANCE.. here is my src. base file : <html> <head> <title> Buvvi HR</title> <!-- Bootstrap --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="1.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script> <style> input.ng-invalid{ border:1px solid red;} input.ng-valid{ border:1px solid green;} video#bgvid { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background: url(sample.png) no-repeat; background-size: cover; } video { display: block; } </style> <script> $(document).ready(function(){ // Set trigger and container variables var trigger = $('#nav a'), container = $('#content'); // Fire on click trigger.on('click', function(){ // Set $this for re-use. Set target from data attribute var $this = $(this), target = $this.data('target'); // Load target page into container container.load(target + '.php'); // Stop normal link behavior return false; }); }); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 nbg"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Bivvi Web</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav> </div > <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg2"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <nav id="nav"> <a href="#" data-target="index">Home</a> <a href="#" data-target="2">About</a> </nav> </div> <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 bg2"> <div id="content"> <?php include('4.php'); ?> </div> </div> </body> </html> 2.php source <html> <head> <title> Buvvi HR</title> <!-- Bootstrap --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="1.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script> </head> <body> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 bg2"> <form class="f1" name ="f1" id ="f1id" method ="post" enctype =" multipart/form-data" ng-app > <p class="">Unit Master Add </p><br><br> <label>Unit</label> <div class=""> <input type="text" name="field1" ng-model="user.text" required><br> <span ng-show="f1.text.$dirty && f1.password.$error.text.minlength">min </span> </div> <label>Short Name </label> <div class=""> <input type="text" name="field2" ng-model="user.text1" required></div><br> <label>Business </label><br> <div class=""> <select name="field3" ng-model="user.select" required ><option>DSFDR</option><option><?php echo $options;?></option></select> </div> <br><br> <input type="submit" name="submit" value=" submit" class ="" ng-disabled ="f1.$invalid"></input></p> </form> </div> </body> </html>
Mail To Ram (2 years ago)
Awesome john...thank you so much .this video helped me a lot ...;
DameDiabolique (2 years ago)
Works like a charm. How would you change the url in the browser window to reflect the link being linked? With this way, if someone leaves the site and goes back they get taken to the home page and not the page they were looking at.
MythicalMelodies (2 years ago)
Dude thank you so much! I have been looking everywhere for how to do this. My only question is that it looks like you're linking to a .php so what do those files actually look like? are they programmed differently than an actual page?
Syaiful Amri (2 years ago)
But does browser's back button still working if user want to back to previous loaded content without clicking the link again?
freedom12 (2 years ago)
Thank you very much. it's really a great tutorial.
John Morris (2 years ago)
+freedom12 thank you!
Rodrigo Segura (2 years ago)
Awesome tutorial!, if you would want like the links to fade in and out from lets say from home to about what code could you add?
RENOVATIO (2 years ago)
Hello John, what IDE are you using?
hari Hari (1 year ago)
RENO VATIO Atom text editor
José Tomás Sierra (3 years ago)
The code runs smoothly in Firefox, but not at all in Chrome. Any particular reason and way to fix it? Thank you very much for your video John!!
John Morris (3 years ago)
Good to hear you got it!
José Tomás Sierra (3 years ago)
+Jose Tomas Sierra It works fine on both Firefox and Chrome from a server. The problem relies when running locally. Thanks !!
S Kanumilli (3 years ago)
hello please shed some light : ii am new to this: whats the benefit of ajax on my website:what difference does it make on my website? does it make it run smoother or faster? please help
Simon .Hällman (3 years ago)
+S Kanumilli you only have to load the page once, works smoother if you're on slow network
Inside Stuff (3 years ago)
Which code editor you are using??
Uriahs Victor (2 years ago)
+Yash Baxi Atom I think
Salah Al-amri (3 years ago)
hi john are you okay? are you sick ? because i feel there's something wrong in your face turn to green color, just i wanna know if you feel okay? take care
John Morris (3 years ago)
+Salah Al-amri I was kidding. I didn't really notice the green in the video. But I'm all good.
Salah Al-amri (3 years ago)
.
Salah Al-amri (3 years ago)
hhhhhhh  really do you notice that ? anyway thanks god you are okay
John Morris (3 years ago)
Lol! Probably too much spinach! :/

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.