Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Template Questions /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Make a simple ajax navigation menu


Go to End


3 Posts   4039 Views

Avatar
Molodoi

Community Member, 6 Posts

29 August 2010 at 1:04pm

Hello Silverstripe Community,

Nice to meet you ; )

I try to do a simple ajax navigation menu with jquery ... and i'm so confused ><((°>

I try to be clear to explain me.

I have one main template to "themes/tutorial/templates/Pages.ss and others views are in the Layout folder. All correct

I would like retrieve theirs html contents in my $Layout placeholder with ajax ...

See my init function in Page.php

/*-----------------------------------------------------------*/

public function init() {
Requirements::themedCSS('layout');
Requirements::themedCSS('typography');
Requirements::themedCSS('form');
Requirements::javascript('http://code.jquery.com/jquery-1.4.2.min.js');
Requirements::customScript(<<<JS
jQuery.noConflict();
JS
);
Requirements::customScript(<<<JS
jQuery(document).ready(function(){
jQuery('#Menu1 a').click(function(){
page = jQuery(this).attr('href');
jQuery.ajax({
url: page,
cache: false,
success:function(html){
display(html);
},
error:function(XMLHttpRequest,textStatus,errorThrown){
display(textStatus);
}
})
return false;
});
});

function display(html){
jQuery('#ContentContainer').empty();
jQuery('#ContentContainer').append(html);
}

JS
);
parent::init();
}

/*-----------------------------------------------------------*/

And see the links in Pages.ss

<ul id="Menu1">
<% control Menu(1) %>
<li class="$LinkingMode"><a href="$Link" title="Aller &agrave; la page &quot;{$Title}&quot;" class="nav">$MenuTitle</a></li>
<% end_control %>
</ul>

<div id="ContentContainer">
$Layout
</div>

/*-----------------------------------------------------------*/

It works ... because it's easy

But, Ajax Request return all html content (header, menu, content and footer) in the div ContentContainer...

OK normal because my URL ajax request (page = jQuery(this).attr('href');) is e.g : http://localhost/website/news

I think it's a RewriteRule probleme or routing SS story

I would like to know ... How can i do to have the good behaviour?

I hope don't have fully false in my simple ajax reflexion : )

Please somebody can help me ...

thx Matt ; )

Avatar
web2works

Community Member, 50 Posts

26 September 2010 at 1:39am

That would be amazing to be able to simple replace all of the includes via ajax. Can you post any examples you have of the code for me to learn off. Thanks if you can Ben

Avatar
zenmonkey

Community Member, 545 Posts

9 October 2010 at 3:08am

You need to create an AJAX template which will return a page formatted without the page.ss template. And enable ajax requests.

http://doc.silverstripe.org/recipes:ajax_basics

I've used it the past to create XML versions of pages for complex jQuery product/image switchers