Differences

This shows you the differences between two versions of the page.

--- devel:jqueryfaq [2012-10-12 12:32] – [Will my old plugins continue to work?] andi
+++ devel:jqueryfaq [2023-10-19 23:36] (current) – Klap-in
@@ Line 7: / Line 7: @@
 ===== Why did you switch to jQuery? =====
-jQuery is a well known, widely used and tested library. It is well [[http://api.jquery.org|documented]] and makes JavaScript development much easier. Supporting jQuery was an often requested feature by 3rd party plugin and template developers. Using jQuery should lower entry barriers for new DokuWiki developers creating new, modern user interfaces.
+jQuery is a well known, widely used and tested library. It is well [[http://api.jquery.com|documented]] and makes JavaScript development much easier. Supporting jQuery was an often requested feature by 3rd party plugin and template developers. Using jQuery should lower entry barriers for new DokuWiki developers creating new, modern user interfaces.
 ===== What jQuery version is supported? =====
@@ Line 19: / Line 19: @@
 If your plugin or template doesn't use any JavaScript, then it obviously isn't affected by the change at all.
-But your plugin's JavaScript should continue to work for now. We deprecated a lot of old JavaScript functions and objects, but provide compatibility wrappers for most of them. Certain object properties might be no longer available.
+Note: The compatibility wrappers / layer for deprecated JavaScript functions (since Autumn 2011 "Angua" release) have been removed with the Spring 2013 "Weatherwax" release. **If your plugin uses deprecated JavaScript, you need to update it** (see below).
-Note: The compatibility wrappers will be removed in the Spring 2012 release. **If your plugin uses deprecated JavaScript, you need to update it within the next year**.
-===== What if my plugin doesn't work anymore? =====
-If "Angua" isn't released yet, create a bug report and we might be able to add a compatibility layer.
-Otherwise, you have to fix/upgrade your plugin to work with the new system (which you need to do anyway in a year when the compatibility layers are removed).
 ===== How do I know if I need to adjust my plugin? =====
-Even if your JavaScript continues to work for now, you need to remove all dependencies on deprecated code within the next year. To help you, all deprecated functions and objects will trigger warning messages in the [[http://getfirebug.com/|Firebug]] error console or the Chrome inspector.
+Freshly installed "Angua" and "Adora Belle" releases trigger warning messages about deprecated JavaScript calls (by compatibility layer) that you can inspect in the [[http://getfirebug.com/|Firebug]] error console or the Chrome inspector. Most of the warnings will give you a hint how to replace the deprecated code with jQuery functions:
 {{ http://img854.imageshack.us/img854/1037/errorconsole.png?nolink |Deprecation Warnings in Chrome}}
-A default install of DokuWiki throws no deprecation warnings. We recommend to install a fresh DokuWiki copy and install your plugin only to easily identify warnings created by your code. Most of the warnings will give you a hint how to replace the deprecated code with jQuery functions.
+//("Weatherwax" and "Binky" do not support the compatibility layer any more, but you can reactivate it - no hints here because this might be misunderstood as "how to still __use__ old plugins"; if you want to __fix__ old plugins you should have the knowledge to find your way)//
 ===== What are the most commonly used JS features that are now deprecated? =====
-Here are the 4 most commonly used, deprecated bits from our old library and some simple examples how to replace them with jQuery features.
+Here are the most commonly used, deprecated bits from our old library and some simple examples how to replace them with jQuery features.
+==== $('...') ====
-**''$()''** as a shortcut to ''document.getElementById'' - use jQuery's [[http://api.jquery.com/jQuery/#jQuery1|selectors]] instead.
+as a shortcut to ''document.getElementById('...')'' - use jQuery's [[http://api.jquery.com/jQuery/#jQuery1|selectors]] instead, namely **''jQuery('#...')''**.
-Note that ''$()'' **is not** (and never was) the jQuery shortcut, jQuery is only available in it's long form of ''jQuery()''.
+  * Note that ''$()'' **is not** (and never was) the jQuery shortcut, jQuery is only available in it's long form of ''jQuery()''.
 <code javascript>
@@ Line 52: / Line 49: @@
 /* New code */
 var $obj = jQuery('#some__id');
-// $obj is a jQuery object - if you really need the DOM object use [0] like this:
+// $obj is a jQuery object - if you really need the DOM object use [0] e.g.:
 var obj = $obj[0];
 </code>
-**''getElementsByClass''** - use jQuery's [[http://api.jquery.com/jQuery/#jQuery1|selectors]] instead.
+==== getElementsByClass() ====
+use jQuery's [[http://api.jquery.com/jQuery/#jQuery1|selectors]] instead
 <code javascript>
@@ Line 62: / Line 61: @@
 var htmlelements = getElementsByClass( 'class', document, 'tag');
 // htmlelements now is an array of DOM elements
-for( var n in htmlelements ) {
+for(var n in htmlelements ) {
   dosomething( htmlelements[n] );
 }
 /* New code */
-jQuery('tag.class').each(function(){dosomething(this);});
+jQuery('tag.class').each(function(){
+    dosomething(this);
+});
 /* Or, this new code */
-var jqueryelements = jQuery('tag.class');
+let $jqueryelements = jQuery('tag.class');
-// jqueryelements is a jquery thing : an array plus some other stuff.
+// $jqueryelements is a jquery thing: an array plus some other stuff.
-jqueryelements.each(function(){dosomething(this);});
+$jqueryelements.each(function(){
+    dosomething(this);
+});
 /* or, if you prefer (I don't know wich one is better) */
-for ( var n = 0; n < jqueryelements.length; ++n ) {
+for (let n = 0; n < $jqueryelements.length; ++n ) {
-	dosomething(jqueryelements[n]);
+    dosomething($jqueryelements[n]);
 }
 </code>
-**''addInitEvent()''** to register callbacks to be run when the DOM is ready to be used - use jQuery's [[http://api.jquery.com/jQuery/#jQuery3|callback mechanism]] instead.
+  * It common to start the variable which contain a jQuery object with a ''$''-character, but it is not required.
+==== addInitEvent() ====
+registering callbacks to be run when the DOM is ready to be used - use jQuery's [[http://api.jquery.com/jQuery/#jQuery3|callback mechanism]] instead.
 <code javascript>
@@ Line 93: / Line 99: @@
 </code>
-**''addEvent()''** for registering event handlers - use jQuery's [[http://api.jquery.com/category/events/|event methods]] instead.
+==== addEvent() ====
+Registering event handlers - use jQuery's [[https://api.jquery.com/category/events/|event methods]] instead.
 <code javascript>
 /* Old code */
-addEvent(obj,click,function(){ alert("clicked") });
+addEvent(obj, "click", function(){
+    alert("Click happened!")
+});
+/* Recenter old code */
+jQuery(obj).click(function(){
+    alert("Click happened!")
+});
 /* New code */
-jQuery(obj).click(function(){ alert("clicked") });
+jQuery(obj).on("click", function(){
+    alert("Click happened!")
+});
 </code>
-**''tw_sack''** for executing AJAX requests - use jQuery's [[http://api.jquery.com/category/ajax/|AJAX methods]] instead.
+  * replace "click" by the event you need e.g. "change", "blur", "focus" and the like (see jQuery link above)
+==== tw_sack ====
+executing AJAX requests - use jQuery's [[http://api.jquery.com/category/ajax/|AJAX methods]] instead.
 <code javascript>
@@ Line 142: / Line 163: @@
-For example, if you want to use the [[http://craigsworks.com/projects/qtip|qTip jQuery plugin]], chose "//Development - Uncompressed source code//" from the download page. The resulting filename (eg. ''jquery.qtip-1.0.0-rc3.js'')) then has to be renamed to ''jquery.qtip.js'' and placed in your plugin folder. Then load it from your plugin's main script like this:
+For example, if you want to use the [[http://craigsworks.com/projects/qtip|qTip jQuery plugin]], choose "//Development - Uncompressed source code//" from the download page. The resulting filename (eg. ''jquery.qtip-1.0.0-rc3.js'')) then has to be renamed to ''jquery.qtip.js'' and placed in your plugin folder. Then load it from your plugin's main script like this:
 <code javascript>
@@ Line 151: / Line 172: @@
 Yes, of course. Simply override our default jQuery UI CSS in your own template CSS files. The default theme used by DokuWiki can be found in ''lib/scripts/jquery/jquery-ui-theme/smoothness.css''. Do not edit this file! Override styles in your own template instead.
-    * override styles in CSS of your template
+    * override styles in CSS of your template. See also [[devel:css#dokuwiki stylesheets]] for details.