I'm using Joomla 2.5.19 and I have removed Mootools since it is generating a conflict with JQuery. I've also disabled caption.js.
Now, on every page, the following script is being added in the head section:
<script type="text/javascript">
window.addEvent('domready', function() {
$$('.hasTip').each(function(el) {
var title = el.get('title');
if (title) {
var parts = title.split('::', 2);
el.store('tip:title', parts[0]);
el.store('tip:text', parts[1]);
}
});
var JTooltips = new Tips($$('.hasTip'), { maxTitleChars: 50, fixed: false});
});
</script>
This is throwing the error:
Uncaught TypeError: Object [object global] has no method 'addEvent'
How do I get rid of this?
I followed the instructions here and deleted:
JHtml::_('behavior.caption');
From components/com_content/controller.php
But no luck. I also tried including unset($this->_scripts['/media/system/js/caption.js']);
How do I get rid of this?
You should not remove Mootools, for conflictions, you can use jQuery Easy plugin. Visit http://extensions.joomla.org/extensions/core-enhancements/performance/jquery-scripts/18327
I've managed to remove the script with:
<?php
// Custom script
$document =& JFactory::getDocument();
// Remove call to JTooltips
$document->_script = preg_replace('window\.addEvent\(\'domready\',\s*function\(\)\s*{\s*\$\$\(\'.hasTip\'\).each\(function\(el\)\s*{\s*var\s*title\s*=\s*el.get\(\'title\'\);\s*if\s*\(title\)\s*{\s*var\s*parts\s*=\s*title.split\(\'::\',\s*2\);\s*el.store\(\'tip:title\',\s*parts\[0\]\);\s*el.store\(\'tip:text\',\s*parts\[1\]\);\s*}\s*}\);\s*var\s*JTooltips\s*=\s*new\s*Tips\(\$\$\(\'.hasTip\'\),\s*{\s*maxTitleChars:\s*50,\s*fixed:\s*false}\);\s*}\);', '', $document->_script);
?>
Thanks to this post.
If you are developing your own extension there is really no need to remove Mootools or use a third party extension to load jQuery. Mootools is used heavily in Joomla, especially version 2.5.x; so removing it could have adverse affects on expected behavior when using core functions. If you need to use jQuery simply wrap any jQuery code around an IIFE like so:
function($) {
// jQuery code goes here
})(jQuery);
Related
The problem is this:
I have a simple, two fields form which I submit with Ajax.
Upon completion I reload two div's to reflect the changes.
Everything is working perfect except a jQuery plugin. It's a simple plugin that can be called with simple
function(){
$('.myDiv').scrollbars();
}
It's simple and easy to use, but it doesn't work on Ajax loaded content. Here is the code I use to post form and reload div's:
$(function() {
$('#fotocoment').on('submit', function(e) {
$.post('submitfotocoment.php', $(this).serialize(), function (data) {
$(".coment").load("fotocomajax.php");
}).error(function() {
});
e.preventDefault();
});
});
I've tried creating a function and calling it in Ajax succes:, but no luck. Can anyone show me how to make it work ? How can that simple plugin can be reloaded or reinitialized or, maybe, refreshed. I've studied a lot of jQuery's functions, including ajaxStop, ajaxComplete ... nothing seems to be working or I'm doing something wrong here.
If you're loading elements dynamically after DOM Document is already loaded (like through AJAX in your case) simple binding .scrollbars() to element won't work, even in $(document).ready() - you need to use "live" event(s) - that way jQuery will "catch" dynamically added content:
$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
Source: jQuery Site
Even if I am totally against using such plugins, which tries to replicate your browser's components, I'll try to give some hints.
I suppose you are using this scrollbars plugin. In this case you may want to reinitialize the scrollbars element, and there are many ways to do this. You could create the element again like in the following example
<div class="holder">
<div class="scrollme">
<img src="http://placekitten.com/g/400/300" />
</div>
</div>
.....
$('.scrollme').scrollbars();
...
fakedata = "<div class='scrollme'>Fake response from your server<br /><img src='http://placekitten.com/g/500/300' /></div>";
$.post('/echo/html/', function(response){
$('.holder').html(fakedata);
$('.scrollme').scrollbars();
});
If you want to update the contents of an already initialized widget instead, then things gets more complicated. Once your plugin initialize, it moves the content in some custom wrappers in order to do its 'magic', so make sure you update the correct element, then trigger the resize event on window, pray and hopefully your widget gets re-evaluated.
If it doesn't help, then try to come up with some more details about your HTML structure.
I want to thank everyone of you who took their time to answer me with this problem I have. However, the answer came to me after 4 days of struggle and "inventions" :), and it's not a JS or Jquery solution, but a simple logic in the file.
Originally, I call my functions and plugins at the beginning of the document in "head" tag, like any other programmer out here (there are exceptions also ).
Then my visitors open my blog read it and they want to post comments. But there are a lot of comments, and I don't want to scroll the entire page, or use the default scroll bars, simply because they're ugly and we don't have cross browser support to style that, just yet.
So I .post() the form with the comment, and simply reload the containing all of them. Naturally .scrollbars() plugin doesn't work. Here come the solution.
If I put this :
<script>$('.showcoment').scrollbars();</script>
in the beginning of my loaded document (with load() ), will not work, because is not HTML and it's getting removed automatically. BUT !!! If i do this:
<div><script>$('.showcoment').scrollbars();</script></div>
at the same beginning of loaded document, MAGIC .... it works. The logic that got me there I found it in the basics of javascript. If your script is inside an HTML element, it will be parsed without any problem.
Thank you all again, and I hope my experience will help others.
If I understand you correctly, try this:
var scrollelement = $('.myDiv').scrollbars();
var api = scrollelement.data('jsp');
$(function () {
$('#fotocoment').on('submit', function (e) {
$.post('submitfotocoment.php', $(this).serialize(), function (data) {
$(".coment").load("fotocomajax.php");
api.reinitialise();
}).error(function () {
});
e.preventDefault();
});
});
reinitialise - standart api function, updates scrolbars.
I've been having some trouble adding Jquery Impromptu boxes into a project of mine. The code works fine outside of the project, but when placed inside malfunctions.
<script type="text/javascript">
function openprompt(){
var txt = 'Text here';
function mycallbackform(v,m,f){
if(v != undefined)
$.prompt(v +' ' + f.alertName);
}
$.prompt(txt,{
callback: mycallbackform,
buttons: { Add: 'add', Cancel: 'cancel' }
});
}
</script>
When executed this function will do nothing. If I remove the $.prompt then it will work.
I'm also getting this console message when I execute the function...
Uncaught TypeError: Object function ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
} has no method 'prompt'
The code is placed in a PHP file which I think might be causing the problem, but I have tested the code in another PHP file, so its not the PHP alone.
I am planning to use the prompt to display a combo-box which is why I can't use a standard alert.
I'm quite new to these things, am i doing anything obviously wrong?
Thanks
Have you extended the jQuery methods when you used this code out side this project? If yes you should include that extension of jquery in this project.
$.prompt this means, in your jquery library there is a method name prompt.
If NO, your jQuery library of project is not same with Out side the project where you have tested this code. There must be a method (function) name prompt and you have to include that in your project.
Sorry if title is not too clear but I think it's about right. NEhow, what I would like to do is a bit like (well is to a certain extent) building a widget with JQuery (pref), PHP & CSS.
What I would really like to happen is for a "member" of my site to simply paste 2 lines of code in their HTML to load the widget. Something like this:
<script type="text/javascript" src="http://www.mydomain.com/script.js"></script>
Then to display the widget something like this <div id="displaywidget"></div>
OK that bit is "easy" and ok. But how do I include JQuery or "something" to generate the widget in script.js
What I mean is "displaywidget" - the ID of the widget div will be the name of a php file on my server so essentially script.js will need to load displaywidget.php into the div displaywidget.
I think I use document.getElementById('displaywidget') to get the div but how do I then "write/insert/load" displaywidget.php inside the div?
Thinking as I write "pure" java can do "most of what I want i.e. document.getElementById('displaywidget'), BUT I would prefer to also "include" Jquery.js as I would like some aspects of the widget to use JQuery. Example being the JQuery UI date function.
Sorry if I am rambling a bit but trying to think as I go along. My "real" problem is I am not too sure on "pure" javascript i.e. getting the div to display/load displaywidget.php
Suggestions please. (Oh if I am barking up the wrong tree please feel free to tell me - nicely:) )
Thanks in advance
I think I use document.getElementById('displaywidget') to get the div but how do I then "write/insert/load" displaywidget.php inside the div?
You're looking for the AJAX behaviors inside of jQuery which would make the call to the php page and then push the data into the div.
You should be loading jQuery early on in the process, right up front in your head element. Once its loaded it will be cached so no worries of its on every page. No real overhead incurred.
Once jQuery is installed you can call one of many AJAX functions related to obtaining data and popluation elements. Theres $.load(), $.ajax(), and a few others that escape me unless I go and check out their docs section.
You can do all of this without jQuery, but its more code and you have to control for browser differences.
You can load jquery into script.js, just copy and paste it after or before whatever javascript lives in script.js.
So if script.js is:
//start of file
alert('ex');
//end of file
Make it:
//start of file
alert('ex')
Copy and pasted Jquery source
//end of file
After a bit more "trawling & thought" I found this code:
(function() {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
script_tag.onload = scriptLoadHandler;
script_tag.onreadystatechange = function () { // Same thing but for IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
// Call our main function
main();
}
/******** Our main function ********/
function main() {
jQuery(document).ready(function($) {
******* Load CSS *******/
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "style.css"
});
css_link.appendTo('head');
/******* Load HTML *******/
var jsonp_url = "http://al.smeuh.org/cgi-bin/webwidget_tutorial.py?callback=?";
$.getJSON(jsonp_url, function(data) {
$('#example-widget-container').html("This data comes from another server: " + data.html);
});
});
}
})(); // We call our anonymous function immediately
writtend by Alex Marandon and found here http://alexmarandon.com/articles/web_widget_jquery/ - works a treat, exactly what I wanted, including/installing JQuery into a .js file
I'm trying to create a module in joomla, which uses one jquery plugin. I've to do an ajax operation while clicking on an element in the module. Currently I'm specifying the whole path to the php file. But I know Its a wrong method.
The code in jquery plugin is like this.(please note the second line where the path is specified in the jquery plugin file)
$.get(
"/subdirectory/MyBlog/modules/mod_calendar/getCalendar.php", {
month: $("#selectedMonth").val(),
year: $("#selectedYear").val(),
flag: '-1'
}, function(data){
$("#monthlyCalendar").html(data);
$("#monthlyCalendar").show();
}
);
What is the correct method to specify the path in a jquery plugin file.
Also I need to know where to put my jquery plugin file in the module.
I found an answer in the following blog.
http://blog.subooa.com/development/joomla-coding/ajax-in-joomla-with-jquery/
The best way I found to do it is to use the JURI::root method to create a javascript variable that I can then use. In your php code, you would do something like this:
?>
<script type="text/javascript">
var joomlaRoot = '<?php echo JURI::root(); ?>';
</script>
<?php
You can then use that variable when you are doing your AJAX call.
As for where to put the jquery plugin file in your module, you can put it whereever you want under your module's directory and then use JURI::root again to create a path to it and call the JDocument::addScript method.
On a side note, you may consider using MooTools. It comes bundled in Joomla! already. It has the ability to do AJAX calls. Also, by using it, you avoid the possibility of having jQuery conflicts.
Atlast I was able to find a good solution to use the Ajax using Jquery in Joomla.
For this first you need to create a view and model to get required html through AJAX call.
Then use jQuery code similar to the following to get only the output of the required view.
//Code to get the base URL of joomla installation
szURL = document.URL;
componentList = szURL.split('/');
szDocument = componentList[componentList.length-1];
szURL = szURL.replace(szDocument, "");
//URL to the required component
url = szURL + "?option=COMPONENT_NAME&view=VIEW_NAME&tmpl=component&uid=" + getRandomValue();
jQuery.get(url, function(data) {
jQuery("#mydiv").html(data);
});
//Function to get a random number
//It is used for Ajax calls from IE; Else IE will use the cache values
function getRandomValue(){
return Math.floor(1000000 * (Math.random() % 1))
}
Note the URL used for the ajax call. It uses "tmpl=component" to get only the html for the selected component without joomla HTMLs.
Trying to load an external php file into another onClick. Iframes will not work as the size of the content changes with collapsible panels. That leaves AJAX. I was given a piece of code
HTML
Get data
<div id="myContainer"></div>
JS
$('#getData').click(function(){
$.get('data.php', { section: 'mySection' }, function(data){
$('#myContainer').html(data);
});
});
PHP:
<?php
if($_GET['section'] === 'mySection') echo '<span style="font-weigth:bold;">Hello World</span>';
?>
I have tested it here http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/programme-pages/dahab-divemaster/divemaster-trainingA.php and get the most unexpected results. It certainly loads the right amount of items as it says in the lower bar on safari but I see three small calendars and that is it. Can anyone see where I have made a mistake?
First things first, you want to have the jQuery bit inside the ready function $(document).ready(function(){..}. In your test page, there is already a ready function at the top which contains the line $('a[rel*=facebox]').facebox(), so you might want to put the code there.
Secondly, you want to prevent the link from going to the default action, which is to load the url '#'. You do that with the preventDefault() method.
I tested and confirmed that the following code should work for you:
<script type="text/javascript">
$(document).ready(function(){
$('#getData').click(function(event){
event.preventDefault();
$.get('test.php', { cat: 16 }, function(data){
$('#myContainer p').html(data);
});
});
});</script>
You can find more details and examples of jQuery's get function here.
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/ this tutorial may helps you