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.

General Questions

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

[SOLVED] Setup an ajax call to load content


Go to End
Reply

15 Posts   1499 Views

Avatar
ambient

27 May 2014 at 12:12am Community Member, 123 Posts

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

Avatar
Devlin

27 May 2014 at 1:07am (Last edited: 27 May 2014 1:09am), Community Member, 215 Posts

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

Avatar
ambient

27 May 2014 at 1:26am (Last edited: 27 May 2014 1:51am), Community Member, 123 Posts

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...
}
}


And in the ProductHolder.ss I have

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

});

Avatar
Devlin

27 May 2014 at 1:57am Community Member, 215 Posts

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>

Avatar
Devlin

27 May 2014 at 2:07am Community Member, 215 Posts

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.

Avatar
ambient

27 May 2014 at 2:21am Community Member, 123 Posts

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">


and in my main.js

$('.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;

});


The console gives me this with no errors
http://www.mysite.com/our-products/prod1/200 OK 403ms

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

Avatar
Devlin

27 May 2014 at 2:29am (Last edited: 27 May 2014 2:30am), Community Member, 215 Posts

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.

Avatar
Devlin

27 May 2014 at 2:40am Community Member, 215 Posts

our-products/prod1/200 OK 403ms

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

Go to Top