Apex Code Development You need to sign in to do that
Don't have an account?
michaewa mooTools integration
I am new to SF / apex development, so I apologize in advance for any extreme ignorance displayed...
I am creating a custom apex page to display tasks, and alongside the tasks I need to display some 'helper' content to allow users to determine appropriate action for the task.
I have used a mooTools slider in the past to accomplish this, and am having trouble instantiating the slider within the apex page.
I have a page with the following resources to include the css and js files.
<link rel="Stylesheet" type="text/css" href="{!$Resource.slider}" /><apex:includeScript value="{!$Resource.moo_12}"/><apex:includeScript value="{!$Resource.sl_slider}"/>
Then within the page after this section, I'm attempting to call the object:
<script> window.addEvent('domready', function() { //slider variables for making things easier below var itemsHolder = $('container'); var myItems = $$(itemsHolder.getElements('.item')); //controls for slider var theControls = $('controls1'); var numNavHolder = $(theControls.getElement('ul')); var thePlayBtn = $(theControls.getElement('.play_btn')); var thePrevBtn = $(theControls.getElement('.prev_btn')); var theNextBtn = $(theControls.getElement('.next_btn')); //create instance of the slider, and start it up var mySlider = new SL_Slider({ slideTimer: 6000, orientation: 'horizontal', //vertical, horizontal, or none: None will create a fading in/out transition. fade: true, //if true will fade the outgoing slide - only used if orientation is != None isPaused: true, container: itemsHolder, items: myItems, numNavActive: false, numNavHolder: numNavHolder, playBtn: thePlayBtn, prevBtn: thePrevBtn, nextBtn: theNextBtn }); mySlider.start(); }); </script>
The page loads, but the domready function doesn't appear to be called. When I step through, I get an error indicating Uncaught TypeError: Object domready has no method 'addEventListener'
Is there another way that this needs to be referenced? I have been looking at actionFunction but thus far unable to get a working solution.
Thanks in advance for any references or suggestions.
Well, no joy getting it to work $ safe or otherwise.
The only solution I found to eliminate the conflict was to suppress the header and left nav on my apex page. That did the trick.
Thanks.
All Answers
If you are using a JavaScript library in a Visualforce page, and that library defines $ as a special character, you'll need to modify your JavaScript to override this usage.
I use jQuery but I found this article about Mootools
http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/
Thanks very much for your reply. That makes intuitive sense, although I'm not exactly sure mechanically how to go about it. I tried a few approaches with the simple search and replace suggested, but there are some cases I'm not sure about.
For instance, in the sl_slider plugin file, there are several instances similar to:
$clear(self.timer);
Would that then become
document.id(clear(self.timer));
Also, when the slider is initialized there is a double $ reference:
var itemsHolder = $('container');var myItems = $$(itemsHolder.getElements('.item'));
Should these two variables result in something like this:
var itemsHolder = document.id('container');var myItems = document.id(document.id(itemsHolder.getElements('.item')));
Thanks in advance for any suggestions.
Well, no joy getting it to work $ safe or otherwise.
The only solution I found to eliminate the conflict was to suppress the header and left nav on my apex page. That did the trick.
Thanks.