Differences

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

--- devel:jqueryfaq [2014-01-13 12:34] – [What if my plugin doesn't work anymore?] section deleted: no sense in it after Angua had been released (some time ago ...) hh lohmann
+++ 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 25: / Line 25: @@
 ===== 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 46: / 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 56: / 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 87: / 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,EVENT,function(){ alert("EVENT happened!") });
+addEvent(obj, "click", function(){
+    alert("Click happened!")
+});
+/* Recenter old code */
+jQuery(obj).click(function(){
+    alert("Click happened!")
+});
 /* New code */
-jQuery(obj).EVENT(function(){ alert("EVENT happened!") });
+jQuery(obj).on("click", function(){
+    alert("Click happened!")
+});
 </code>
-  * => replace EVENT by "click", "change", "blur", "focus" and the like (s. jQuery link above!)
+  * replace "click" by the event you need e.g. "change", "blur", "focus" and the like (see jQuery link above)
+==== tw_sack ====
-**''tw_sack''** for executing AJAX requests - use jQuery's [[http://api.jquery.com/category/ajax/|AJAX methods]] instead.
+executing AJAX requests - use jQuery's [[http://api.jquery.com/category/ajax/|AJAX methods]] instead.
 <code javascript>
@@ Line 138: / 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 147: / 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.