Differences

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

--- devel:jqueryfaq [2014-01-13 13:48] – [What are the most commonly used JS features that are now deprecated?] better layout ... (and: it was stated "4" features while being 5 ...) 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 31: / Line 31: @@
 //("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)//
-:!: It is always recommended to create a dedicated testing environment, i.e. install a fresh DokuWiki copy outside your production instance to test and / or develop plugins.
 ===== What are the most commonly used JS features that are now deprecated? =====
@@ Line 41: / Line 40: @@
 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 50: / 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>
@@ 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>
+  * It common to start the variable which contain a jQuery object with a ''$''-character, but it is not required.
 ==== addInitEvent() ====
@@ Line 97: / Line 101: @@
 ==== addEvent() ====
-registering event handlers - use jQuery's [[http://api.jquery.com/category/events/|event methods]] instead.
+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 ====
@@ Line 150: / 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 159: / 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.