JQWidgets in Joomla article

[kbloemParticipant]

Hello,

i am trying to implement jqwidgets inside a joomla article. So i followed this guide.

When i load the page, nothing is show except the text “change the date”. I see the errors below in the debugger.

Use of getAttributeNode() is not supported. Use getAttribute(). mootools-core.js:108:0
TypeError: $(...).jqxCalendar is not a function

My display function of view.html.php looks like this…

public function display($tpl = null)
	{
		$app        = JFactory::getApplication();
		$user       = JFactory::getUser();
		$dispatcher = JEventDispatcher::getInstance();

		$this->item  = $this->get('Item');
		$this->print = $app->input->getBool('print');
		$this->state = $this->get('State');
		$this->user  = $user;

		// Check for errors.
		if (count($errors = $this->get('Errors')))
		{
			JError::raiseWarning(500, implode("\n", $errors));

			return false;
		}

		// Create a shortcut for $item.
		$item            = $this->item;
		$item->tagLayout = new JLayoutFile('joomla.content.tags');

		// Add router helpers.
		$item->slug        = $item->alias ? ($item->id . ':' . $item->alias) : $item->id;
		$item->catslug     = $item->category_alias ? ($item->catid . ':' . $item->category_alias) : $item->catid;
		$item->parent_slug = $item->parent_alias ? ($item->parent_id . ':' . $item->parent_alias) : $item->parent_id;

		// No link for ROOT category
		if ($item->parent_alias == 'root')
		{
			$item->parent_slug = null;
		}

		// TODO: Change based on shownoauth
		$item->readmore_link = JRoute::_(ContentHelperRoute::getArticleRoute($item->slug, $item->catid, $item->language));

		// Merge article params. If this is single-article view, menu params override article params
		// Otherwise, article params override menu item params
		$this->params = $this->state->get('params');
		$active       = $app->getMenu()->getActive();
		$temp         = clone $this->params;

		// Check to see which parameters should take priority
		if ($active)
		{
			$currentLink = $active->link;

			// If the current view is the active item and an article view for this article, then the menu item params take priority
			if (strpos($currentLink, 'view=article') && (strpos($currentLink, '&id=' . (string) $item->id)))
			{
				// Load layout from active query (in case it is an alternative menu item)
				if (isset($active->query['layout']))
				{
					$this->setLayout($active->query['layout']);
				}
				// Check for alternative layout of article
				elseif ($layout = $item->params->get('article_layout'))
				{
					$this->setLayout($layout);
				}

				// $item->params are the article params, $temp are the menu item params
				// Merge so that the menu item params take priority
				$item->params->merge($temp);
			}
			else
			{
				// Current view is not a single article, so the article params take priority here
				// Merge the menu item params with the article params so that the article params take priority
				$temp->merge($item->params);
				$item->params = $temp;

				// Check for alternative layouts (since we are not in a single-article menu item)
				// Single-article menu item layout takes priority over alt layout for an article
				if ($layout = $item->params->get('article_layout'))
				{
					$this->setLayout($layout);
				}
			}
		}
		else
		{
			// Merge so that article params take priority
			$temp->merge($item->params);
			$item->params = $temp;

			// Check for alternative layouts (since we are not in a single-article menu item)
			// Single-article menu item layout takes priority over alt layout for an article
			if ($layout = $item->params->get('article_layout'))
			{
				$this->setLayout($layout);
			}
		}

		$offset = $this->state->get('list.offset');

		// Check the view access to the article (the model has already computed the values).
		if ($item->params->get('access-view') == false && ($item->params->get('show_noauth', '0') == '0'))
		{
			JError::raiseWarning(403, JText::_('JERROR_ALERTNOAUTHOR'));

			return;
		}

		if ($item->params->get('show_intro', '1') == '1')
		{
			$item->text = $item->introtext . ' ' . $item->fulltext;
		}
		elseif ($item->fulltext)
		{
			$item->text = $item->fulltext;
		}
		else
		{
			$item->text = $item->introtext;
		}

		$item->tags = new JHelperTags;
		$item->tags->getItemTags('com_content.article', $this->item->id);

		// Process the content plugins.

		JPluginHelper::importPlugin('content');
		$dispatcher->trigger('onContentPrepare', array ('com_content.article', &$item, &$item->params, $offset));

		$item->event = new stdClass;
		$results = $dispatcher->trigger('onContentAfterTitle', array('com_content.article', &$item, &$item->params, $offset));
		$item->event->afterDisplayTitle = trim(implode("\n", $results));

		$results = $dispatcher->trigger('onContentBeforeDisplay', array('com_content.article', &$item, &$item->params, $offset));
		$item->event->beforeDisplayContent = trim(implode("\n", $results));

		$results = $dispatcher->trigger('onContentAfterDisplay', array('com_content.article', &$item, &$item->params, $offset));
		$item->event->afterDisplayContent = trim(implode("\n", $results));

		// Increment the hit counter of the article.
		if (!$this->params->get('intro_only') && $offset == 0)
		{
			$model = $this->getModel();
			$model->hit();
		}

		$document = JFactory::getDocument();
		// adds jQWidgets JavaScript files
		$document->addScript('http://localhost/media/system/js/jqxcore.js');
		$document->addScript('http://localhost/media/system/js/jqxdatetimeinput.js');
		$document->addScript('http://localhost/media/system/js/jqxcalendar.js');
		$document->addScript('http://localhost/media/system/js/jqxtooltip.js');
		$document->addScript('http://localhost/media/system/js/jqxbuttons.js');
		$document->addScript('http://localhost/media/system/js/globalize.js');
		// adds jQWidgets CSS files
		$document->addStyleSheet('http://localhost/media/system/css/jqx.base.css');
		$document->addStyleSheet('http://localhost/media/system/css/jqx.bootstrap.css');
		
		// Escape strings for HTML output
		$this->pageclass_sfx = htmlspecialchars($this->item->params->get('pageclass_sfx'));

		$this->_prepareDocument();

		parent::display($tpl);
	}

[NadezhdaParticipant]

Hello kbloem,

Please, provide us with a sample including your calendar’s initialization code so we can determine the source of the issue.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

[kbloemParticipant]

Hello, not sure if this is what you want…

<p>
<script type="text/javascript">
jQuery(document).ready(function ($) {        
$("#widgetsContainer").html('<div id="jqxCalendar"></div><br /><div id="jqxButton">Change the date</div>');        
$("#jqxCalendar").jqxCalendar({ theme: "orange", width: 220, height: 220 });        
$("#jqxButton").jqxButton({ theme: "bootstrap", width: 150 });        
$("#jqxButton").click(function () {            
$('#jqxCalendar ').jqxCalendar('setDate', new Date(2013, 11, 31));        
});    });
</script>
<div id="widgetsContainer"> </div>

I put this inside the source editor of joomla’s article editor.

Some extra system info

Setting Value

PHP Built On Windows NT OPERATOR 6.3 build 9200 (Windows 8.1 Enterprise Edition) i586
Database Version 5.6.21
Database Collation latin1_swedish_ci
PHP Version 5.6.3
Web Server Apache/2.4.10 (Win32) OpenSSL/1.0.1i PHP/5.6.3
WebServer to PHP Interface apache2handler
Joomla! Version Joomla! 3.4.1 Stable [ Ember ] 21-March-2015 20:30 GMT
Joomla! Platform Version Joomla Platform 13.1.0 Stable [ Curiosity ] 24-Apr-2013 00:00 GMT
User Agent Mozilla/5.0 (Windows NT 6.3; WOW64; rv:37.0) Gecko/20100101 Firefox/37.0

[DimitarParticipant]

Hello kbloem,

It seems there is a conflict between jQuery and MooTools in this case and the issue is not actually related to jQWidgets. Using jQuery.noConflict() should fix this. For more information, please refer to the following page: http://zenverse.net/jquery-how-to-fix-the-is-not-a-function-error-using-noconflict/.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[kbloemParticipant]

Thank you dimitar, i will try this en get back to you.

[kbloemParticipant]

Hello,

i keep getting the error even with the .noConflict….

<script language="javascript" type="text/javascript">
var $jq = jQuery.noConflict();
$jq(document).ready(function ($) {
$jq("#widgetsContainer").html('<div id="jqxCalendar"></div><br /><div id="jqxButton">Change the date</div>');
$jq("#jqxCalendar").jqxCalendar({ theme: "orange", width: 220, height: 220 });
$jq("#jqxButton").jqxButton({ theme: "bootstrap", width: 150 });
$jq("#jqxButton").click(function () {
$jq('#jqxCalendar ').jqxCalendar('setDate', new Date(2013, 11, 31));}); 
});
</script>
<div id="widgetsContainer"> </div> 

[DimitarParticipant]

Hi kbloem,

Does this issue occur without using MooTools (as is the case with our tutorial example)?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[kbloemParticipant]

Yes, Mootools is disabled. I got a plugin wich disabled mootools completely.

[DimitarParticipant]

Hi kbloem,

You have disabled MooTools and yet the same error – Use of getAttributeNode() is not supported. Use getAttribute(). mootools-core.js:108:0 – occurs? We would like to know if the error is thrown when following our tutorial exactly and no third-party libraries are included.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[kbloemParticipant]

Use of getAttributeNode() is not supported. Use getAttribute(). mootools-core.js:108:0

This does not occur anymore. Only TypeError: $jq(...).jqxCalendar is not a function

[DimitarParticipant]

Hi kbloem,

Are you sure that jQuery is even included in your source files? And did you follow the steps of our tutorial exactly as described? We need this information to determine what causes the issue and if it is related to jQWidgets at all.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts