jQueryUI - Slider TypeError: jQuery(...).slider is not a function

6,104 views
Skip to first unread message

Maik

unread,
Jan 27, 2014, 6:18:34 PM1/27/14
to joomla-de...@googlegroups.com
Hi,
i use Default Installation of Joomla 3.2 with bootstrap and jQuery in external Script. This works. Now i want to use jQuery UI Slider, but in browser console i get "
TypeError: jQuery(...).slider is not a function

slide: function( event, ui ) {
"
I searched the web for a solution but find any. Some say it must load in the body of the template, but i cant believe its true. I use the example from jQueryUI Website. Any idea to solve this?
thx

ModaCalcio.com - e-reall ebay

unread,
Jan 28, 2014, 3:52:49 AM1/28/14
to joomla-de...@googlegroups.com
You haven't correctly loaded the script ( in the same console you should find a 404 error about the script ) or the call to jQuery.slider is stacked after the script is effectively loaded

Other possibility is you have an error in javascript that interrupt execution before the js is loaded, but you should see other error stack



2014-01-28 Maik <m_pu...@gmx.de>

--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.
To post to this group, send an email to joomla-de...@googlegroups.com.
Visit this group at http://groups.google.com/group/joomla-dev-general.
For more options, visit https://groups.google.com/groups/opt_out.

Maik

unread,
Jan 28, 2014, 4:55:11 AM1/28/14
to joomla-de...@googlegroups.com
Hi gius_barb,

i cant find 404 in the console and i dont think so, because in this script are another working function. I added the script in the default.php "JHtml::script(Juri::base() . 'media/com_mfc/js/mfc_profile.js');" I tried to change the position to top in the script, but with no effort.

Maik

unread,
Jan 28, 2014, 4:56:53 AM1/28/14
to joomla-de...@googlegroups.com
For testing i only left the slider function in the script - without effort

Maik

unread,
Jan 28, 2014, 5:47:59 AM1/28/14
to joomla-de...@googlegroups.com
Hi,
next test with plain code. I copied the html part into the default.php and the Script part into my .js file on top. First as far as i understand i have to use jQuery instead of $, right? If i do so i get the error "TypeError: jQuery(...).slider is not a function

Florian R.
unread,
Jan 28, 2014, 6:04:16 AM1/28/14
to joomla-de...@googlegroups.com
Hi Maik, did you include jQuery UI? You can do so by using this snippet:

JHtml::_('jquery.ui', array('core', 'slider'));

This adds the jQuery UI core library and the slider plugin. Source: http://docs.joomla.org/J3.2:Javascript_Frameworks

Kind regards
Florian
Maik
unread,
Jan 28, 2014, 6:16:38 AM1/28/14
to joomla-de...@googlegroups.com
Hi Florian,

sorry i didnt mentioned it before, but i allready tried it and wrote it into the defaul.php direct after the line defined('_JEXEC') or die; ?! no effort it is still an input field. As i wrote at the beginning, i use the default installation from joomla with default theme. i think it is all enabled in it. 
Viper
unread,
Jan 28, 2014, 6:17:33 AM1/28/14
to joomla-de...@googlegroups.com
Florian you're wrong. Before posting please look at the sources.
Joomla doesn't contain any widgets from jqueryUI lib. Only core.
Maik
unread,
Jan 28, 2014, 6:30:38 AM1/28/14
to joomla-de...@googlegroups.com
Hi Viper,

your right, but the since the slider is no widget it should work or am i wrong? But why doesnt it work?
Florian R.
unread,
Jan 28, 2014, 6:34:55 AM1/28/14
to joomla-de...@googlegroups.com
Oh sorry, I used it yesterday with the sortable plugin and thought this is a plugin, too. Thanks!

How do you include jQuery UI? And did you make sure that jQuery core library only gets included once?
Viper
unread,
Jan 28, 2014, 6:46:25 AM1/28/14
to joomla-de...@googlegroups.com
Maik you need to include it via <script> in template or $document->addScript() if you want to add it in <head>.

I don't know why JCMS developers does not inlude a full version of library. It whoud make life easier for third party developers. But I think that in the feature cms releases it could be included.
Maik
unread,
Jan 28, 2014, 6:48:33 AM1/28/14
to joomla-de...@googlegroups.com
Hi,
ok since jquery and js is new for me i added an external script like i wrote above and simply wrote the functions like jquery("#id_of_form").change(function(){.....}); And as i wrote this works fine. I checked again view, controller and i have nothing added for jquery or ui. it cames as default over the default loaded template after installation. checked for a few seconds and its protostar.
Maik
unread,
Jan 28, 2014, 6:58:41 AM1/28/14
to joomla-de...@googlegroups.com
Hi Viper,
saw your answer now. Whould it be not to much overhead for the whole page? Or did you mean i must add the jQueryUI in the template? This sounds for a not good solution for me, or?
Florian R.
unread,
Jan 28, 2014, 7:01:13 AM1/28/14
to joomla-de...@googlegroups.com
You might correct me again but I think jQuery UI is not included in the Protostar template. You have to load jQuery UI it by yourself. jQuery core is loaded with Bootstrap in Protostar so you don't have to include jQuery core.

JHtml::_('jquery.ui');

and after that you should include your own script
Maik
unread,
Jan 28, 2014, 7:11:36 AM1/28/14
to joomla-de...@googlegroups.com
Ok tried that too, 1 in default and 1 time in view.html.php but without effort, or should it load into the template, like viper said?
Maik
unread,
Jan 28, 2014, 9:12:30 AM1/28/14
to joomla-de...@googlegroups.com
Ok tried to load "JHtml::_('jquery.ui', array('core', 'slider'));" into index.php of the template, doesnt work.
Florian R.
unread,
Jan 28, 2014, 9:33:46 AM1/28/14
to joomla-de...@googlegroups.com
Please use JHtml::_('jquery.ui'); because I was mistaken about it. I would insert this line into the default.php of your view as long as you don't need it on every page. 
Then I would check if both Javascript libraries that you need (jQuery core, jQuery UI) are loaded by viewing the source code in your browser.

Did you put your custom Javascript code in the jQuery(document).ready(function() { ........ }); ??

Maybe some source code from you can help identify your problem.
Maik
unread,
Jan 28, 2014, 9:53:07 AM1/28/14
to joomla-de...@googlegroups.com
I start the script with:
window.addEvent('domready', function () {   
jQuery( "#slider-range-min" ).slider({
range: "min",
value: 37,
min: 10,
max: 700,

slide: function( event, ui ) {
jQuery( "#amount" ).val( "$" + ui.value );
}
});
jQuery( "#amount" ).val( "$" + jQuery( "#slider-range-min" ).slider( "value" ) );
}
i also testet it instead of jQuery with $, with your jQuery(document).ready(function() {  blablabla, and now i dont know how to where to until i can read the solution.. this is confusing, as far as the other jquery commands works, aswell as bootstrap.
Florian R.
unread,
Jan 28, 2014, 9:59:50 AM1/28/14
to joomla-de...@googlegroups.com
jQuery(document).ready(function () {   
	jQuery( "#slider-range-min" ).slider({
		range: "min",
		value: 37,
		min: 10,
		max: 700,
		slide: function( event, ui ) {
			jQuery( "#amount" ).val( "$" + ui.value );
		}
	});
	jQuery( "#amount" ).val( "$" + jQuery( "#slider-range-min" ).slider( "value" ) );
});
Maik
unread,
Jan 28, 2014, 10:07:42 AM1/28/14
to joomla-de...@googlegroups.com
Allready tried that. Console said: 
TypeError: jQuery(...).slider is not a function
In view.html.php added one of them and both and none of them "JHtml::_('jquery.framework'); , JHtml::_('jquery.ui'); but didnt work" still not working
Florian R.
unread,
Jan 28, 2014, 10:15:00 AM1/28/14
to joomla-de...@googlegroups.com
But that is working code that I just tested... 

You should only use  JHtml::_('jquery.ui');

Can you copy the content of your <head> tags then? 
Maik
unread,
Jan 28, 2014, 10:26:06 AM1/28/14
to joomla-de...@googlegroups.com
Where do you put "JHtml::_('jquery.ui');" in ?
Florian R.
unread,
Jan 28, 2014, 10:41:39 AM1/28/14
to joomla-de...@googlegroups.com
Sorry I was wrong... again... Joomla jQuery UI doesn't contain any widgets like Viper already said. And slider is a widget. 

I am using a custom jQuery UI library where Slider widget is included on my test environment.
Maik
unread,
Jan 28, 2014, 10:45:03 AM1/28/14
to joomla-de...@googlegroups.com
My mistake too, the slider is a widget and not a default function ;(. Ok situation changed. Ho could i add this widget into my view? ;)
Viper
unread,
Jan 28, 2014, 11:09:16 AM1/28/14
to joomla-de...@googlegroups.com
Go to jqueryUI site and get a custom build. Or download complete archive at http://jqueryui.com/resources/download/jquery-ui-1.10.4.zip
When copy a file ui\minified\jquery.ui.slider.min.js from this archive into you web-folder(assets in example for component or into media/jui/js/).

It's very important!
If you use JFactory::getDocument()->addHeadLink(...) for includes you cannot get it to work because you jqueryui widget placed before a JCMS jquery and jqueryUI.

So you need to use <script src="path_to_slider.js" type="text/javascript"></script> and insert it into you component template.

There is nothing wrong with the script in the midst of the document. And at the moment this is only one way how can you add your own script which requires jquery(or jqueryUI) or something else from dependencies. I know someone can say that I'm wrong and we could use tons of plugins for this...
Maik
unread,
Jan 28, 2014, 3:14:43 PM1/28/14
to joomla-de...@googlegroups.com
TypeError: jQuery(...).slider is not a function
Viper
unread,
Jan 29, 2014, 3:27:56 AM1/29/14
to joomla-de...@googlegroups.com
COMPONENT template(not a site template).
Maik
unread,
Jan 29, 2014, 4:06:41 AM1/29/14
to joomla-de...@googlegroups.com
Hi Viper,

sorry what do you mean with Component template? The com_name.php in the root of the component or the index.php? Sorry but i dont know what you mean with that. But i tested it in com_component.php in view.html.php and in default.php:
I added after access control jexec->JHtml::script(Juri::base() . 'media/com_mfc/js/jquery.ui.slider.min.js');
The script is still:
jQuery(document).ready(function() {
    jQuery(function() {

    jQuery( "#slider-range-min" ).slider({
        range: "min",
        value: 37,
        min: 10,
        max: 700,
        slide: function( event, ui ) {
            jQuery( "#amount" ).val( "$" + ui.value );
        }
    });
    jQuery( "#amount" ).val( "$" + jQuery( "#slider-range-min" ).slider( "value" ) );
});
....
});
And added in default.php:

JHtml::script(Juri::base() . 'media/com_mfc/js/mfc_profile.js');

Error in console: 
ReferenceError: jQuery is not defined
Viper
unread,
Jan 29, 2014, 4:23:50 AM1/29/14
to joomla-de...@googlegroups.com
Did you know that is MVC?

Under "component template" I mean a file in example at 'components/com_mycomponent/views/myview/tmpl/default_mytemplate.php'
Maik
unread,
Jan 29, 2014, 4:30:07 AM1/29/14
to joomla-de...@googlegroups.com
Yes i know that it is MVC ;). And yes that is the default.php i mentioned earlier and often too ;). Ok learnd something and we talk about the coponent template file. <- doesnt work see above.
Viper
unread,
Jan 29, 2014, 6:01:05 AM1/29/14
to joomla-de...@googlegroups.com
Provide a full code of you template or html.
Maik
unread,
Jan 29, 2014, 6:54:37 AM1/29/14
to joomla-de...@googlegroups.com
Hi Viper,
thats are lot of lines. I just installed default Joomla3.2 and use Prototype template. I use the example from jQuery UI for Slider and just added the script and as we said the jquery.ui.slider.min.js. The Rest is default:


<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="Testseite" name="description">
<meta content="Joomla! - Open Source Content Management" name="generator">
<title>MFC</title>
<link type="image/vnd.microsoft.icon" rel="shortcut icon" href="/test/templates/protostar/favicon.ico">
<link type="text/css" href="http://localhost:8080/test/media/com_mfc/system/css/profile.css" rel="stylesheet">
<link media="all" title="Grün" type="text/css" href="/test/media/system/css/calendar-jos.css" rel="stylesheet">
<link type="text/css" href="/test/templates/protostar/css/template.css" rel="stylesheet">
<script type="text/javascript" src="/test/media/jui/js/jquery.min.js">
<script type="text/javascript" src="/test/media/jui/js/jquery-noconflict.js">
<script type="text/javascript" src="/test/media/jui/js/jquery.ui.core.min.js">
<script type="text/javascript" src="/test/media/system/js/mootools-core.js">
<script type="text/javascript" src="/test/media/system/js/core.js">
<script type="text/javascript" src="/test/media/system/js/mootools-more.js">
<script type="text/javascript" src="/test/media/system/js/validate.js">
<script type="text/javascript" src="http://localhost:8080/test/media/com_mfc/js/mfc_profile.js">
<script type="text/javascript" src="/test/media/jui/js/bootstrap.min.js">
<script type="text/javascript" src="/test/media/system/js/calendar.js">
<script type="text/javascript" src="/test/media/system/js/calendar-setup.js">
<script type="text/javascript" src="/test/templates/protostar/js/template.js">
<script type="text/javascript">
<script type="text/javascript">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
<style type="text/css">
<!--[if lt IE 9]>
		<script src="/test/media/jui/js/html5.js"></script>
	<![endif]-->
<script id="iab55_h" async="" type="text/javascript" src="http://cdncache1-a.akamaihd.net/srr/IAB55/">
</head>

the script:
Query(document).ready(function() {    
    jQuery(function() {
    jQuery( "#slider-range-min" ).slider({
        range: "min",
        value: 37,
        min: 10,
        max: 700,
        slide: function( event, ui ) {
            jQuery( "#amount" ).val( "$" + ui.value );
        }
    });
    jQuery( "#amount" ).val( "$" + jQuery( "#slider-range-min" ).slider( "value" ) );
});});

Template with path to widget and script
<?php
// No direct access to this file

defined('_JEXEC') or die;
JHtml::_('jquery.ui');
JHtml::_('behavior.keepalive');
JHtml::_('behavior.formvalidation');
JHtml::_('behavior.tooltip');

JHtml::script(Juri::base() . 'media/com_mfc/js/jquery.ui.slider.min.js');
JHtml::script(Juri::base() . 'media/com_mfc/js/mfc_profile.js');
JHtml::stylesheet(Juri::base(). 'media/com_mfc/system/css/profile.css');
?>

By now i tested the widget from 1.8.3 instead yours from 1.8.4 ;(
Reply all
Reply to author
Forward
0 new messages