I setup a website running on Joomla 3.1 and I am using a masonry script that works perfectly:
// Masonry for boxes
function adjustments() {
$('#position-2').masonry({
singleMode: false,
columnWidth: 272,
resizeable: true,
itemSelector: '.newsflash-item',
isAnimated: true
});
}
I am first loading the JS file jquery.masonry.min.js found on masonry.desandro.com as well as the latest jquery.min.js file from the JQuery repository.
This has been working perfectly until I installed the latest update to Joomla, upgrading it from 3.1 to 3.2. Now, the masonry function will not work regardless of how I try to call it or position the JS files. I only get this error:
Uncaught TypeError: Cannot call method 'masonry' of null
At this point, like the tree said to the lumberjack, I'm stumped. Anyone else having this issue and/or have any ideas how to fix it?
The Joomla 3.2 release updated some jQuery elements, removed more MooTools dependencies and saw the introduction of com_ajax so you probably experiencing a conflict.
More specifically, you are probably experiencing a JQuery conflict and need to use noconflict() you can read how to adapt your script to use jQuery in noconflict() mode here
Something as simple as this may work:
// Masonry for boxes
function adjustments() {
var $j = jQuery.noConflict();
$j('#position-2').masonry({
singleMode: false,
columnWidth: 272,
resizeable: true,
itemSelector: '.newsflash-item',
isAnimated: true
});
}
Similar to cppl's answer with specifing you want to basically ensure you're using JQuery for your script, you can do this:
function adjustments() {
JQuery('#position-2').masonry({
singleMode: false,
columnWidth: 272,
resizeable: true,
itemSelector: '.newsflash-item',
isAnimated: true
});
}
This ensures the JS selection is done with jQuery and not with Mootools or any other JS.
Related
When trying to use ckeditor for the first time. ckeditor works, but when I try to add imageupload and uploadloadwidget plugins then I get the error:
Uncaught TypeError: Cannot read property 'icons' of null
Does anyone have any ideas as to what might be causing it?
<script src="//cdn.ckeditor.com/4.5.6/basic/ckeditor.js"></script>
<script>
$(document).ready(function () {
CKEDITOR.plugins.addExternal('imageupload', '/ckeditor/plugins/imageupload/');
CKEDITOR.plugins.addExternal('uploadwidget', '/ckeditor/plugins/uploadwidget/');
CKEDITOR.replace('htmleditor', {
htmlEncodeOutput: true,
extraPlugins: 'imageupload,uploadwidget'
});
});
</script>
Kindly take a look at this http://ckeditor.com/addon/uploadimage and this http://sdk.ckeditor.com/samples/fileupload.html#uploading-dropped-and-pasted-images
for reference.
You'll have to setup the upload url and enable the uploadimage plugin in the configs like this:
config.extraPlugins = 'uploadimage';
config.imageUploadUrl = '/uploader/upload.php?type=Images';
editor.on( 'fileUploadRequest', function( evt ) {
var fileLoader = evt.data.fileLoader,
formData = new FormData(),
xhr = fileLoader.xhr;
xhr.open( 'PUT', fileLoader.uploadUrl, true );
formData.append( 'upload', fileLoader.file, fileLoader.fileName );
fileLoader.xhr.send( formData );
// Prevented the default behavior.
evt.stop();
}, null, null, 4 ); // Listener with a priority 4 will be executed before priority 5.
The docs has more info on this and how to handle different scenarios
Too late for the original poster, but I had this same problem and it turned out that I hadn't included the UploadWidget pluging that UploadImage was dependent on.
Make sure your path has pointed to a valid icon file, is it .ico? or .png? if not set your path to the valid image/icon file. This should solve the problem.
The solution for me was based on #Daniel's response. I started looking for a reference to a plugin that was trying to load but was not installed.
I was not doing any image uploading but I was trying to add a plugin that I had not installed. Specifically, it was:
extraPlugins: 'tableresize',
I did not need tableresize so I just removed the tableresize from the extraPlugins line. I reloaded the page and the error was gone.
Change your PHP Version from 7.4 to 7.3 or bellow
im trying to develop a plugin that render a datagrid to html element. For example in:
<div id="datagrid">
<!-- Renderizado via Backbone.js -->
</div>
I have this plugin definition:
// csDatagrid.js
(function($) {
$.fn.csDatagrid = function(options) {
// Code ...
};
}, (jQuery));
And i call the function in this way:
// csAuditarSesiones.js
$("#datagrid").csDatagrid({
columns: cols,
url: $("#sfAction").val(),
filterBy: 'user_str'
});
Chrome says:
Uncaught TypeError: Object [object Object] has no method 'csDatagrid'
Load library queue (Chrome Developer Tools):
JQuery
csDatagrid (my plugin)
csAuditarSesiones (script with code for the current page, have the plugin call)
Thanks !
EDIT 1
Apparently the plugin not load, follow code always print "Not Loaded !":
if(jQuery().csDatagrid) {
console.log("Loaded !");
}else{
console.log("Not Loaded !");
}
The reason here is you are defining your plugin in the document ready event. Therefore the elements calling this plugin must call the plugin after the plugin has been loaded.
Try defining your new plugin outside of a load\ready event such as.
(function($) {
$.fn.csDatagrid = function(options) {
// Code ...
};
}, (jQuery));
$(document).ready(function(){
$("#datagrid").csDatagrid({
columns: cols,
url: $("#sfAction").val(),
filterBy: 'user_str'
});
});
Just for refrence (surely reading it now). http://learn.jquery.com/plugins/basic-plugin-creation/
EDIT:
Is it possible you have multiple jQuery versions being loaded? This can happen when there are conflicts. Also ensure that your plugin is loaded after the javascript file and before the document ready function.
There is one other (i have no idea why I believe it is when multiple versions are loaded) phenomenom that happens and you have to add the $ call back to your ready function. Such as.
$(document).ready(function($){
//TODO: Code here
});
There is error in your immediate invoked function's last line.
}, (jQuery)); should be :
})(jQuery);
My website is generating some content dynamically, so I have to somehow launch the highlight.js plugin again after loading it.
This code is used to launch the highlighter:
hljs.initHighlightingOnLoad();
I tried to do something like hljs.initHighlighting(); to do this again but it does not work.
You must set called to false first:
hljs.initHighlighting.called = false;
hljs.initHighlighting();
You can reinitialize all of the codeblocks like this.
$(document).ready(function() {
$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
});
or if you have a div with an ID of myBlock, you can do this.
$(document).ready(function() {
$('#myBlock').each(function(i, e) {hljs.highlightBlock(e)});
});
i hope this could solve your problem..
you have to use
hljs.highlightAll()
since, hljs.initHighlightingOnLoad() is deprecated since version 10.6.
if you're using react, you could apply at componentdidMount..
useEffect(() => {
hljs.highlightAll()
}, []);
or, if another framework, please call that function when page loaded.
more: https://highlightjs.readthedocs.io/en/latest/api.html
I have no idea why this doesn't work, but none of my custom button actions (tasks) do anything in my component. In my view.html.php file I have:
JToolBarHelper::custom('reports.export_csv', 'csv', '', 'CSV', false);
JToolBarHelper::custom('reports.export_mailchimp', 'mailchimp', '', 'Mailchimp', false);
Then in my ReportsControllerReports file I have 2 methods (not just 2, there are some others but they aren't relevant), export_csv() and export_mailchimp(). Whenever I click the buttons I get a JS error which I assume is preventing the action from executing the code in those methods. Something about "b is undefined". I cannot find any differences between my code and that used in other Joomla (core) components, so if anyone could shed some light on this issue it would be greatly appreciated (as usual, the Joomla forums are totally useless).
#Cfyzz solution works.
I added this to view file:
<script type="text/javascript">
Joomla.submitbutton = function(pressbutton) {
switch(pressbutton) {
case 'google':
window.location = '<?=JRoute::_( 'http://google.com', false );?>';
break;
case 'stackoverflow':
window.location = '<?=JRoute::_( 'http://stackoverflow.com', false );?>';
break;
}
}
</script>
and this in view.html.php
JToolBarHelper::cancel('stackoverflow', 'Go Overflow');
JToolBarHelper::custom('google', 'checkin', '', 'Go Google', false);
Obviously you dont have to use "JRoute::_(" in this situation. I replaced inner links with 2 samples so it`s easier to understand.
You should override the Joomla's JS framework behavour
You should use the function in your custom JS file:
Joomla.submitbutton = function(pressbutton) {
switch(pressbutton) {
case 'export_cvs':
URL = JURI::base.'index.php?option=yourController&task=export_cvs&....
$.ajax({
url: URL,
type: post, etc
});
}
}
In my component everytrhing is ok and working properly
I have been trying for two days to get ColorBox to return post results back to the same open box but it just will not do it.
I am using Jquery Form Plugin to Post from a ColorBox. It seems to work in IE 8, but not Safari or FireFox.
In IE 8 it returns the result from the post page "action" and returns the result in the same ColorBox but in FF and Safari it closes the box and sits on the load page (i.e. process1.php)?
I have a page say "process1.php" which loads the ColorBox onLoad (it does this no problem)
Load Page ColorBox Code For process1.php:
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j.fn.colorbox({
href:"process2.php",
escKey: false,
overlayClose: false,
width: "60%",
height: 350,
title: "Process Secure Order",
open:true
});
});
Upon Page Load it will load the "process2.php" displaying a form for the user to submit data.
This is my JQuery Form Plugin Code:
var $j = jQuery.noConflict();
$j(document).ready(function() {
var options = {
beforeSubmit: showSpinner,
success: showResponse,
//resetForm: true,
timeout: 3000,
target: '#output1'
};
function showSpinner() {
$j('#sterms, #accept, #decline, #side-cart').hide();
$j('#working').show().html('Please Wait');
return true;
};
function showResponse(){
$j('#working').hide();
$j('#result').show();
return true;
};
// bind form using 'ajaxForm'
$j('#secure_process01').ajaxForm(options);
});
It posts fine and then just tries to reload the same page with out the ColorBox opening on Load.
It has me stumped why it works in IE and nothing else, any help would be appreciated.
Using JQuery 1.5.2 (JQuery Form Plug In is not working with anything higher has permission issues)
Reference For JQuery Form Plugin http://jquery.malsup.com/form/#ajaxForm
This issue has been solved.
It turned out that the Jquery Form Plugin did not like the 1.6.1 JQuery version so I did the code using Jquery Post and it worked in all browsers.
ColorBox plugin big rap, great and easy.