Javascript API¶

JavaScript signals using Bootstrap3¶

Default DjangoFloor templates are based on BootStrap3. These functions allows to display notifications with these templates. The div used by the modal is also emptied to force the update of its content when a new modal is displayed.

$.df.modal.show(opts)¶

Display a nice Bootstrap 3 modal window (!)

$.df.call('df.modal.show', {html: "Modal content!", width: "120px",
    onhide: {signal: "signal.name", options: {...}}});

Arguments:	html (string) – Content of the modal (put inside the “modal-content” div element width (string) – Width of the display modal (optional) onhide (object) – signal to call when this modal is hidden or closed (optional)

$.df.notify(opts)¶

Display a notification to the user. Multiple styles are available: modal windows, Growl-like notifications, page-wide banners or system notification (out of the browser).

$.df.call('df.notify', {content: "Hello, world!", level: "danger", style: "modal"});

Arguments:

content (string) – Message of the notification
title (string) – Title (displayed in bold) of the notification
timeout (int) – Number of milliseconds before the notification is hidden
style (string) – Method to use for displaying the notification (‘notification’, ‘banner’, ‘modal’, or ‘system’)
level (string) – Color of the notification: ‘info’, ‘default’, ‘success’, ‘danger’, ‘warning’.

Base API for signals and functions¶

Here is the complete JavaScript API provided by DjangoFloor.

$.df.call(signal, opts, id)¶

Call a signal. If the signal is also defined in the Python server and available to the user, then the Python signal is also triggered.

Arguments:	signal (string) – Name of the called signal. opts (object) – Object with signal arguments. id (string) – Unique id of each signal triggered by the server. Do not use it yourself.
Returns:	always false.

$.df.connect(signal, fn)¶

Connect a javascript code to the given signal name.

Arguments:	signal (string) – Name of the signal. fn (function) – Function that takes a single object as argument. The properties of this object are the signal arguments.
Returns:	nothing.

$.df.serializeArray(form)¶: A customized version of the $.serializeArray that add a value for file input elements (the name of the selected file). Can be useful for sending data to SerializedForm and check if a form is valid (without actually sending the file).

$.df.uploadFile(url, fileSelector, progressSelector)¶

Upload a file to the provided URL and update a progress bar HTML5 element.

Arguments:	url (string) – the URL to call (often a Django view) form (Form) – the form object progressSelector (string) – a jQuery selector for the progress element to update (optional)
Returns:	always false

<form onsubmit="return $.df.uploadFile('/app/upload', this, '#myProgressBar');" method="POST" >
<input type="text" name="content">
</form>
<progress max="100" value="0" id="myProgressBar"></progress>

$.df.CsrfForm(form)¶

Add the CSRF token to a form as a hidden input. Always returns True so you can use it as the onsubmit attribute. Useful when the form has been generated without any CSRF input.

Arguments:	form (Form) – the form object
Returns:	always true

Here is an example:

<form onsubmit="return $.df.CsrfForm(this);" method="POST" >
<input type="text" name="content">
</form>;

html.content(opts)¶

set the HTML contents of every matched element.

$.df.call('html.content', {selector: "#obj", content: "<span>hello</span>"});

Arguments:	selector (string) – jQuery selector content (string) – new HTML content

html.add(opts)¶

Create a new jQuery object with elements added to the set of matched elements.

$.df.call('html.add', {selector: "#obj", content: "<span>hello</span>"});

Arguments:	selector (string) – jQuery selector content (string) – new HTML content

html.add_class(opts)¶

Adds the specified class(es) to each of the set of matched elements.

$.df.call('html.add_class', {selector: "#obj", class_name: "myclass"});

Arguments:	selector (string) – jQuery selector class_name (string) – new class

html.add_attribute(opts)¶

Adds or replace the specified attribute(s) to each of the set of matched elements.

$.df.call('html.add_attribute', {selector: "#obj", attr_name: "title", attr_value: "value"});

Arguments:	selector (string) – jQuery selector attr_name (string) – attribute name attr_value (string) – attribute value

html.after(opts)¶

Insert content, specified by the parameter, after each element in the set of matched elements..

$.df.call('html.after', {selector: "#obj", content: "<span>hello</span>"});

Arguments:	selector (string) – jQuery selector content (string) – new HTML content

html.append(opts)¶

Insert content, specified by the parameter, to the end of each element in the set of matched elements.

$.df.call('html.append', {selector: "#obj", content: "<span>hello</span>"});

Arguments:	selector (string) – jQuery selector content (string) – new HTML content

html.before(opts)¶

Insert content, specified by the parameter, before each element in the set of matched elements..

$.df.call('html.before', {selector: "#obj", content: "<span>hello</span>"});

Arguments:	selector (string) – jQuery selector content (string) – new HTML content

html.empty(opts)¶

Remove all child nodes of the set of matched elements from the DOM.

$.df.call('html.empty', {selector: "#obj"});

Arguments:	selector (string) – jQuery selector

html.fade_out(opts)¶

Hide the matched elements by fading them to transparent.

$.df.call('html.fade_out', {selector: "#obj", duration: 400});

Arguments:	selector (string) – jQuery selector duration (int) – number of milliseconds of the animation

html.fade_in(opts)¶

Display the matched elements by fading them to opaque.

$.df.call('html.fade_in', {selector: "#obj", duration: 400});

Arguments:	selector (string) – jQuery selector duration (int) – number of milliseconds of the animation

html.fade_to(opts)¶

Adjust the opacity of the matched elements.

$.df.call('html.fade_to', {selector: "#obj", duration: 400, opacity: 0.5});

Arguments:	selector (string) – jQuery selector duration (int) – number of milliseconds of the animation opacity (float) – A number between 0 and 1 denoting the target opacity.

html.fade_toggle(opts)¶

Display or hide the matched elements by animating their opacity.

$.df.call('html.fade_toggle', {selector: "#obj", duration: 400});

Arguments:	selector (string) – jQuery selector duration (int) – number of milliseconds of the animation easing (string) – A string indicating which easing function to use for the transition.

html.focus(opts)¶

Set the focus to the matched element.

$.df.call('html.focus', {selector: "#obj"});

Arguments:	selector (string) – jQuery selector

html.hide(opts)¶

Hide the matched elements.

$.df.call('html.hide', {selector: "#obj"});

Arguments:	selector (string) – jQuery selector

html.prepend(opts)¶

Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

$.df.call('html.prepend', {selector: "#obj", content: "<span>hello</span>"});

Arguments:	selector (string) – jQuery selector content (string) – new HTML content

html.remove(opts)¶

Remove the set of matched elements from the DOM.

$.df.call('html.remove', {selector: "#obj"});

Arguments:	selector (string) – jQuery selector

html.remove_class(opts)¶

Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

$.df.call('html.remove_class', {selector: "#obj", class_name: "class"});

Arguments:	selector (string) – jQuery selector class_name (string) – class to remove

html.remove_attr(opts)¶

Remove an attribute from each element in the set of matched elements.

$.df.call('html.remove_attr', {selector: "#obj", attr_name: "attr"});

Arguments:	selector (string) – jQuery selector attr_name (string) – attribute to remove

html.replace_with(opts)¶

Replace each element in the set of matched elements with the provided new content.

$.df.call('html.replace_with', {selector: "#obj", content: "<span>hello</span>"});

Arguments:	selector (string) – jQuery selector content (string) – new HTML content

html.show(opts)¶

Shows the matched elements.

$.df.call('html.show', {selector: "#obj"});

Arguments:	selector (string) – jQuery selector

html.toggle(opts)¶

Display or hide the matched elements.

$.df.call('html.toggle', {selector: "#obj"});

Arguments:	selector (string) – jQuery selector

html.text(opts)¶

Set the text contents of the matched elements.

$.df.call('html.text', {selector: "#obj", content: "<span>hello</span>"});

Arguments:	selector (string) – jQuery selector content (string) – new HTML content

html.trigger(opts)¶

Execute all handlers and behaviors attached to the matched elements for the given event type.

$.df.call('html.trigger', {selector: "#obj", event: "click"});

Arguments:	selector (string) – jQuery selector event (string) – event to trigger

html.val(opts)¶

Set the value of every matched element.

$.df.call('html.val', {selector: "#obj", value: "value"});

Arguments:	selector (string) – jQuery selector value (string) – new value

html.download_file(opts)¶

Force the client to download the given file.

$.df.call('html.download_file', {url: "http://example.org/test.zip", filename: "test.zip"});

Arguments:	url (string) – URL of the file filename (string) – name of the file

df.validate.update_csrf(opts)¶

Update the CSRF token in all forms.

$.df.call('df.validate.update_csrf', {});

Arguments:	value (string) – New CSRF value