devel:jqueryfaq
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
devel:jqueryfaq [2012-10-12 12:32] – [jQuery FAQ for Plugin Developers] andi | devel:jqueryfaq [2023-10-19 23:36] (current) – Klap-in | ||
---|---|---|---|
Line 7: | Line 7: | ||
===== 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? ===== | ||
- | 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 | + | Freshly installed " |
{{ http:// | {{ http:// | ||
- | 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 | + | // |
===== 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 */ | ||
- | jQuery(' | + | jQuery(' |
+ | | ||
+ | }); | ||
/* Or, this new code */ | /* Or, this new code */ | ||
- | var jqueryelements = jQuery(' | + | let $jqueryelements = jQuery(' |
- | // 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(){ |
+ | | ||
+ | }); | ||
/* or, if you prefer (I don't know wich one is better) */ | /* or, if you prefer (I don't know wich one is better) */ | ||
- | for ( var n = 0; n < jqueryelements.length; | + | for (let n = 0; n < $jqueryelements.length; |
- | dosomething(jqueryelements[n]); | + | dosomething($jqueryelements[n]); |
} | } | ||
</ | </ | ||
- | **'' | + | |
+ | ==== addInitEvent() | ||
+ | |||
+ | registering | ||
<code javascript> | <code javascript> | ||
Line 93: | 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 142: | 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 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 '' | 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.1350037941.txt.gz · Last modified: 2012-10-12 12:32 by andi