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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Template Questions /

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

jQuery problem when using renderWith()


Go to End


3 Posts   1593 Views

Avatar
Woos

Community Member, 1 Post

12 April 2012 at 1:19am

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!

Avatar
zenmonkey

Community Member, 545 Posts

12 April 2012 at 2:04am

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.

Avatar
Willr

Forum Moderator, 5523 Posts

13 April 2012 at 7:19pm

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/