devel:jqueryfaq
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
devel:jqueryfaq [2011-12-08 07:44] – [What are the most commonly used JS features that are now deprecated?] 2.14.221.158 | devel:jqueryfaq [2023-10-19 23:36] (current) – Klap-in | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== | + | ====== |
- | The upcoming | + | Since the October 2011 release of DokuWiki, codenamed " |
- | We encourage plugin and template authors to look into these issues | + | We encourage plugin and template authors to look into these issues |
===== Why did you switch to jQuery? ===== | ===== Why did you switch to jQuery? ===== | ||
- | jQuery is a well known, widely used and tested library. It is well [[http:// | + | jQuery is a well known, widely used and tested library. It is well [[http:// |
===== What jQuery version is supported? ===== | ===== What jQuery version is supported? ===== | ||
Line 19: | Line 19: | ||
If your plugin or template doesn' | If your plugin or template doesn' | ||
- | But your plugin's JavaScript should continue to work for now. We deprecated | + | Note: The compatibility wrappers / layer for deprecated JavaScript functions (since Autumn 2011 " |
- | Note: The compatibility wrappers will be removed in the October 2012 release. **If your plugin uses deprecated JavaScript, you need to update it within the next year**. | ||
- | ===== What if my plugin doesn' | ||
- | |||
- | If " | ||
- | |||
- | 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? ===== | ===== How do I know if I need to adjust my plugin? ===== | ||
- | {{ http://img854.imageshack.us/img854/ | + | Freshly installed " |
- | 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 | + | {{ http://img854.imageshack.us/img854/ |
+ | |||
+ | // | ||
- | 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. | ||
===== What are the most commonly used JS features that are now deprecated? ===== | ===== 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 '' |
- | Note that '' | + | * Note that '' |
<code javascript> | <code javascript> | ||
Line 52: | Line 49: | ||
/* New code */ | /* New code */ | ||
var $obj = jQuery('# | var $obj = jQuery('# | ||
- | // $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]; | var obj = $obj[0]; | ||
</ | </ | ||
- | **'' | + | ==== getElementsByClass() ==== |
+ | |||
+ | use jQuery' | ||
<code javascript> | <code javascript> | ||
Line 62: | Line 61: | ||
var htmlelements = getElementsByClass( ' | var htmlelements = getElementsByClass( ' | ||
// htmlelements now is an array of DOM elements | // htmlelements now is an array of DOM elements | ||
- | for( var n in htmlelements ) { | + | for(var n in htmlelements ) { |
dosomething( htmlelements[n] ); | dosomething( htmlelements[n] ); | ||
} | } | ||
/* New code */ | /* New code */ | ||
- | var jqueryelements = jQuery(' | + | jQuery(' |
- | // jqueryelements is a jquery thing : an array plus some other stuff. | + | 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; | + | /* Or, this new code */ |
- | // dosomething(jqueryelements[n]); | + | let $jqueryelements = jQuery(' |
- | // } | + | // $jqueryelements is a jquery thing: an array plus some other stuff. |
+ | $jqueryelements.each(function(){ | ||
+ | | ||
+ | }); | ||
+ | /* or, if you prefer (I don't know wich one is better) | ||
+ | for (let n = 0; n < $jqueryelements.length; | ||
+ | dosomething($jqueryelements[n]); | ||
+ | } | ||
</ | </ | ||
- | **'' | + | |
+ | ==== addInitEvent() | ||
+ | |||
+ | registering | ||
<code javascript> | <code javascript> | ||
Line 90: | Line 99: | ||
</ | </ | ||
- | **'' | + | ==== addEvent() |
+ | |||
+ | Registering | ||
<code javascript> | <code javascript> | ||
/* Old code */ | /* Old code */ | ||
- | addEvent(obj, | + | addEvent(obj, |
+ | alert(" | ||
+ | }); | ||
+ | |||
+ | /* Recenter old code */ | ||
+ | jQuery(obj).click(function(){ | ||
+ | | ||
+ | }); | ||
/* New code */ | /* New code */ | ||
- | jQuery(obj).click(function(){ alert(" | + | jQuery(obj).on(" |
+ | | ||
+ | }); | ||
</ | </ | ||
- | **'' | + | |
+ | |||
+ | ==== tw_sack | ||
+ | |||
+ | executing AJAX requests - use jQuery' | ||
<code javascript> | <code javascript> | ||
Line 139: | Line 163: | ||
- | For example, if you want to use the [[http:// | + | For example, if you want to use the [[http:// |
<code javascript> | <code javascript> | ||
Line 148: | 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 '' | 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 '' | ||
- | * override styles in CSS of your template | + | * override styles in CSS of your template. See also [[devel: |
devel/jqueryfaq.txt · Last modified: 2023-10-19 23:36 by Klap-in