-
VeCrea
-
-
Offline
-
Platinum Member
-
-
Absolute JCook fan
- Posts: 473
- Thank you received: 100
-
Karma: 30
-
|
I searched for some time how to be able to add jQuery UI widgets or code to my Cook-made component.
Here is what I came up with (i take it you use Jquery as JS Framework, in your cook builder config) :
1) Load jQuery UI
in administrator/components/com_yourComponentName/helpers/helper.php, on line 231, you have the code that loads JQuery. //Load jQuery from the CDN
$doc->addScript('http://code.jquery.com/jquery.min.js');Just add a line under that : //Load jQuery from the CDN
$doc->addScript('http://code.jquery.com/jquery.min.js');
$doc->addScript('http://code.jquery.com/ui/1.8.24/jquery-ui.min.js');
Then, go to the views folder and take the theViewYouWantToModify.php file that is at the root of the view you want to modify. You'll see, at the very beginning of the file : yourComponentNameHelper::headerDeclarations();
?>
<script language="javascript" type="text/javascript">
jQuery(document).ready(function(){
jQuery("#adminForm").validationEngine();
});Again, just add a line with whatever UI widget you want to use. E.g., for accordion : RaptechsHelper::headerDeclarations();
?>
<script language="javascript" type="text/javascript">
jQuery(document).ready(function(){
jQuery("#adminForm").validationEngine();
jQuery( "#accordion" ).accordion();
});with #accordion representing the div id that will contain your accordion-formatted datas. For more infos on this, go to jqueryui.com/demos/accordion/
3) And use it in your fly or form
Now, in the theViewYouWantToModify_fly.php or theViewYouWantToModify_form.php, add the divs that will make it all work out.
For more infos on this, go to jqueryui.com/demos/accordion/
Hope it helps, any comments welcome.
(Admin, may be a good idea to start a new section with HOW TO's, will serve as technical documentation)
|
|
Last Edit: 03 Oct 2012 13:35 by admin.
|
-
BTB300
-
-
Offline
-
Moderator
-
- Posts: 414
- Thank you received: 130
-
Karma: 46
-
|
Thank You VeCrea,
Together we can make the Cook Environment / Experience even better
|
|
Last Edit: 30 Sep 2012 09:00 by BTB300.
The following user(s) said Thank You: JoomGuy |
-
JoomGuy
-
-
Offline
-
Moderator
-
-
Joomla Enthusiast, Lover of Cooking
- Posts: 1115
- Thank you received: 195
-
Karma: 64
-
|
Thanks for this @VeCrea!
I'm a massive fan of JQuery & it's UI libs and have made quite extensive use of them in previous projects.
I definitely want to integrate them into my COOK-generated component and although I've not done this yet, I thought about going the JDom route - defining each UI element (tabs, accordion, slider, dialo and progressbar etc) that I need in a JDom class of their own.
I've not played with JDom yet and wondered whether you would recommend going this route? Would this make calling UI & JQuery really straightforward throughout the component?
Thanks for sharing!
Gez
|
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
The following user(s) said Thank You: admin |
-
VeCrea
-
-
Offline
-
Platinum Member
-
-
Absolute JCook fan
- Posts: 473
- Thank you received: 100
-
Karma: 30
-
|
BTB300, i find your post very useful, but wouldn't it be better to create another topic, to keep things clear when someone searches an answer ?
|
|
|
-
BTB300
-
-
Offline
-
Moderator
-
- Posts: 414
- Thank you received: 130
-
Karma: 46
-
|
HI VeCrea,
Point taken, was thinking of trying to help admin create some form of documentation [HOW TO] area
post moved
|
|
|
-
admin
-
-
Online
-
Administrator
-
-
Chef
- Posts: 3711
- Thank you received: 984
-
Karma: 140
-
|
Added in your component by default now.
|
Coding is now a piece of cake
|
-
VeCrea
-
-
Offline
-
Platinum Member
-
-
Absolute JCook fan
- Posts: 473
- Thank you received: 100
-
Karma: 30
-
|
Maybe you could also add a call to a stylesheet //Load jQuery from the CDN
$doc->addScript('http://code.jquery.com/jquery.min.js');
$doc->addScript('http://code.jquery.com/ui/1.8.24/jquery-ui.min.js');
$doc->addStyleSheet($componentUrlAdmin . '/css/jquery.ui.css');and a standard css file, just to allow widget templating.
|
|
Last Edit: 15 Oct 2012 17:18 by VeCrea.
|
-
blue-canoe
-
-
Offline
-
Senior Member
-
- Posts: 57
- Thank you received: 16
-
Karma: 7
-
|
Hello all,
I have been reading this and other topics regarding integrating jQuery ui widgets into a component. But I cannot get it to work. I have generated my component using Cook 2.0 and am now working offline to do other modifications.
In one of my views I want to use jQuery's UI widgets and tried many things. I reduced it now to the core basics (using the tab ui widget, but it does not work (in any browser)).
I greatly simplified the code of the view (just copied the example of the jQuery tab widget) to see how to get it to work. This is my code in the view template now:
<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
CricketleagueHelper::headerDeclarations();
?>
<script language="javascript" type="text/javascript">
jQuery(document).ready(function(){
jQuery( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<h2>Content heading 1</h2>
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<h2>Content heading 2</h2>
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<h2>Content heading 3</h2>
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
As all the required libraries should already be loaded via the helper.php I assume I have to do nothing else.
What happens:
- I get no errors on my console, so the libraries load fine
- It creates the tab interface, however all tabs are still visible
- When clicking on the tabs nothing happens
What am I missing here/doing wrong?
Cheers,
Misha
|
|
|
-
JoomGuy
-
-
Offline
-
Moderator
-
-
Joomla Enthusiast, Lover of Cooking
- Posts: 1115
- Thank you received: 195
-
Karma: 64
-
|
Just as a test, try loading the JS/CSS libs from the CDN...
I just tried your code in a static page locally and it works fine loading the libs from jquery's CDN so there's nothing wrong with your code per se.
- I get no errors on my console, so the libraries load fine
- It creates the tab interface, however all tabs are still visible
- When clicking on the tabs nothing happens Are you absolutely certain that you're loading the CSS for UI?
Here's exactly what I was working with locally: <!DOCTYPE html>
<title>Test Tabs</title>
<head>
<!-- Load CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<!-- Load JS -->
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!-- INIT TABS -->
<script language="javascript" type="text/javascript">
jQuery(document).ready(function(){
jQuery( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<h2>Content heading 1</h2>
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<h2>Content heading 2</h2>
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<h2>Content heading 3</h2>
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
</html>Hope it helps,
Gez
|
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
|
-
blue-canoe
-
-
Offline
-
Senior Member
-
- Posts: 57
- Thank you received: 16
-
Karma: 7
-
|
Yeah locally (as a test page outside of my joomla environment it worked as well), so guess something in the environment is causing the problem.
I checked the helper file, which loads the CSS/JS files and it has this code:
//Load jQuery from the CDN
$doc->addStyleSheet('http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css');
$doc->addScript('http://code.jquery.com/jquery-1.8.3.js');
$doc->addScript('http://code.jquery.com/ui/1.8.24/jquery-ui.min.js');
It loads a difference version of the js file for the jquery-ui (18.24 instead of 1.9.2). When I change that some other things fail on the page (unrelated to the component, for example I am using a yootheme warp template, which also uses some jQuery), so maybe it is that.
I am now trying to strip down the page code to see what is the problem.
|
|
|
-
JoomGuy
-
-
Offline
-
Moderator
-
-
Joomla Enthusiast, Lover of Cooking
- Posts: 1115
- Thank you received: 195
-
Karma: 64
-
|
That's really strange!
I first tried to load it with: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script> which I think gave me the same behaviour as you described:
Hope you find it!
Gez
|
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
|
-
blue-canoe
-
-
Offline
-
Senior Member
-
- Posts: 57
- Thank you received: 16
-
Karma: 7
-
|
Yeah I guess it is the versions of those two libraries. However, if I open the jquery-latest.min.js it shows as being version 1.8.3.
Anyway after changing the helper file to load those newer versions. I get different problems, which probably cause the problem with the tabs.
Joomla generates a meta tag <base href="(current page)" /> in the header.
When I remove that tag, it works fine!
So will do some more research into why....
|
|
|
-
JoomGuy
-
-
Offline
-
Moderator
-
-
Joomla Enthusiast, Lover of Cooking
- Posts: 1115
- Thank you received: 195
-
Karma: 64
-
|
Do you have any other jQuery loaded already?
If you are using elsewhere and it is a different version, the new UI being called (or jQuery itself) could be conflicting...
Just a thought!
Gez
|
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
|
-
blue-canoe
-
-
Offline
-
Senior Member
-
- Posts: 57
- Thank you received: 16
-
Karma: 7
-
|
I had before, but when not loading that, the same issue,
Seems to have something to do with that base ref tag (and maybe some other things)...
|
|
|
-
blue-canoe
-
-
Offline
-
Senior Member
-
- Posts: 57
- Thank you received: 16
-
Karma: 7
-
|
Little update: when I switch off friendly urls in the global configuration it works as well.
I also just realised that the friendly path generated is a bit strange:
instead of an expected path of:
index.php/(alias_my_view)
if generates:
index.php/(alias_some_other_view)/(alias_my_view)
So in the part where this url friendly path is generated something goes wrong (probably because of my configuration), but not sure where this is done....
Not sure if this has anything to do with it, but it is possible
|
|
|
|
