Ajaxify html forms


This packages is a simple jQuery library to help ajaxifying forms. Any form with a class jqAjaxForm will be ajaxified using its HTML5 data attributes to parametrize it.


Name Description Default
data-recirect target to redirect the browser on success, see below for more information  
data-reload boolean flag to enable page reloading, see more on redirect below false
data-block boolean flag whether to block the UI as long as the form is being processed by the backend true
data-message message to be displayed while the UI is being blocked  

There are multiple way how the browser is reacting after the form has been processsed successfully.

  1. use the redirect response of the backend returns a json object {result: { ..., redirect: "...", ...} ...} or
  2. use the redirect as specified in the form itself in a &jt;input name="redirect" value="..." > element or
  3. use the data-redirect HTML5 attribute or
  4. reload the current page if specified in the data-reload boolean parameter

JavaScript Events

The jqAjaxForm will receive events that third party scripts might listen to in order to participate on the form being processed:

  • beforeSerialize: called before the form data is serialized
  • beforeSubmit: called before the form is submitted
  • uploadProgress: called when uploading of data
  • error: called when the backend returned an error
  • success: called when the backend returned successfully
  • complete: called when the form has been fully processed

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. "Extensions Operation and Maintenance" Tab -> "Install, Update or Remove extensions" Tab. Click the "Search for Extensions" button. Enter part of the extension name or description and press search. Select the desired extension(s) and click install. If an extension is already installed, it will not show up in the search results.

You can also install from the shell by running the extension installer as the web server user: (Be sure to run as the webserver user, not as root!)
cd /path/to/foswiki
perl tools/extension_installer <NameOfExtension> install

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See https://foswiki.org/Support/ManuallyInstallingExtensions for more help.



Change History

22 Jan 2024 block submitting the form when it is not valid; added javascript callbacks for beforeSubmit, uploadProgress, error, success and complete events
04 May 2022 fixed name of jquery module; make callback handlers of ajaxForm available in AjaxForm class; export AjaxForm in global namespace
14 Oct 2020 initial release

PackageForm edit

Author Michael Daum
Version 1.40
Release 22 Jan 2024
Description Ajaxify html forms
Repository https://github.com/foswiki/JQAjaxFormContrib
Copyright 2020-2024, Michael Daum, All Rights Reserved
License GPL (GNU General Public License)
Home http://foswiki.org/Extensions/JQAjaxFormContrib
Support http://foswiki.org/Support/JQAjaxFormContrib
Topic revision: r1 - 22 Jan 2024, UnknownUser
This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback