Hi...
I tried asking for a solution for this a few days ago but I think my question was unnecessarily complicated so I'm trying again :)

Can anyone help with seting up an ajax call to load content onto a page?

Once the link is clicked I want the ajaxtemplate.ss to load on the page.

I'm just not sure how to call the ajaxtemplate.ss or what I need to do in the Page_Controller to get the template to load.

Has anyone done anything like this before?

Any help at all would be appreciated,
Thanks

http://doc.silverstripe.org/framework/en/reference/templates#calling-templates-from-php-code

jQuery:

$('#mycontainer').load( 'mypage', function() {}); // load mypage into #mycontainer

Controller:

public function index() {
	if(Director::is_ajax()) {
		Requirements::clear();
		return $this->renderWith("myAjaxTemplate");
	} else {
		return array();
	}
}

Hi Devlin,
I think I've been on the right track but it's not loading the template content into my project-content div for some reason. Does what I have below look correct to you?

In Page.php Controller I have

public function index() {
        if(Director::is_ajax()) {
            return $this->renderWith("ProductPage");
        } else {
            return Array();// execution as usual in this case...
        }
    }

<a href="mypage" onclick="$('#project-content').load( '$URLSegment', function() {});" class="open-project">

I also have this in my Main.js file which might be relevant?

//Portfolio Project Loading
  $('.open-project').click(function(){    
    var projectUrl = $(this).attr("href");      
    
    $('#project-content').animate({opacity:0}, 400,function(){
      $("#project-content").load(projectUrl);
      $('#project-content').delay(400).animate({opacity:1}, 400);
    });  
    
    //Project Page Open
    $('#project-extended').slideUp(600, function(){
      $('#project-extended').addClass('open');
      $('html, body').animate({ scrollTop: $(".portfolio-bottom").offset().top }, 900);
    }).delay(500).slideDown(600,function(){          
        $('#project-content').fadeIn('slow',function(){
          if ($('.project-slider').length > 0) {
            initProjectSlider();
          }
        });
    });

    return false;       
  
  });

I think I've been on the right track but it's not loading the template content into my project-content div for some reason.

Did you check the console for messages?

There should be a notification like "GET /mypage/ 200 OK" after you've clicked the link. If it's not, check the response bodies for possible error messages.

https://addons.mozilla.org/de/firefox/addon/firebug/

Does what I have below look correct to you?
Basically, but add a "return false" to your link to prevent the browser to direct to that link.

<a href="mypage" onclick="$('#project-content').load( '$URLSegment', function() {});return false;" class="open-project">link</a>

I also have this in my Main.js file which might be relevant?

Well, it'd be better if you move your JavaScript code from the link to your Main.js file.

Hi Devlin, sorry, I should've spotted the main.js code earlier

So now in my ProductHolder.ss I have

<a href="$Link" class="open-project">

$('.open-project').click(function(){    
    var projectUrl = $(this).attr("href");      
    
    $('#project-content').animate({opacity:0}, 400,function(){
      $("#project-content").load(projectUrl);
      $('#project-content').delay(400).animate({opacity:1}, 400);
    });  
    
    //Project Page Open
    $('#project-extended').slideUp(600, function(){
      $('#project-extended').addClass('open');
      $('html, body').animate({ scrollTop: $(".portfolio-bottom").offset().top }, 900);
    }).delay(500).slideDown(600,function(){          
        $('#project-content').fadeIn('slow',function(){
          if ($('.project-slider').length > 0) {
            initProjectSlider();
          }
        });
    });

    return false;       
  
  });

But it's still not showing the content, I don't understand what I'm missing here?

Let's try something simple:

public function index() {
	if(Director::is_ajax()) {
		Requirements::clear();
		return "my test string";
	} else {
		return array();
	}
}

It should show "my test string" in your container.

our-products/prod1/200 OK 403ms

Can you take a look at the response message in this notification?