Load partial after clicking link
Question
On my app I need to dinamically change the main div, where my content is, but at the same time, footer and header are always the same. The main div are series of handlebars partials create with the help of grunt-handlebars-layouts . Each div, will change simply clicking on a link. Untill now my code is very simple:
$( document ).ready(function() {
$('section').on('click', '.next', function(){
moveToNextSection(event);
});
});
function moveToNextSection(event){
event.preventDefault();
var currentSection = event.currentTarget;
var nextSectionId = $(currentSection).find('.next').attr('href');
$(currentSection).closest('section').hide();
// var newSection = find section with nextSectionId as id
// $(newSection).show();
}
home.hbs partial:
<section id="home">
<h2>Welcome Home of {{projectName}}</h2>
<p>I'm the landing and first page </p>
<a href="aborto" class="next"> Click here to go to second step </a>
</section>
aborto.hbs parial:
<section id="aborto">
<h1>I'm the second page</h1>
<p>
Sei in cinta e devi abortire? Cerca qui le info necessarie!
</p>
</section>
But I just realize that with my approach, i need all the divs already loaded in the DOM, which I don't have.
Any ideas how to load a hbs partial, when clicking on a link?
Create pre-compiled Handlebars template is my only option here?
Any new approach is welcome :)
2 answers
solution1
0 2015-03-26 13:51:17
Something like this: using jquery load and your code: $(currentSection).find('.next').attr('href') is incorect used in your context :(
<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
<section id="home">
<h2>Welcome Home of {{projectName}}</h2>
<p>I'm the landing and first page </p>
<a href="http://www.localhost/aborto.hbs" ID="aborto" class="next"> Click here to go to second step </a>
</section>
</body>
<script>
$( document ).ready(function() {
$('section').on('click', '.next', function(event){
moveToNextSection(event);
});
});
function moveToNextSection(event){
event.preventDefault();
var currentSection = event.currentTarget;
var nextSectionId = $(currentSection).attr('id');
$(currentSection).closest('section').hide();
var nextPartialUrl = $(currentSection).attr('href');
var wrapper = $('<div id="wrapper"><div></div></div>')
wrapper.load(nextPartialUrl)
$($(currentSection).closest('section')).after(wrapper);
$('#' + nextSectionId).show();
}
</script>
</html>
You need this page accessible: http://www.localhost/aborto.hbs
and returning this
<section id="aborto">
<h1>I'm the second page</h1>
<p>
Sei in cinta e devi abortire? Cerca qui le info necessarie!
</p>
</section>
solution2
0 2015-03-26 17:36:43
At the end I decided to go for this solution: I include all my partials in my index.html
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
{{> home}}
{{> aborto}}
</body>
</html>
Then I hide and show the partials i need with simple js as:
$( document ).ready(function() {
$('section').on('click', '.next', function(){
moveToNextSection(event);
});
});
function moveToNextSection(event){
event.preventDefault();
var currentSection = event.currentTarget;
var nextSectionId = $(currentSection).find('.next').attr('href');
$(currentSection).closest('section').hide();
$('#' + nextSectionId).show();
}
Is probably not the most beautiful solution, since imply adding many partials (now there are just two but the app planning to have 50 partials) but is the one that does what i need for now.
Happy to hear new solutions
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.