Welcome, Guest
Username: Password: Remember me

TOPIC: [HOW TO] add Jquery UI to your component

Re: [HOW TO] add Jquery UI to your component 22 Dec 2012 14:37 #6234

  • JoomGuy
  • JoomGuy's Avatar
  • Offline
  • Moderator
  • Joomla Enthusiast, Lover of Cooking
  • Posts: 1115
  • Thank you received: 195
  • Karma: 64
That is very strange!

router.php I believe is where URL builds are generated...

Hope it helps!

G
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
The administrator has disabled public write access.

Re: [HOW TO] add Jquery UI to your component 22 Dec 2012 14:43 #6236

  • JoomGuy
  • JoomGuy's Avatar
  • Offline
  • Moderator
  • Joomla Enthusiast, Lover of Cooking
  • Posts: 1115
  • Thank you received: 195
  • Karma: 64
generates:
index.php/(alias_some_other_view)/(alias_my_view)
Is alias_some_other_view in the first part the alias of your menuitem by any chance?

Gez
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
The administrator has disabled public write access.

Re: [HOW TO] add Jquery UI to your component 22 Dec 2012 14:52 #6239

  • blue-canoe
  • blue-canoe's Avatar
  • Offline
  • Senior Member
  • Posts: 57
  • Thank you received: 16
  • Karma: 7
Well in one of the views this is the generated url:

dev.cricket.com/index.php/cricketleague-...atch-centre/fixtures

Where I would have expected:

dev.cricket.com/index.php/match-centre/fixtures

As the view is the fixtures menu option, within the match-centre menu.

The 'cricketleague-menu-stat-point' is a related to a view which currently exists, but not used yet. Funny enough that is the last view I generated using Cook. The match-centre view and fixtures are created locally.

Just trying to find out where it decides to at this 'cricketleague-menu-stat-point'. Was checking all the database entries, but cannot find an entry...
The administrator has disabled public write access.

Re: [HOW TO] add Jquery UI to your component 22 Dec 2012 14:59 #6241

  • blue-canoe
  • blue-canoe's Avatar
  • Offline
  • Senior Member
  • Posts: 57
  • Thank you received: 16
  • Karma: 7
hmmm I noticed in the ones which are menu options, I can actually changing it in the table directly and it is correct.

However, this won't work for links on a page, which are not menus and I also noticed whenever I add a menu item it always includes this 'cricketleague-menu-stat-point' to the url....
The administrator has disabled public write access.

Re: [HOW TO] add Jquery UI to your component 22 Dec 2012 15:23 #6243

  • blue-canoe
  • blue-canoe's Avatar
  • Offline
  • Senior Member
  • Posts: 57
  • Thank you received: 16
  • Karma: 7
Well good news and bad news.

This routing issue was easily fixed with rebuilding the menu tree using the 'rebuild' function in the back-end. Most urls are now ok. There are some small issues still, such as when I go into the 'dev.cricket.com/index.php/match-centre/fixtures/' menu and then afterwards apply a filter (I have some combo's on top where they can narrow down the selection) it will apply the filter, but then the url is 'dev.cricket.com/index.php/match-centre/f...matchcenter/fixtures', so twice... but that is for later to look into.

The bad news is that it did not fix the original problem...
The administrator has disabled public write access.

Re: [HOW TO] add Jquery UI to your component 22 Dec 2012 15:27 #6244

  • JoomGuy
  • JoomGuy's Avatar
  • Offline
  • Moderator
  • Joomla Enthusiast, Lover of Cooking
  • Posts: 1115
  • Thank you received: 195
  • Karma: 64
Please see docs.joomla here for info on routing/urls and here specifically for component routing with menuitems

Hope it helps!

G
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
The administrator has disabled public write access.

Re: [HOW TO] add Jquery UI to your component 22 Dec 2012 15:32 #6245

  • JoomGuy
  • JoomGuy's Avatar
  • Offline
  • Moderator
  • Joomla Enthusiast, Lover of Cooking
  • Posts: 1115
  • Thank you received: 195
  • Karma: 64
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
The administrator has disabled public write access.

Re: [HOW TO] add Jquery UI to your component 22 Dec 2012 16:01 #6246

  • blue-canoe
  • blue-canoe's Avatar
  • Offline
  • Senior Member
  • Posts: 57
  • Thank you received: 16
  • Karma: 7
Thanks for those links. I will look into those later when I do the minor fixes on the urls.

At the moment I am looking into this jQuery thing again as it still not works. What happens at the moment is that it loads the page and the view with the tabs, but on top of the tab it reloads the whole page again.

It seems like some thing to do with this base ref tag, but tried to remove the generation it from the jooma code (head.php), but even when I comment it out, it is still generated.

If that is the solution it is still not ideal, but at least I can see what is going on....
The administrator has disabled public write access.

Re: [HOW TO] add Jquery UI to your component 22 Dec 2012 16:45 #6248

  • JoomGuy
  • JoomGuy's Avatar
  • Offline
  • Moderator
  • Joomla Enthusiast, Lover of Cooking
  • Posts: 1115
  • Thank you received: 195
  • Karma: 64
Hi Misha,

OK I just tried this myself and I was getting the same issue too!

I was getting a 'no method 'tabs' error in console though. Don't know if this is the same for you as you previously said that there weren't any console errors but, this appears to be a template/js conflict because my template is also loading jQuery.

To test, I reverted to using beez20 template and the tabs work fine except for the fact that they don't look perfect as the CSS is not loaded in the frontend for me at the moment.

Does this help in your case?

Gez
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
The administrator has disabled public write access.

Re: [HOW TO] add Jquery UI to your component 23 Dec 2012 06:11 #6257

  • blue-canoe
  • blue-canoe's Avatar
  • Offline
  • Senior Member
  • Posts: 57
  • Thank you received: 16
  • Karma: 7
Hi Gez,

Well not really sure if that is the case. I switched back to Beez2 a few times and have the same problems with that one

Will continue digging...

Misha
The administrator has disabled public write access.

Re: [HOW TO] add Jquery UI to your component 23 Dec 2012 10:56 #6258

  • blue-canoe
  • blue-canoe's Avatar
  • Offline
  • Senior Member
  • Posts: 57
  • Thank you received: 16
  • Karma: 7
After a lot of testing I decided to build a test component. I used Cook (of course!) to generate a very simple component with 1 table and the related views.

I installed this component in a very clean joomla environment (no templates, no other custom components).

When in the browser I access my clean site via the following url :

dev.cleantest.com/index.php?option=com_t...ayout=testitem&cid=2

I get the correct page, i.e. the item fly I created.

Then I wanted to test the jquery tabs, so I changed the item view template to the following:
<?php
/**                               ______________________________________________
*                          o O   |                                              |
*                 (((((  o      <    Generated with Cook Self Service  V2.0     |
*                ( o o )         |______________________________________________|
* --------oOOO-----(_)-----OOOo---------------------------------- www.j-cook.pro --- +
* @version		2.5
* @package		Tabs Test
* @subpackage	Test
* @copyright	Copyright 2012, All rights reserved
* @author		 -  - 
* @license		GNU/GPL
*
* /!\  Joomla! is free software.
* This version may have been modified pursuant to the GNU General Public License,
* and as distributed it includes or is derivative of works licensed under the
* GNU General Public License or other free or open source software licenses.
*
*             .oooO  Oooo.     See COPYRIGHT.php for copyright notices and details.
*             (   )  (   )
* -------------\ (----) /----------------------------------------------------------- +
*               \_)  (_/
*/

// no direct access
defined('_JEXEC') or die('Restricted access');


TabstestHelper::headerDeclarations();
?>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <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>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    jQuery(function() {
        jQuery( "#tabs" ).tabs();
    });
    </script>
<?php echo(JFactory::getApplication()->get('JComponentTitle')); ?>
<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">
        <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">
        <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">
        <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>

So just the basic example for jQuery tabs.

When I typed in the exact same url, I get the same issues as before. It loads the page, does not proper initialise the tabs and on top of each tab the whole page is loaded again.

Note: when for the same view I make an menu item, it works fine! So the problem happens when a link is being made to this view and there is no view item (like it is the case in my original component)...
The administrator has disabled public write access.

Re: [HOW TO] add Jquery UI to your component 23 Dec 2012 12:05 #6259

  • blue-canoe
  • blue-canoe's Avatar
  • Offline
  • Senior Member
  • Posts: 57
  • Thank you received: 16
  • Karma: 7
Hi Gez (and others),

I think I cracked it! As mentioned before, the problem happened when accessing a view directly using an url (either from browser or via another view (JRoute link/href).

What happens is that the <base href> on top of the documents is not correctly set. Or maybe it is correct and jquery cannot deal with it properly.

My solution is to set the base ref myself. I don't want to change the core joomla files (such as the head.php renderer), so I decided to put it in the main index.php file (in the root of joomla). For sure there are more elegant solutions (maybe a plugin), but this works for me.

I added the following lines to this index.php file (Bear in mind that location where to put it is important, i.e. after the dispatch call)
// Dispatch the application.
$app->dispatch();

// added these to lines
$document = JFactory::getDocument();
$document->setBase("http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]);

This will set the base ref to the full path and not just the main, which was causing the issue. Of course it will need some testing if it does not break other parts of the site, but the problem view is now working with the jQuery tabs.

Of course, if somebody has better solution or comments on this, I would be very interested.

Misha
The administrator has disabled public write access.
The following user(s) said Thank You: JoomGuy

AVOID CONFLICTS: LOAD JQUERY ONLY IF NOT LOADED 20 Jan 2013 12:30 #6484

  • JoomGuy
  • JoomGuy's Avatar
  • Offline
  • Moderator
  • Joomla Enthusiast, Lover of Cooking
  • Posts: 1115
  • Thank you received: 195
  • Karma: 64
Hey cooks,

just thought I'd share a a little tip on integrating jQuery into your component...

OK, so COOK lets us add jQuery (and bundle the library) directly from the builder - AWESOME!

BUT, what if another component already has it loaded - maybe a different version???
Well, at best, you'll be loading surplus scripts into the page and at worst, you could run in to conflicts that will break some jQuery calls. Therefore its good practice to check that jquery hasn't already been loaded before you go and load another copy.

Here's how...
  1. Locate the headerDeclarations() function in your admin/helpers/helper.php file
  2. After the lines:
    $doc->addScriptDeclaration("var Moo = document.id;");
    , paste the following:
    /**** Check jQuery Not already loaded ****/
    // Get head data
    $head_data = $doc->getHeadData();
    		
    //Loop through to check for existing jQuery & UI
    foreach(array_keys($head_data['scripts']) as $script){
    	if (!stristr($script, 'jquery')){ //jQuery
    		//jQuery isn't loaded so, load it
    		$doc->addScript($componentUrlAdmin . '/js/jquery-1.8.2.min.js');
    	}
    	if (!stristr($script, 'jquery-ui')){//UI
    		//jQuery UI isn't loaded so, load it
    		$doc->addScript($componentUrlAdmin . '/js/jquery-ui-1.9.1.min.js');
    	}
    }
    /**** END ****/
  3. If necessary, change the $doc->addScript() method by replacing the path/url parameter(s) with the ones you had originally.
  4. Comment out or Remove the original $doc->addScript() calls to prevent the scripts from being loaded explicitly
To test, place $doc->addScript() call(s) with say a copy of jQuery and/or UI from google AHEAD of your new IF() block and check the head of a page in your component by viewing source... ONLY the copy you loaded explicitly before the IF block should appear.

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!!!
Last Edit: 20 Jan 2013 13:06 by JoomGuy. Reason: tidied up the code
The administrator has disabled public write access.
The following user(s) said Thank You: blue-canoe

Re: AVOID CONFLICTS: LOAD JQUERY ONLY IF NOT LOADED 24 Jan 2013 11:57 #6497

  • blue-canoe
  • blue-canoe's Avatar
  • Offline
  • Senior Member
  • Posts: 57
  • Thank you received: 16
  • Karma: 7
Hi Gez (and others),

I just made a few additions to your idea.First of all I created two additional settings in the component settings which allow you to decide whether to load the JS libraries at all (As sometimes there might be no need as they might be already present on the site), as in my case when using the Warp framework for templates or when you are tuning your site and want to load/compress etc all javascript files from one central location.

The other addition is I apply the same principle on the 'jquery.validationEngine.js' script as sometimes that might also be loaded by other components/modules.

Just an idea...

Misha
The administrator has disabled public write access.
The following user(s) said Thank You: JoomGuy

Re: [HOW TO] add Jquery UI to your component 17 May 2013 12:56 #7200

  • markspend01
  • markspend01's Avatar
  • Offline
  • User is blocked
  • Posts: 2
  • Karma: 0
Hey Guys well i think that jQuery UI includes a multitude of bug repairs and enhanced availability.Use that:

<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.1.custom.min.css" media="screen">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.1.custom.min.js"></script>


online marketing ny
Last Edit: 20 May 2013 16:31 by markspend01.
The administrator has disabled public write access.
Time to create page: 0.147 seconds

Get Started