JQueryCompatibilityModePlugin

Just the same as JqueryPlugin? but using the compatibilty mode to provide use with other frameworks

Introduction

This plugin includes the jquery javascript library. In difference to JQueryPlugin it uses the build in compatibilty mode to not provoke a clash with $ in other frameworks like dojo or prototype

Usage

• After installing the plugin, all you need to do is using $j instead of $ for accessing jquery.
• In addition, you hava a global javascript variable Foswiki exporting the following Foswiki-intern values needed by most scripts

Value	Foswiki Value
Foswiki.systemWeb	The current Foswiki-System-Web
Foswiki.userWeb	The current Foswiki-User-Web
Foswiki.pubUrlPath	The current Foswiki pubUrlPath
Foswiki.scriptSuffix	The current Foswiki scriptSuffix
Foswiki.scriptUrlPath	The current Foswiki scriptUrlPath
Foswiki.viewScript	The current Foswiki viewScript path

Hint:
If you enclose your javascritpt by the following general body, you can use this script in any enviroment, no matter to which variable JQuery is currently bind to. This would mean you could use this script with JQueryPlugin also or even in environments, where Jquery is bind to $foo

(function($) {
.
// global accessable function
window.myGloablFunc = function () { $("#foo").show() }
.
.
// local accessable function
function myGloablFunc () { $("#foo").show() }
.
.
})(jQuery);

You can use any shortcut variable you like in this code, so ;(function($foo) {..} would let you use $foo in for access JQuery

Included JQuery libraries

• JQuery 1.3.2
• JQuery 1.2 ( deprecated but available. Not used by default )
• JQuery URL ( http://plugins.jquery.com/project/url_parser )
• JQuery UI 1.7 ( effects, dialogs, tabs, slider...)
• jquery-ajax-upload 1.0 ( http://valums.com/ajax-upload/ )
• jquery-mbMenu 1.0 ( http://plugins.jquery.com/project/mbMenu )
• jquery-jdMenue 1.4.1 ( http://jdsharp.us/jQuery/plugins/jdMenu/ )

How to let JQueryCompatibilityModePlugin include your or other JQuery plugins

Run /bin/configure and under JQueryCompatibilityModePlugin you see in the bottom part, the plugin settings. There you can enter a comma seperated list of includes relative to the pub/System/JQueryCompatibilityModePlugin directory. This way you can include your own or specific JQuery-Plugins and script and dont need every application to care about that ( especially because they done know about the directory structure )

Any library missing?

There is a lot missing here, so this needs an update. Please send me a short note on what you want to add. Actually the policy is, adding anything which can be useful, so in 99% of the cases the library gets added directly!

Foswiki specific upgrades

Foswiki.Func

Actually this is nothing special in general, it simply a JS based Foswiki::Func. It trys to never query Foswiki as long as its possible but it provides always exactly the same interface as the Foswiki::Func counterpart. It is designed to return exactly the same results as Foswiki::Func would.
Yet implemented are:

name
getScriptUrl( web, topic, script )
getRestUrl( web, topic, plugin, restmethod )

DialogAPI?

You can use the jquery.dialog api specific for Foswiki ( foswiki_specific/dialogAPI.js ). By calling the fetchAndShowDialog method

fetchAndShowDialog

Fetch, setup and show a dialog

parameter	type	default	meaning
selector	string	required	The div ID which should be used as the dialog-destination. Generally its a display:hidden layer hidden somewhere in the layout. You must add a # to your id here, so if the id is "example" you must use "#example" as parameter here
url	string	required	url to fetch
arguments	hash	required	Arguments hash

Hint to handler parameter: This is actually something you can use for rest-handler ajax-requests. As RestHandlers? should do what they are for and end up with a 200 or other status codes. You can then use your own RestHandlers? for e.g. doing something special if your request returns a 401. E.g. for some actions this could be "please login" for some "you have the wrong permissions"

setupDialog

Setup a dialog (not show)

parameter	meaning
selector	The div ID which should be used as the dialog-destination. Generally its a display:hidden layer hidden somewhere in the layout. You must add a # to your id here, so if the id is "example" you must use "#example" as parameter here
data	the data the dialog should show
arguments	Arguments hash, sees JQueryCompatibilityModePluginG?

Arguments for the API calls

Hash-Key	Type	default	meaning
title	string	required	title of the dialog
modal	boolean	required	should the dialog be shown modal, so you must close it before you can use the page further
width	integer	required	size of the dialog
height	integer	required	size of the dialog
stack	boolean	true	should this dialog stack on the others
resHandlers	hash	responseHandler['other'] = 'generalRestResponseHandler'; responseHandler['200'] = 'handleDialogCompleteResponse'; responseHandler['401'] = 'generalRestResponseHandler'; responseHandler['403'] = 'generalRestResponseHandler'; responseHandler['500'] = 'generalRestResponseHandler';	An hash out of status codes and the function which should be called, when the fetch request returns with such a status code Example: handler['200'] = "handleSuccess";handler['401'] = "handleNeedLogin";handler['other'] = "handleGeneralResponse"; A special role has the 'other' key, which is called, when the response code has no other handler, in our example status 500 or 501.
buttons	hash	A hash of buttons. Key is the button-label, the value is the method to call, when the button gets clicked

showDialog

Show a dialog, which was setup before

parameter	meaning
selector	The div ID which should be used as the dialog-destination. Generally its a display:hidden layer hidden somewhere in the layout. You must add a # to your id here, so if the id is "example" you must use "#example" as parameter here

hideDialog

hide a dialog

parameter	meaning
selector	The div ID which should be used as the dialog-destination. Generally its a display:hidden layer hidden somewhere in the layout. You must add a # to your id here, so if the id is "example" you must use "#example" as parameter here

Installation instructions

• just use the installer attached to the topic or even easier, use the configure-system/Extension to easy install it through an user-interface

Note: You do not need to install anything on the browser to use this plugin. The following instructions are for the administrator who installs the Plugin on the server where Foswiki is running.

• Set SHORTDESCRIPTION = Just the same as JqueryPlugin? but using the compatibilty mode to provide use with other frameworks

Plugin Author:	Foswiki:Main.EugenMayer
Copyright:	© Collaborganize ( www.collaborganize.com? )
License:	GPL (GNU General Public License)
Plugin Version:	15 FMar 2009 (V1.5)
Change History:
15 Mar 2009:	Reorganizing dialog-api a bit, upgrading JQuery to 1.3.2, upgrading Jquery-UI to 1.7
08 Feb 2009:	Introducing Foswiki.Func which should work as or perl counterpart Foswiki::Func
07 Feb 2009:	Changed the dialogAPI to use hash-arguments, updating docs
05 Feb 2009:	Fixing bug in jdMenug which does not recognise Jquery bounded onclick-events, fixing ajax_upload plugin to use ui-themes
02 Feb 2009:	Including new menue plugin, updating UI to 1.6.rc6 ( with base theme ) Enhancing dialogAPI to be able to handle rest-responses by status codes updating documentation
30 Jan 2009:	Adding generized way to include your own scrips / jquery plugins. Fixed bug in dialogAPI handler declaration, updated docs
30 Jan 2009:	adding new base-ui-theme, generalizing the ui-theme ( selectable through /bin/configure now ), also dialogAPI using this skin now. Update UI to 1.6.5rc
29 Jan 2009:	Fixing IE bug which cache the responses but not the headers, so the response header is completely broken
27 Jan 2009:	Added ajax-upload plugin, fixed dialogAPI waiting dialog, added waiting-dialog message parameter, changed dialog API
26 Jan 2009:	JQuery updated to 1.3.1
26 Jan 2009:	Added a Foswiki specific, updated and friendlyfied docs
25 Jan 2009:	Fixing installer bug ( when JQueryCompatibilityModePlugin has been installed, other plugins are failing ( Foswiki:Tasks/Item864 )
20 Jan 2009:	Adding pubURL and other vars to window.Foswiki, updating docs
11 Jan 2009:	added Jquery-Dialog API. You can choose, if Jquery or/and the Dialog API should be included automatically on page-load
28 Dez 2008:	initial release
Foswiki Dependency:
CPAN Dependencies:
Other Dependencies:
Perl Version:	5.005
Add-on Home:	http://foswiki.org/Extensions/JQueryCompatibilityModePlugin
Feedback:	http://foswiki.org/Extensions/JQueryCompatibilityModePluginDev
Appraisal:	http://foswiki.org/Extensions/JQueryCompatibilityModePluginAppraisal

Related Topic:

-- Foswiki:Main/EugenMayer - 02 Feb 2009