Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » ajax tutorial

Our old forums are still available as a read-only archive.

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

Page: 1
Go to End
Author Topic: 6090 Views
  • Nicolaas
    Avatar
    Forum Moderator
    213 Posts

    ajax tutorial Link to this post

    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.

  • Fuzz10
    Avatar
    Community Member
    786 Posts

    Re: ajax tutorial Link to this post

    Nice work ,it looks pretty clear to me.

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

  • Fuzz10
    Avatar
    Community Member
    786 Posts

    Re: ajax tutorial Link to this post

    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 !

  • Garrett
    Avatar
    Community Member
    245 Posts

    Re: ajax tutorial Link to this post

    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

  • Nicolaas
    Avatar
    Forum Moderator
    213 Posts

    Re: ajax tutorial Link to this post

    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

  • Rahul
    Avatar
    Community Member
    8 Posts

    Re: ajax tutorial Link to this post

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

  • Garrett
    Avatar
    Community Member
    245 Posts

    Re: ajax tutorial Link to this post

    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

  • Willr
    Avatar
    Forum Moderator
    5462 Posts

    Re: ajax tutorial Link to this post

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

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