Jump to:

3439 Posts in 1028 Topics by 869 members

Template Questions

SilverStripe Forums » Template Questions » jQuery problem when using renderWith()

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

Page: 1
Go to End
Author Topic: 725 Views
  • Woos
    Avatar
    Community Member
    1 Post

    jQuery problem when using renderWith() Link to this post

    Hi all,

    I have a problem regarding accessing an element id from a jQuery click event when the actual element is part of template rendered with the method renderWith(). I cannot figure out whats wrong and could surely need some wise input.

    Here is my code (of interest):

    ProductListPage.php
    -----------------------
    class ProductListPage extends Page {
    ..
    ..
    }
    class ProductListPage_Controller extends Page_Controller {
       
       function init() {
          parent::init();
          Requirements::javascript("themes/mytheme/javascript/jquery.js");
          Requirements::javascript("themes/mytheme/javascript/script.js");
          
          if(Director::is_ajax() || $_GET["ajaxDebug"]) {
             $this->isAjax = true;
          } else {
             $this->isAjax = false;
          }
       }
       
       public function filter() {      
          ..
          ..
        $myDataObjectSet = singleton('Product')->buildDataObjectSet($result);
        return $this->customise(array('Products' => $myDataObjectSet))->renderWith(array('GridView'));

    }   
    }

    ProductListPage.ss
    -----------------------
    ...
    <div id="AjaxContainer">Ajax container</div>
    ..
    <div><a href="#" id="displayed-ok-in-alert" rel="ajax">Working fine</a></div>
    ..
    <div><a href="#" id="not-important" onclick="jQuery('#AjaxContainer').load('$URLSegment/filter/A/B/'); return false;">Populate Ajax container</a></div>
    ..

    GridView.ss
    -----------------------
    ..
    <div><a href="#" id="not-displayed-in-alert" rel="ajax">Not working</a>
    ..

    script.js
    -----------------------
    $('a[rel=ajax]').click(function (event) {   
       alert(event.target.id);
    });

    Everything works fine and clicking the link 'Working fine' fires off the click event and an alert according to 'displayed-ok-in-alert' is displayed. When clicking the link 'Not working' however, the alert is not fired of at all. How come?

    I have noticed that the actual markup for the HTML rendered with renderWith() i.e. the markup in GridView.ss isnt visible when viewing the page source in Firefox. Why is that? And, is that the origin of this problem?

    I am running Silverstripe 2.4.7 localy on a WAMP installation.

    Thankful for any help or pointers on this topic.

    Ciao!

  • zenmonkey
    Avatar
    Community Member
    528 Posts

    Re: jQuery problem when using renderWith() Link to this post

    This is more of a jQuery issue than an SS I think.

    First to you have Firebug with the jQuery plugin installed? It'll ensure you ajax calls a rendered in the source as well as help debug jQuery issues. Second make sure you're using the prevenDefault() on your click function to ensure that the browser going to '#' isn't causing issues.

  • Willr
    Avatar
    Forum Moderator
    5497 Posts

    Re: jQuery problem when using renderWith() Link to this post

    I have noticed that the actual markup for the HTML rendered with renderWith() i.e. the markup in GridView.ss isnt visible when viewing the page source in Firefox. Why is that? And, is that the origin of this problem

    View source doesn't show AJAX html. You have to use the console panel for that. Note that if you insert something into a page via AJAX you don't automatically get all the event handlers. This forms the basis of the delegate() / .on() and .live() functionality in jQuery. I suggest reading up on those.

    http://api.jquery.com/live/
    http://api.jquery.com/on/

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