Jump to:

3397 Posts in 978 Topics by 854 members

Template Questions

SilverStripe Forums » Template Questions » Make a simple ajax navigation menu

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

Page: 1
Go to End
Author Topic: 2533 Views
  • Molodoi
    Avatar
    Community Member
    6 Posts

    Make a simple ajax navigation menu Link to this post

    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 ; )

  • web2works
    Avatar
    Community Member
    50 Posts

    Re: Make a simple ajax navigation menu Link to this post

    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

  • zenmonkey
    Avatar
    Community Member
    524 Posts

    Re: Make a simple ajax navigation menu Link to this post

    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

    2533 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.