Hi Folk

I have written a basic ajax tutorial: http://doc.silverstripe.com/doku.php?id=recipes:ajax_basics. I was wondering if you could give me some feedback in making this a really simple and clear Ajax explanation and if I missed anything.

Nice work ,it looks pretty clear to me.

I'll post here once I've actually tried it out.

Hi,

Just ran through your tutorial. It works. Two things I noticed :

- The listing of page.php is not complete. It needs the class Page to be defined as well (otherwise you can't create the page in CMS). So something like this needs to be added :

class Page extends SiteTree {
	static $db = array(
	);
	static $has_one = array(
   );
}

- One thing wasn't really clear to me ; it took me quite some time to realize I needed to create the "mypage" page in the CMS. I started digging around with virtual pages (see recipes:controllers), but that wasn't it. ;-)

Good work !

Hi,

I am having a lot of problems using Ajax to load content from other URL's in the sense that the URL in the address bar never changes, which of course causes strange behavior when refreshing the browser, going back and forward, goingdirectly TO a page, etc.

I am hoping that you, or someone, can explain to me what this whole concept of "www.mysite.com/mypage/myaction/" as opposed to just "www.mysite.com/mypage/" is. I have a feeling this is related, is it not?

First of all, $('element_name').load(url) successfully loads my content fine completely WITHOUT any of the isAjax() code given in the tutorial, so I am not sure what this code is for.

Secondly, the tutorial says, "Above is an example of an action that can be called from your page. In the html it is shown how to call this action." However, there is no explanation of WHAT this action IS, and how to assign/define it.

I'm assuming that the whole idea with the "second part" to the URL ("www.mysite.com/mypage/myaction/") is to TELL Silverstripe that we are using Ajax, right? So how do I get the URL of page content I am loading into my current URL to "stack on" to my current URL as indicated by the /$page/$action concept? Does /$action MEAN the second part? The URL of the Ajax-called page?

I'm doing an image gallery. The URL is:

.../portfolio-web-interactive/

Then I click on a picture, using $('element_name').load('portfolio-wi-project-1');

How can I get the URL then to become:

.../portfolio-web-interactive/portfolio-wi-project-1

?

Isn't this the way it's supposed to work? Do I use urlParams to set this action or what?

Any help would be GREATLY and TRULY apperciated-- my whole site depends on this URL thing getting cleared up.

Thanks in advance,
Garrett

Hi Garret

I am not sure if I understand your question. A number of things seem to be mixed up. I am going to have a look at the tutorial to see if I can make it better as this will help everyone.

Cheers

Nicolaas

Hi Nicolaas,

i am trying ur ajax example ....

but i am not getting any out put .....
I explain u what i am doing ...
First i create a file as Page.php in tutorial/code ...

class Page extends SiteTree {
	static $db = array(
	);
	
	static $defaults = array(
	);	
}

class Page_Controller extends ContentController {
 
 // below we work out if the page is called as AJAX or as a normal page
 // the init function always runs.
 // we have added the $_GET["ajaxDebug"] for testing purposes
 // you can test the ajax output by loading the page as /mysite/?ajaxDebug=1
 function init(){
  
  //add a javascript library for easy interaction with the server
  Requirements::javascript('http://code.jquery.com/jquery-latest.pack.js');
  if(Director::is_ajax() || isset($_GET["ajaxDebug"])) {
   $this->isAjax = true;
  }
  else {
   $this->isAjax = false;
  } 
    Requirements::themedCSS("layout");
		Requirements::themedCSS("typography");
		Requirements::themedCSS("form");
  parent::init();
 }
 
 // if no action is called (i.e. the URL does not have a second part to it)
 // www.mysite.com/mypage rather than www.mysite.com/mypage/myaction/ 
 // then the index function runs automatically
 function index() {
  if($this->isAjax) {
   return $this->renderWith("ajaxSnippet");
  }
  else {
   return Array();
  }  
 }
 
 // see comments below for explanation
 function addProduct($productNumber) {
  $productNumber = Director::urlParam("ID");
  Debug::show($productNumber);
  $this->addProductToDatabase($productNumber);
  if($this->isAjax) {
   return "your product (# $productNumber) has been added";
  }
  else {
   return Array();
  }
 }
 function showImage () {
  if($this->isAjax) {
   return $this->renderWith("ajaxSnippet");
  }
 }
}

Then i Edit a file tutorial\templates\Page.ss as

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
	<head>
		<% base_tag %>
		<link rel="stylesheet" type="text/css" href="tutorial/css/layout.css" />
		<link rel="stylesheet" type="text/css" href="tutorial/css/typography.css" />
		<link rel="stylesheet" type="text/css" href="tutorial/css/form.css" />
	</head>
	<body>
		<div id="Main">
			<div id="Header">
				<h1>&nbsp;</h1>
			</div>
			<div id="ContentContainer">
				<div id="Content" class="typography">
					$Content	
          <div id="ajaxContent">ajax will appear here...</div>
         <p>
          <a href="mypage" onclick="$('#ajaxContent').load('$URLSegment/showImage'); return false;">click here to load new picture</a>
          <a href="mypage/addProduct/3" onclick="$('#ajaxContent').load('$URLSegment/addProduct/3'); return false;">add product</a>
         </p>				 
					$Form
				</div>
			</div>
			<div id="Footer">
				<span>Visit <a href="http://www.silverstripe.com" title="Visit www.silverstripe.com">www.silverstripe.com</a>; to download the CMS</span>
			</div>
		</div>
		$SilverStripeNavigator
	</body>
</html>

Then i create a file as ajaxSnippet.ss

<img src="/tutorial/images/welcome.png" alt="freshly loaded pig" /> 
 $Title

After this created a mypage through admin ... and publish it...

And try this url http://localhost/silverstripe/mypage/myaction/

it did not invokes index function ...
please tell me what i am doing wrong ...

Thanks in advance

Hi,

Has anyone figured out how to use the hash in SS so that you can use ajax but still be able to refresh pages without going back to the original url?

//Garrett

Garrett, you might have to do a return false eg for jquery onclick things normally you have to do

$("#MyLink").click(function(){

// do stuff

return false;
});