Best way to dynamically change the page content?
Question
I need to dynamically change the page content without reloading it.
Also I would like to change the url, meta tags, etc.
What should I use to achieve such result?
3 answers
solution1
2 2016-07-30 09:35:58
AngularJS is a framework which will dominate your code architecture. It is however one way to solve your problem with routing: You have several states and every state contains an HTML template. If you switch to another state, the page content will change. If you are an experienced JavaScript developer, you might want to learn and dive into the world of AngularJS, but make sure, you want to take the rather steep learning curve.
If your sole purpose is to switch the content of your page, you can also use jQuery for that. Just select an element on your page and remove its content. Then, add another HTML template to the element. Here is some sample code:
$(document).ready(function() {
$('.pageElement').empty().html('<h2>Title</h2><p>This is some content.</p>');
});
You can also use the jQuery .load() function to inject an existing HTML template file to an element:
$(document).ready(function() {
$('.pageElement').empty().load('/template.html');
});
solution2
0 2016-07-30 10:20:27
You can use do this $stateProvider. In routes.js set state
.config([
'$stateProvider',
'$urlRouterProvider',
'$httpProvider',
'$locationProvider',
function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) {
$urlRouterProvider.otherwise('home');
$stateProvider
.state('login', {
url: '/login',
data: { isPublic: true },
templateUrl: 'templates/AdminUser/login.html',
controller: 'AdminUserController'
});
}]);
and in controller when u redirect to login then use this like
$state.transitionTo('login');
this is short example, you can use multipal state like this way. and redirect to url without reload.
solution3
0 ACCPTED 2016-07-30 10:21:52
You could use pjax. From it's github page it says.
pjax is a jQuery plugin that uses ajax and pushState to deliver a fast browsing experience with real permalinks, page titles, and a working back button.
pjax works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax'd html. It then updates the browser's current URL using pushState without reloading your page's layout or any resources (JS, CSS), giving the appearance of a fast, full page load. But really it's just ajax and pushState.
Consider this eaxmple.
<!DOCTYPE html>
<html>
<head>
<!-- styles, scripts, etc -->
</head>
<body>
<h1>My Site</h1>
<div class="container" id="pjax-container">
Go to <a href="/page/2">next page</a>.
</div>
</body>
</html>
Your script.
$(document).pjax('a', '#pjax-container')
When a click occur on a it will attr the href and send a ajax request to that link and whole pjax-container will replace with new content's pjax-container . Same for the form sublit.
$(document).on('submit', 'form[data-pjax]', function(event) {
$.pjax.submit(event, '#pjax-container')
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.