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   1727 Views

Avatar
ambient

Community Member, 123 Posts

27 May 2014 at 12:12am

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

Community Member, 225 Posts

27 May 2014 at 1:07am

Edited: 27/05/2014 1:09am

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

Community Member, 123 Posts

27 May 2014 at 1:26am

Edited: 27/05/2014 1:51am

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

Community Member, 225 Posts

27 May 2014 at 1:57am

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

Community Member, 225 Posts

27 May 2014 at 2:07am

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

Community Member, 123 Posts

27 May 2014 at 2:21am

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

Community Member, 225 Posts

27 May 2014 at 2:29am

Edited: 27/05/2014 2:30am

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

Community Member, 225 Posts

27 May 2014 at 2:40am

our-products/prod1/200 OK 403ms

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

Go to Top